How can I apply custom CSS to my Blog?

Displaying ads on your site is also always an interference with the layout. Therefore, you might often have requirements for ad placements that can not be handled automatically with the options in Advanced Ads. 

In support, we might then suggest using custom CSS rules. This tutorial explains how you can write those.

This tutorial is no introduction to CSS, the language for styling websites. For basic information, read more on Wikipedia.

Where can I insert CSS?

You have various options to insert custom CSS.

Use the style.css of your (child) theme

Every theme comes with a style.css file. You can add your custom CSS code there.

However, the following theme update might override it, and other developers and users might also not easily find those changes. 

Child themes are slightly better, as an update does not override them, but still not easy to maintain for inexperienced users.

Using theme options

Many professional themes come with an option to insert custom CSS or code into the head section of your website.

You can often find this option within the theme options panel, which is at a different place depending on your theme. Please refer to the manual or ask the theme developer for guidance.

These options don’t get overridden on a theme update but, of course, are only bound to the current theme and don’t apply if you change it.

Using a Plugin

Using a plugin is an excellent theme-independent solution for this task. There are several plugins in the plugin directory for adding custom CSS.

Using the Customizer

You can add custom CSS to your theme from the Customizer (Appearance > Customize > Additional CSS) without the need for additional plugins or directly editing themes or child themes.

There is a tab “Additional CSS” when customizing your current theme to add plain CSS for your changes.

how to add additional CSS to your blog

Any CSS changes you make will appear instantly in the preview, just like other changes made in the customizer. This means you can tweak the code without changing anything until you are happy with it.

Keep in mind that the CSS changes are tied in with your theme. This means that if you change to a new theme, your custom CSS styles will no longer be active (of course, if you switch back to your previous theme, they will once again be there).

Using a Header Code placement in Advanced Ads

header

Advanced Ads itself comes with a Header Code placement intended to manage ad tags that you need to load in the head section of the page. However, you can also use it to inject custom CSS rules into your site and preserve them through theme updates.

To create such custom code, create an ad of the Plain Text ad type and wrap the CSS rules in <style></style> tags. No other settings for the “ad” are needed.

Now go to Advanced Ads > Placements and create a Header Code placement. Assign the ad there to it, and save the placements to publish it.

For more information, see this tutorial about how to add header and footer scripts with Advanced Ads.

Subscribe to our newsletter and get 2 add-ons for free!

* indicates required

How can I target ads for styling?

CSS is always targeted towards a specific element in the frontend. If you need the ad to have a specific ID or Class parameter, insert them in the appropriate fields in the ad settings or use a placement.

Placements are automatically wrapped with a container that has a class attribute derived from the placement title.

If Advanced Ads Pro is activated, using the custom code feature is even more flexible. See this tutorial to find a detailed description of how to add custom code in CSS and HTML to your ads.

ad layout settings
You can specify IDs, classes or add custom code to your ads

Make it better

Increase your ad management skills without spending more time.
Join over 150,000 publishers and AdOpts increasing their ad revenue.