That Third Tab

Namaste!

   I asked for tutorial ideas on the Facebook group and a person asked me to show a little more of what can be done with the “Custom CSS” tab that you see in the Divi Modules / Sections / Rows. This allows you to style your page in a number of ways. In this short tutorial, I will show you the power of this tab!

I’m going to start out by saying that my eye for style is on par with a color-blind third grader. Bear with me and pay attention to the Divi details and not my styling!

As an example, I threw together a quick three section page about the plight of the elephant (full page here). Pretty simple – full-width image at the top, four blurbs in the middle, and a section with a link-out button at the bottom. Pretty pictures, but everything is a little blocky and compartmentalized.  So, let’s break it up and make it a little (did I point out how bad my design skills are?) more visually pleasing (full page here). I’m not going to go too crazy because the point is to show you about that “third” tab. 

First up, let’s use that third tab to directly change that. In this case, I’m just going to use some simple CSS right inside the Section Module Settings for the second section to give it a diagonal slant. To do this, click on the three lines at the top left corner on the dark blue section. This will pop up your setting and ironically, this time the “Custom CSS” is the second tab. Within that tab there are five powerful boxes for adding custom styling. 

First up are the “CSS ID” and “CSS Class” boxes. We will come back to these in a moment. Basically, they let you add designations that can then be targeted in your child style sheet (you are using a child theme, right!?!). The next three boxes all add styling to your main element, either adding on a “::before” or “::after” pseudoelement. Those are a little beyond the scope of this tutorial, but I’ve wrote about the hover pseudoclass before (see here). In this case, I’m going add styling directly into the main element box. When you hover over the box, you can see that some words in orange animate in next to Main Element. This is the class that it will be targeting in your HTML mark-up. I hear you shouting, “Whoa, whoa, whoa!! What do you mean!”

In this case, the words that pop-up are “.et_pb_section_1”. If we look at the page with our browser inspect tools we see the following:

When you hover over that you can see the section with the blurbs light up. So basically, all of the blurbs are wrapped within this <div> with one of its class names being”et_pb_section_1″ – in this case the second name. Order doesn’t matter. If we were writting this styling inside our child theme style sheet we could do so by writing:

.et_pb_section_1 { css we put into the Main Element Box }

Notice that the class name in the HTML does not have a period, while in our style sheet it does. That period before our designator tells the browser to look for a class name. 

Okay, now we have a neat diagonal slat to our section and we have learned one way to use the “Custom CSS Tab”. The big limitation here comes from the fact that we can only target what the coders at Elegant Themes have decided we need to target. What if we want to go farther. An example of this comes when we want to move each of the blurbs up to match the diagonal. In this case, I’m going to add this styling in the third tab of the “Row Module Settings” and I’m going to use a style sheet rather than the on-page CSS boxes to show you how powerful this can be.

Open up the “Row Module Settings” by clicking on the three lines in the upper left of the blurbs row (teal color). Now you are going to have a set of ID and Class boxes for the row at the top, but also for each column within the row. Since I want to style all of the blurbs the same, I’m going to give each column the same class name. You can’t see the box for column 4, but it is there! Now I can go to my stylesheet and add some CSS.

.narrow { 
width: 24%; transform: skewY(-5deg); margin-top: -100px; padding: 0 2.5%; 
}

Looking at our page nothing changed!! This is because the default Divi styling has precedent over our add in style. This is a problem I often hear in the Facebook group. Sometimes people will give the advice, just add “!important” after your rule. While this will force your browser to add this styling, too many !important rules are generally bad practice and can cause some odd behavior. To understand what we should do, we need to discuss how style order is determined. In partThird tab to the rescue! Sometimes

In part, the order of your rules plays a role. However, even if your rule loads last (the casscading part of CSS says that all other things being equal, the last one loaded wins), it may not have as much weight as a rule already in place. What does this mean. I give you a graphic pirated from the great site, css-tricks.

So, what does this info-graphic mean? Basically, your browser has a powerful calculator that decides what to show by “adding” up the values found in your style sheet. This isn’t a perfect way of stating it, but should let you get the idea. If you use “.narrow” to identify the item you want to style, that rule will have a weight of “0010”. If another rule targets “.et_pb_gutters3 .et_pb_column_1_4” it will have a weight of “0020” and will be selected by the browser.

Third tab to the rescue! In this case we need to get a higher weight than “0020”. To do this we are going to add an ID to the row – “blurbs” – to get a weight of “0110” which is heavier.

Now, we can go back to our stylesheet and target “#blurbs .narrow” (# = ID) in order to get our rule to win! But wait, why didn’t we just give each column an ID? Remember, every ID should be unique on a page. If we needed to give even more weight, we could use something like “#blurbs> div.narrow”, which would have a weight of “0111”. 

Hopefully, this clears up the use of the “Custom CSS” tab. You can either add styling into the pre-formed boxes, or add ID and Class names to be targeted in your child style sheet. A final question I can hear many of you asking is, which should I use? The answer to that is a little complicated. It is convenient to add styling into the third tab, but it might not target exactly what you need. Additionally, the real pain comes when you have multiple pages, all with styling in the third tab of multiple modules, when your client suddenly asks for all the sections you styled “robin blue” to be “sky blue”! If you use a style sheet you can change it in one place, With the styling being tucked away in the third tab, you are looking at a weekend of playing find the code!!

Since this tutorial is more about the uses of the third tab, I’m not going to go into the rest of the styling changes I made. As a side note, the 96Elephants page is a genuine charity group helping out African elephants. I encourage you to visit their pages. I hope this helps a few people out. As usual, if you have any questions, need clarification, or help on your latest project, feel free to reach out in the comments or on Facebook in the Divi Theme Tutorials group.

Metta!!