Custom HTML Elements

Columns in the content

gkcolumns

We have to used in a few places a simple mechanism of the columns in the content. You can create 2,3,4,5 or even 6-column layout in the single widget using the following structure:

<div class="gk-columns" data-column-count="5">
<div>
// … column content
</div>
...
</div>

Amount of columns is specified in the data-column-count attribute and should be in range 1-6.

Grid Photos

grid-photos

If you want to put a photo which will have an overlay for the whole image, you can use the gk-avatar class in text widget.

The necessary structure is following

[code]<a class=”gk-avatar” href=”[pageurl]/profile_url” style=”background-image: url(‘[pageurl]/wp-content/uploads/avatars/your_image.jpg’);”>

<span><em>Gary Hall</em></span>

</a>[/code]

If you want to add only photos (without overlay) use this syntax:

[code]

<div class=”gk-photo” style=”background-image: url(‘PATH’);”></div>

[/code]

Titles and Subtitles

white-suffix

Sometimes you need to create a longer title with subtitles. You can use the following syntax in widget title:

[code]Widget title __second line subtitle__[/code]

Please remember to choose widget styles: bigtitle or subtitle.