Hi everyone. Today we want to fix some minor issues and do some minor styles fo our Side Post Ads. Let’s get started!

LET’S REFACTOR

First of all let’s refactor a bit our code as we have seen in our previous post.

CLASS NAMES

We start from our class names, we change them in order to make them more readable: for example:

“.sideAds .hostAds” -> “.sideLabels .supporthostLabel”

jQUERY SELECTOR SPECIFICITY AND CACHING

A second and more important step in refactoring our code is to give a greater specificity to our selectors and to wrap them in more readable and fast variables; doing so we will get a cleaner jQuery code and we also get better (also if minimally) results in terms of loading and executing time: for example:

jQuery(“article.type-post”) -> jQuery(“#et-main-area #main-content #left-area article.type-post”) (Selector Specificity)

and

jQuery(“#et-main-area #main-content #left-area article.type-post”).each(function() { }); -> var post = jQuery(“#et-main-area #main-content #left-area article.type-post”); post.each(function() { });

CSS VARIABLES

Finally we also opt for adding color variables in our css: for example:

.diviAds { border-color: purple; } -> .single-post {–diviColor: rgba(121,0,214,0.95);} .diviAds { border-color: var(–diviColor, purple);}

PROGRESS LABELS

Now that we have refactored our code we want to add a touch of interactivity by making a label progressing in its background color when clicked (and for Elegant Themes by default). Obviuosly we have also to change the text color accordingly to make it readable. So we simply have to add the following Css Code in our Theme Options -> General -> Custom Css:

Then we open Theme Options -> Integration -> “<body>” and we add a little jQuery script:

A TOOLTIP EFFECT

We also add a tooltip effect just above the banner. So we will add a like-tooltip down arrow with color according to the Ad color. Let’s simply add the following Css in Divi Theme Options -> General -> Custom Css:

Then we go to Divi Theme Options -> Integration -> <Bottom of posts> and we modify our jQuery function (that one in which we add labels to the header) in order to add the Css class “arrowed” to our Elegant Themes label element:

ADJUST RESPONSIVITY

From the point of view of responsively we don’t have to do a lot; however we noticed that in very larger screens our banners stretch too much in width. So we simply find in our css code the target ‘.single-post .justImageAds .et_bloom_form_container, .page-id-1277 .justImageAds .et_bloom_form_container‘ and add a ‘max-width‘ property with a fixed ‘200px‘ value. Now our banner will not go further this width!

FINAL CODE AND FINAL THOUGHTS

This will be our final code (we just take the code for adding a single label in addition to the two standard of Elegant and Divi):

There’s a lot but our final result is exactly as we had imagined it. Now the banner shown on the bottom left is indicated in the color of the corresponding label bar and changing it the label bar will have a progressing effect till the background will occupy all the label space.

This Ads system remain pretty simple and couldn’t fit everyone’s needs but i hope it could be useful for someone and give cues to others. See you next post here on Howidivit!

SupportHost

You have Successfully Subscribed!

CodeCanyon Plugins

You have Successfully Subscribed!

Elegant Themes

You have Successfully Subscribed!

Try Divi!

You have Successfully Subscribed!

Divi Plugins

You have Successfully Subscribed!

Advanced Blurbs Plugin

You have Successfully Subscribed!

Bloom!

You have Successfully Subscribed!

Divi Cake Layouts

You have Successfully Subscribed!

Divi Cake Plugins

You have Successfully Subscribed!