We have started IMPREZA 8 BETA testing. Participate and leave your feedback!

Impreza Knowledge Base Advanced Modifications Page Style Customization Guide

Page Style Customization Guide

You need to have basic CSS knowledge to use the guide. Otherwise, you may need to study CSS first.

You can create particular style modifications using CSS language

Where to Write Page's CSS Code #

Most probably, you're using WPBakery Page Builder (Visual Composer) plugin that comes with Impreza. Click a special button at the top of WPBakery Page Builder editor to insert the relevant code:

2187.jpeg

Insert the code into the appeared field, save changes and preview the page/post to see the changes.

2492.png

Styling Particular Elements #

Almost every element has a special field called "Extra class name" that could be used to identify this particular element on the page:

2493.png

Just enter some unique class name, and after that, you'll be able to add custom CSS styles to it:

2494.png

Styling Particular Elements' Inner Tags #

Let's say we want to style a star icon inside of this button:

1464.png

We need to edit it and add some unique class name, like this:

2495.png

Open the page in FireFox (if you don't have FireFox, install it - at least for development purposes). You'll need FireBug plugin for FireFox (if you don't have it, you can install it here). Find the needed tag within the element that has the custom class name:

1466.png

So we can write a relevant tag's styles the way like this:

2497.png

To achieve something like this:

1468.png