How To Make Custom CSS Changes

How To Make Custom CSS Changes

15/08/2018

Even when you find the perfect theme for your needs, chances are you are going to want something changed that will require some custom CSS. CSS is used to style your theme. Several styling options are already included with the theme in your theme options panel, or within the shortcodes or page options. But even with that plethora of styling options, you will probably come across something that does not have a built-in option. When this happens, you need to use custom CSS. Every shortcode Avada includes has a class and id option. This allows you to further customize the shortcode outside of the options we provide. For example, if you need to setup a shortcode differently than what our options allow, you can add a custom class or id to the shortcode, and then create your custom CSS to target that.

Please note that customizing our shortcodes with a class or id is not covered by our support. This goes beyond normal theme use and was added for advanced web developers.

How to Apply Custom CSS To A Shortcode Element

Step 1 - To apply custom CSS to a specific element, you will need to give that element a unique class or ID. Most of the elements you can insert via the page builder will have an option to set both of these values (Note: You can use either, but both are not required).

Step 2 - After you set the custom class or ID, we can then control the styling of that element by adding custom css that targets the class name. This CSS should be added to the the Custom CSS field in our Avada > Theme Options > Custom CSS section.

IMPORTANT NOTE - The style above will apply a black (#000000) background to the element with the class name 'custom-class-name'. Please note the "." before the class name. This is very important and if forgotten, will break any other styles that you have applied. If we were to use a custom ID instead of a class, we would simple replace the "." with a "#" symbol. As we may be override existing styles, we use the "!important" value just before the ";". This tells the browser that this style is to take priority over other CSS trying to set the same style.

If you're unsure about how to get the code for the color you wish to use, please use this online tool:

http://www.colorpicker.com/

Finding CSS Selectors by Inspecting Elements

If you would like to override existing styles of an element, you will need to find the CSS selector that it is currently using and there is no better way to do that then to inspect your site with some kind of browser developer tool. Among other things, browser developer tools and extensions allow you to inspect the CSS of live sites and make changes to the CSS and view the live changes. These tools are invaluable and well worth the time it takes to learn them. There are several out there to use, see below for the different options we recommend.

Firebug Extension

Firebug is a browser extension that you can use with just about any browser. Its built for Firefox, but also has light versions for Safari, Chrome, and Internet Explorer. Firebug is an amazing tool that allows you to inspect the CSS and make changes to see how its affected. Its a great tool to learn, download it for free at the link below, and watch the video tutorial. You can also google other firebug video tutorials to learn more. Trust me, it will be well worth your time.

Chrome Developer Tools

If you use Chrome, or have Chrome available, you already have built in browser tools to help you inspect your site. There is a lot of information out there on the web about Chrome Developer tools, and I've included a few starter links below.

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept