Customizing the CSS styles of a widget

One simple way to customize the styles of widgets is to add a <styles> block within the widget theme file itself. This would allow you for example to create a version of a widget that can display correctly on publisher sites with dark backgrounds.

1. Go to:

/components/com_jreviews_addons/widgetfactory/views/themes/widgetfactory/widget_listings

2. Make a copy of the one.thtml file and rename the file to one_dark.html. If you haven't created your custom theme in overrides now would be a good time to do it and you can copy the renamed file inside your custom theme in the /widgetfactory/widget_listings/ folder.

3. Paste the following styles block directly below the 'Edit HTML Below This Line' title, and before this line:

<div class="jrWidgetItems <?php echo ' jrThumbnail'.ucfirst($tnposition); ?>">:

<style>
.jrWidgetItems {color: #EDE8E8;}
.jrWidgetItems a:link {color: #FCFAFA;}
.jrWidgetItems a:visited {color: #DBD3D3;}
.jrWidgetItems a:hover {color: #71D0EB;}
.jrWidgetItems a:active {color: #DCE4E6;}	
</style>

4. Go to: Components > JReviews > Add Ons > Widget Factory > Widget Manager

5. Select ‘One Listing’ and click ‘+New’

6. In the Theme Suffix field, type _dark (or whatever you called the second part of the new file name on step 2).

7. Click ‘Save’

8. Clear the registry by going to JReviews > Maintenance > Clear Cache & File Registry

9. Sign into the front end of the site with a Super User account.

10. Visit the Widget Factory link and get the code.