nrelate Styling Guide: Part II

All nrelate plugins are written so they inherit your themes CSS styles.  However, sometimes you may want to change a color, font-size or more.  nrelate is packed with lots of CSS classes, listed below are some of the more common ones you may want to target.


  • All of these code snippets should be placed in your themes CSS file.  This is usually: STYLE.CSS
  • These samples will target ALL nrelate plugins.  You can target an individual plugin by changing “.nrelate” to the appropriate plugin:
    • .nrelate_related
    • .nrelate_popular
    • .nrelate_flyout
  • WIDGETS: For nrelate widgets, change “.nrelate” to the appropriate plugin.  This allows you to style the nrelate widgets differently then the nrelate in your posts:
    • .nrelate-related-widget
    • .nrelate-popular-widget

All Plugin Styles

Add space above nrelate

.nrelate { margin-top: 20px !important; } /* Add 20px above nrelate */

nrelate title

.nrelate .nr_text { color: #000000 !important; } /* Change color to black */

Post title

.nrelate .nr_post_title { color: #000000 !important; } /* Change color to black */

Thumbnail Styles

Thumbnail Text
.nrelate .nr_text { color: #000000 !important; } /* Change color to black */

Text Styles

Text Excerpt
.nrelate .nr_excerpt { color: #000000 !important; } /* Change color to black */



Comments are Closed.

Please post your questions on our Support Forum