nrelate Styling Guide

With the release of v0.46.0 of our plugin, you can now choose from a variety of styles from our Style Gallery. However, you can also style our related content by adding your own custom CSS to your themes stylesheet.

We’ve packed the html in our related content with a ton of classes to make it easy for you to style.  Here’s a guide:

OVERALL TARGETING:

The main div for related has an ID of “nrelate_related“, and a few classes: nrelate, nrelate_related and nrelate_none. If you want your custom styles to only effect your nrelate related content then you should target the div id #nrelate_related. If you want your styles to target other nrelate products, then you should target the div class .nrelate or .nrelate_none.

COMMON FOR BOTH THUMBNAILS AND TEXT:

  • nr_title: The title for the section, which is currently H3.  Our default is “You may also like -“
  • nr_inner: The inner div.
  • nr_link: a standard thumbnail link.
  • nr_internal: a link to your website content.
  • nr_external: a link to a website in your blogroll.
  • nr_post_title: The post title.
  • nr_excerpt: The post excerpt.
  • nr_clear: used to clear anything above or below our main div.

THUMBNAIL IMAGES:

Thumbnail images have some extra classes.

  • nr_img_div: The image is wrapped in this div.
  • nr_img: This is the image class:  img.nr_img.
  • nr_text: Any text (Post title and Excerpt) will be wrapped in here.
  • nr_ad: an advertisement.

The thumbnail images are divided into “Rows” and “Columns”.  The CSS classes reflect this:

Rows:

  • nr_row_X: Each row is marked with this class.  The first row is nr_row_1, the second is nr_row_2, etc.
  • nr_odd_row: Odd rows are named with this class. Examples are Row 1, Row 3, Row 5, etc.
  • nr_even_row: Even rows are named with this class. Examples are Row 2, Row 4, Row 6, etc.
  • nr_first_row: The first row.
  • nr_last_row: The last row.

Columns:

  • nr_col_X: Each column is marked with this class.  The first column is nr_col_1, the second is nr_col_2, etc.
  • nr_odd_col: Odd columns are named with this class. Examples are Col 1, Col 3, Col 5, etc.
  • nr_even_col: Even columns are named with this class. Examples are Col 2, Col 4, Col 6, etc.
  • nr_first_col: The first column.
  • nr_last_col: The last column.

STARTING WITH ONE OF OUR STYLES:

You don’t need to start from scratch to style our results… you can start with one of our existing styles and make changes:

  1. Go to our Style Gallery and choose the style you want to use as your base.  For this example we’ll use the “Trendland” style.
  2. Click on the “view stylesheet” link under Trendland.
  3. Copy the entire stylesheet and paste it into your style.css file.
  4. The Trendland style is rendered because of the .nrelate_tre class.  This needs to be changed, since you are not using “Trendland”, you’re just using it as a base.  So change all instances of .nrelate_tre to just .nrelate and save your style.css file.
  5. Back in the Style Gallery choose the “none” style.
  6. If you view your website, nrelate will still look like Trendland, but now you can make all the changes you want in your Style.css file.

DEPRECATED CLASSES:

Throughout the html you will see classes that contain an “rc” (ie nr_rc_title, nr_rc_inner).  This classes are deprecated and should not be used. They have been left in to support older versions of custom css.

WANT MORE?

See Part II >

QUESTIONS:

If you have any questions, comments or recommendations, please let us know on our forum.

 

Comments are Closed.

Please post your questions on our Support Forum