CSS Overrides

CSS overrides should be the preferred choice to make visual changes that allow you to fine-tune the default styles to better match your site.

Getting Started

To start making CSS Overrides, you should have already created a custom theme. Next you'll create an empty custom_styles.css file inside the theme_css, which you need to also create.

CSS Overrides are incremental

When you first create the custom_styles.css file below, it should be empty. Don't copy the entire CSS from the source files in JReviews into this file. Only add your custom CSS classes here.

You should have a structure that looks like this:

Joomla

templates/
`-- jreviews_overrides/
	`-- views/
		`-- themes/
			`-- mysite/
				|-- themeInfo.xml
				`-- theme_css
					`-- custom_styles.css

WordPress

In WordPress create the folder in the root of the site

jreviews_overrides/
`-- views/
	`-- themes/
		`-- mysite/
			|-- themeInfo.xml
			`-- theme_css
				`-- custom_styles.css

While CSS and customizations in general are not part of support, below you can find a couple of simple examples that illustrate how CSS overrides can be used:

Hide Video Views

.jr-media-views {
    display: none;
}

Make Favorites Button Green

.jrFavoriteButton {
    background-color: var(--fwd-color-green-500) !important;
    border-color: var(--fwd-color-green-600) !important;
    color: #fff !important;
}
.jrFavoriteButton .jrIconFavorite:before {
    color: #fff !important;
}

Remove Custom Field Bullets

For all custom fields:

ul.jrFieldValueList li:after {
    content: ''; 
    padding: 0; 
}

For a specific custom field. If the field name is jr_fieldname, it will have a CSS class of jrFieldname that can be used in the CSS selector:

.jrFieldname ul.jrFieldValueList li:after {
    content: '';
    padding: 0;
}