Contents
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
– add a class to the isotope menu