RoseNode.com

How to use Custom css

The majority of Themes come with a Theme customizer that only allows you to edit some small changes with the look of the site.

Some themes have more advanced built in customizers than others.

In order to further modify the look of the themes on RoseNode.com you will need to use the custom CSS editor.

The CCS editor is located on your Admin Dashboard under the “Appearance” Section on the left.

Open up the CSS editor and be prepared to enter in CSS into the editor.

Open up your website in another browser tab or window and right click on the element that you want to change on the site, Then click “Inspect Element”

customcss1

A new window will pop up showing you the HTML code of your website along with the CSS tags. You can make changes by modifying, removing, or adding CSS values in your web browsers inspector editor to see what the changes you make will change on your site.

customcss2

As an example, I selected the css tag .page-wrap to modify. On the theme that RoseNode.com is using there is a padding below the Site Description of 100px, I wanted to reduce that padding to 0px. In order to modify this CSS value, I inserted the CSS code that I located in the browsers “element inspector” along with the changes I wanted into the Custom CSS editor as in the following image,

customcss3

Click save changes and then reload your site to see the changes.

The Custom CSS editor should over write any current CSS the theme is using.

Good luck! If you need any further help please contact us on the support desk. We will be happy to help assist you!

Leave a Reply

Your email address will not be published. Required fields are marked *