Using custom CSS to style your Call to Action

Customizing CSS

The Custom CSS Metabox

Every call to action has it’s on custom CSS and custom JS metaboxes that will apply stylings whenever the CTA is loaded. Use this area to perfect call to action formatting.

custom css

Discovering element classnames and ids

When defining custom styles you will need to either have an id attribute or a class attribute for targeting your new CSS rules to the correct element.

To discover these id or class names we use the Chrome Inspector tool.

Overwriting already defined styles

Sometimes CSS styling rules are already defined and simply adding new rules to the Custom CSS Metabox will seem to have no affect. When this is the case you will need to override old rules by creating a longer CSS definition chain than what is already defined for that call to action element.

For example if the current styling is already defined by a CSS rule like this:
#wp_cta_109411_variation_0 .cta_content {
padding-bottom: 5px;
}

Then when creating our custom rules we will need to create a longer definition chain like this:
body #wp_cta_109411_variation_0 .cta_content {
padding-bottom: 5px;
}

Notice I added ‘body’ to the front of the rule, telling it to look for body-> #wp_cta_109411_variation_o -> .cta_content , effectively creating a longer definition chain. Browsers will use the longest chain to determine the most correct styling rule.