Design Options – Creating custom styles & classes for your grid

uniqueid

–  Use this advanced setting to create unique id’s and classes for custom styling and scripts. By default a unique id is generated at runtime and is not static. In the case of a sidebar widget, the unique id contains the widget id which is static. The unique id is appended to the masonry container id, the masonry widget id and the widget item class.

If the uniqueid is ‘mywidget’, the elements will have the following id’s and classes:

Container id – featured_image_pro_masonry_container_mywidget

Widget id – masonry-widget_mywidget

Widget item class – featured_image_pro_masonry_item_mywidget

Example:

#featured_image_pro_masonry_container_mywidget
{
    background-color:purple;
    padding:5px;
}
#masonry-widget_mywidget
{
    background-color:pink;
}

Use a uniqueid to style the widget background

[featured_image_pro uniqueid='mywidget' posts_per_page='15']


More styling tips

You can use the custom id to style specific elements on the page. As an example, add
this to your custom styles (eliminate the unique id to apply the styles to all navigation links)

      #featured_image_pro_masonry_container_navstyles
     .nav-previous
     {
        float:left;

     }
    #featured_image_pro_masonry_container_navstyles
    .nav-next
     {
        float:right;
     }

[featured_image_pro bypage='true' posts_per_page='5' uniqueid='navstyles']

excerptclass

– add a class to the excerpt element.

Example:

.my_excerpt_class
{
background-color:yellow;
}
Use an excerpt class to style the background of the excerpt

[featured_image_pro excerpt='true' excerptclass='my_excerpt_class' posts_per_page='15']

captionclass

add a class to the caption element.
Example

.my_caption_class .proto_title
{
color:pink;
text-align:left;
}
Use a caption class to style the caption

[featured_image_pro showcaptions='true' captionclass='my_caption_class' posts_per_page='15']

imageclass

– add a class to the image element

.my_image_class{
border:red double!important/*override default border settings*/;
}
Use an imageclass to create a custom style that puts a border around the image

[featured_image_pro imageclass='my_image_class' posts_per_page='15']

itemclass

– add a class to the item element

.my_item_class{
background:yellow;
padding:5px;

}

[featured_image_pro itemclass='my_item_class' posts_per_page='10' itemwidth='300px']

widgetclass

– add a class to the widget

topcontainierclass

– add a class to the top container

filteredmenuclass

– add a class to the isotope menu

Leave a Reply

Your email address will not be published. Required fields are marked *