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:

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.

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!!

Forms a-poppin’!

Modal pop-up form.
Modal pop-up form.

Namaste!

Today I’m going to show you a quick, bare-bones way to add a modal pop-over form to your Divi-powered site. This will allow you to grab user information without navigating away from the current page. In this case, the pop-over triggers when the user clicks a custom button. This tutorial will leave a lot of the CSS styling up to you, but if you run into any trouble, feel free to reach out for help!

My approach for this is to use several Code modules – one containing the form, one containing the javascript to show and hide the form, and a final Code module for the trigger button. I’ll explain later why I can’t use the Divi Button module.

So, the first step is to scroll to the very bottom of your page in the Divi Builder and add a new section.  Go to the settings for the section and within the Custom CSS tab, add an ID of “hiddenCode” (don’t add the quotes). This will allow us to make sure these sections don’t show up on our page. Within that section add two full-width Code modules. 

In the first, we will put our form. In this case, I’m going to use a form from the Huge-It plugin. You can feel free to construct your own with HTML, or use any other form plugin (like Caldera or Gravity forms) that generates a shortcode. In my case I’m just going to paste the shortcode into the code module, wrapped in several divs to give us control of the visibility.

There are two outer wrappers with IDs “formWrapper” and “theForm”. We can also use these for styling. Next we have the form shortcode, followed by an img tag. This image is what the user will click to close the window and you’ll have to add a link to your own here. As you can see, I added an “onclick” event. This references a javascript function that will be run when a user clicks the image.

In the second, we will put our Javascript, including the one referenced in our “onclick” above: 

There are two javascript functions that elements on our page can now access. The first will target our outer form wrapper to display when our button is clicked, while the second will rehide it when our close image is clicked. If you are already loading custom javascript onto your page, you could also include this code there instead.

Next, the button. Navigate to the section where you want the button to appear and put in a code module. The add you HTML markup for the button, making sure to add an “onclick” event.

I think mine looks pretty good! Last part is to add in our CSS.

Starting at the top. First we target our section containing our two new code module. We don’t want this showing up on our page, so we set the height to 0px. We can’t hide it because we want our form to show up later.

Next, we set the outer formWrapper to completely cover the existing page with a dark grey background, you can experiment with how much opacity you want. Here we also set it to initially be hidden using “display:none;”. We also use z-index to overlay it on top of all our other page elements – if you have used this elsewhere you might need to readjust this number.

The next item to style is the form itself. Depending on the size of the form and what headers or other elements you have on the page you will have to alter these numbers. You might also want to add some padding. I added padding to mine by targeting one of the form elements (“#hugeit_contact_wrapper_1”). You will have to determine what is best in your situation.

The “#close” targets the image we are using to close the pop-over, in my case a red X in a circle that I positioned at the upper-right of the form. Again, you can fool around with size and position to get it how you would like. Finally, we add rockin’ style to the button. Nothing says looking good like lemon yellow!

Hope this helps somebody out. If you have any questions, leave a comment or shoot me an e-mail!

Metta!

Gardening season 2017 on Spring Hill Farm has finally started!

I started vegetable gardening in 2004 when we moved to Spring HIll Farm and every year I am expanding my garden as well as the variety of vegetables I grow. Now, I wished I had kept better records early on, but it is never too late to start! 

In the beginning I used mostly the 6- or 9-cell seed starting plastic pots, but cleaning them up for restarting seeds was difficult as they tend to break. I used to recycle all my yoghurt and sour cream containers, but now I am using them for seed starting – all you need to do is drill a couple of holes into the bottom for proper drainage and you have a sturdy pot. I usually start 6-10 seeds in the pot and then transplant after they develop their first true leaves into individual pots. It  may seem more laborious, but that way I am  not wasting space when not all seeds germinate and I end up with individual cells/pots had need to be tossed out.

So this year, I am growing artichokes (Green Globe) for the first time. My garden is in zone 6 and it is too cold for artichokes to over-winter. So I have to trick them- since they are biannual vegetables which means they will flower the second year – to think this is the second year. After germination I will transfer them outside when it is still cold, but not freezing. We will see if this experiment will work out! Since the seeds are fairly big, I seed two seeds per pot (use seed starting mix only!!) and use a pencil to push them 1/4 inch deep into the soil, add a little soil to top off and then use a spray bottle (I reuse an old, rinsed Febreze pump sprayer) to wet the top layer without disturbing the seeds. Once the top of the soil is hydrated, I carefully water them until water comes out the drainage holes. I still let them sit in a tub with 1/2 inch water to help moisten the soil – seed starting mix is dry like powder and and seeds will not germinate if they are in dry soil. I highly recommend a seedling heating mat as this speeds up germination like a dream. I usually put a layer of insulating styrofoam underneath the heat mat. The temperature sensor is inserted into your seed pot and set to the desired temperature depending on the vegetable variety – I use 82 F for most of my seeds.  

Besides the 8 artichoke seeds that I started today, I also started my eggplants – my standard “Diamond” and  two new varieties :

      “Lao Purple Stripe”            and            “Udumalapet” just for fun.

 

 

 

 

 

EU Checkbox Instructions

Namaste!

In this post, I want to give you a quick intro to my EU contact form plugin, which allows you to add a checkbox to the Divi contact module. This is important for sites in Europe where people submitting their personal data need to confirm that they have read your site’s policies on data sharing. My plugin will add a new module to your Divi toolbox.

The plugin is installed normally through the backend plugin manager. Once installed you can select the module for insertion into a section like you would any other Divi module. Once placed into your page, the module will largely resemble the native Divi contact for module, with one difference – there is an additional field type called a checkbox. So, as with any other form, you can add fields for Name, Email address, Message, and then your checkbox field.

Within the new field you select “Checkbox” for input type and fill the rest of the fields as you would like. Near the bottom of the field settings is a tinyMCE box. This is where you add the message you want to appear next to your check box. You can add full HTML markup into this box, allowing the addition of links to your TOS pages. It is important to note here, none of the settings on the “Advanced Design Settings” tab will impact the text you enter here. This is a limitation of Divi I wasn’t able to overcome. Any styling in the tinyMCE box however, will be carried to your final page. So for example, in the screen shot above, I’m adding emphasis to the initial word and linking the TOS to my site policy page. 

One additional way to add styling to the label field in by giving it a unique class or ID through the “Custom CSS” tab of the field settings. While this module still requires some tweaking on the part of the designer, it allows for the quick introduction of a checkbox without having to onboard a large form plugin like Gravity forms or Caldera.

Click to get the plugin!

Metta!!