How can I apply custom CSS to my Blog?

Displaying ads on your site is also always an interference with the layout. You might therefore often have requirements for ad placements that can not be handles automatically with the options in Advaned Ads. In support, we might then suggest to use custom CSS rules. This tutorial explains how you can write those.

This tutorial is no introduction into 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 just add your custom CSS code there.

However, this change might be overridden with the next update of a theme and other developers and users might also not find those changes easily. Child themes are slightly better, as they are not overridden by an update, but still not easy to maintain for unexperienced users.

Using theme options

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

This option can often be found within the theme option panel, which is at a different place depending on your theme. Please refer to the manual or ask the developer of the theme 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 great theme independent solution for this task. There are several plugins in the plugin directory for adding custom CSS.

Using the Customizer

Starting with WordPress 4.7, 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 where you can add plain CSS for your changes.

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 actually 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 change back to your previous theme, they will once again be there).

Using a Header Code placement in Advanced Ads

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

To create such custom code, first 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 too and save the placements to publish it.

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 either in the appropriate fields in the ad settings or use a placement.

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