Starry, Starry Night

Namaste!

This tutorial is somewhat specialized. Over on Facebook, someone asked how to implement a specific Codepen in Divi. The overall tutorial is pretty specific to this Codepen, but is useful if you want to learn a little jQuery and more about the power of keyframes, so let’s get started!  

So, here is a link to the original Codepen. Basically, it displays stars scrolling up the page in the background. Here is a link to what we will be building in Divi. Starting with the Codepen page, we have two different panels to replicate. The first is the HTML for displaying everything. Looks a little strange, doesn’t it?!? None of the usual <div> or <span>. That is because we are in a notational form of HTML called Haml – notice at the top next to HTML? In this case, ‘#stars’ is shorthand for, ‘<div id=”stars”></div>’, pretty neat! Okay, to move this over to Divi we need to translate part of it. We won’t be taking

Okay, to move this over to Divi we need to translate part of it. We won’t be taking the title, so it is just the first three <div> that we need, so I think we will just re-type it in Divi (plus I want to change it). If you are translating another Codepen with more substantial HTML written in Haml, click the down caret to the right of the HTML header and then select ‘View compiled HTML’ from the dropdown menu. You can then copy and paste over to Divi.

So moving over to Divi, we will make a new post or page and add a standard width code module. Opening it up we will add in the following:

<div class="stars"></div>
<div class="stars2"></div>
<div class="stars3"></div>

So, we are recreating those three divs from the Codepen, but giving them class names rather than IDs. This is because in certain circumstances we need to re-use this code and it isn’t a good idea to re-use IDs.

Okay, now moving on to the CSS. This part is a little more daunting.  Once again, things might not look like you expect for your normal CSS. In this case, it is because two powerful, pre-processors are being used. The first is called Sass, and the second is Compass, which is a Sass framework add-on. As with the HTML, we can click the down caret to the right and view the compiled CSS, but what is this actually saying. On line 5 we are defining a function called ‘multiple-box-shadow’  that accepts one variable, ‘$n’. This function then generates a random X, Y pixel location ranging from 1-2000 in a loop that is essentially re-iterated $n times (actually $n-1 since it starts at 2) and assigns it a color of ‘#FFF’ (white). After this function, three additional variables are defined: ‘$shadows-small’, ‘$shadows-medium’, and ‘$shadows-big’. In each case, the function is called but a different number is passed in for ‘$n’. In the case of ‘$shadows-small’, a value of 700 is passed in. This tells our function to generate 700 locations in a grid that is 2000px by 2000px. For  ‘$shadows-medium’, only 200, and 100 for ‘$shadows-big’.  Okay, what is now done with those variables. Let’s drop down and look at the CSS for the first ID, ‘#stars’.

We can see that the variable is being used in two places. In the CSS for the main <div> and in the CSS for the :after pseudo-element. In both cases they are being attached to the box-shadow style. This means that once comiled, the list of 700 different pixel locations will be used to generate 700 box-shadows with just a few lines of CSS! One other important bit of CSS to look at here, and that is the ‘animation:’. If you went through some of my previous tutorials, you know that this states that we want to alter the contents of the #stars <div> by the keyframes named ‘animstar’. Further, we want those frames of animation to happen over 50 seconds, we want them to occur in a linear fashion, and to loop forever. There is more CSS to pull apart here, but I’ll leave that for another time. Let’s get implementing this in Divi!

As I said above, we will be using classes instead of IDs for each of the star fields, so go through the uncompiled CSS and change the ‘#’ into a period – there should be three instances. Clicking on the ‘View Compiled CSS’ drop-down item generates a huuuge list of CSS.  Copy it all. We will be editing out the styling for the title, but we need the keyframes at the end. This CSS should now be pasted into your child style sheet. This is a large amount of CSS – it could be put into a code block, or into a number of other areas of the Divi theme, but I can’t really recommend this. For testing purposes I put it into a code block and it REALLY slowed loading time.

Go into the CSS and comment out the HTML portion, we will have to edit this after we get the page ID. Scroll down to the bottom and delete the ‘#title’ and ‘#title span’ sections. Back on your Divi page, add in whatever element you want on the page. In my case, I added in a fullwidth header and a set of blurb boxes. At this point if you preview your page you will see a white background without stars. We need to get rid of the background on the page. In order to accomplish this, we will need to use a bit of jQuery. Add in another code module at the very top of your page and enter in the following code: 

<script>
jQuery(document).ready(function($) {
$('article').css('background', '#000');
});
</script>

What does this do? On the second line it tells jQuery to wait until the DOM has loaded before firing our instruction – plus it adds in support for using a ‘$’ instead of typing out jQuery. On the next line we tell jQuery to select the ‘article’ element of the DOM. This is basically everything on the page within the ‘#main-content’ <div>. Then the styling of the background of the section is set to ‘#000’ (black) using the css() function. Remember, all of our ‘stars’ are white pixels, so they need a black background to show up. At this point, if we preview the page we might see some areas of stars and some that are still white. This is because Divi “loves” to set section background colors to white. To address this we will use a little more CSS.

To make sure we are only impacting this page, we will publish the page and then use our inspect tool to get the article ID. This ID is located on the page just after the ‘#main-content’ <div> within the ‘#page-container’ (highlighted in blue). In this case it is ‘post-1068’. In our CSS we will not target all of the sections on this page and give them a background-color of transparent. 

#post-1068 .entry-content > .et_pb_section {
	background-color: transparent;
}

So we are using the ‘#post-1068’ to target just this page, then all <div> with the class ‘et_pb_section’ that are children of the <div> with the class ‘entry-content’. Basically, ‘entry-content’ is the top <div> on the page, so any section added to the page will be targeted by this selector.

Almost done. We have to add just a touch more styling. Again, we will use the article ID to make it specific for the page.

#post-1068 #et-main-area {
	overflow: hidden;
}
#post-1068 #main-footer {
	background: #000;
}

The first styling prevents the star fields from extending beyond the bottom of the page. The second is more specific to my page – if I don’t add this I can see the stars though my footer. You will likely have to play with this styling, as well as the styling of your header to make everything look good. You will also have to add in styling to remove certian margind and padding throughout as appropriate. Unfortunately, this depends on how your pages are set-up and it isn’t generic.

Finally, I mentioned above that I changed the star fields from using IDs to using classes. This is because if you have a long page you will need to add an extra code block (or two) with the divs further down your page as the star fields run out after 4000 pixels. Add in as many as you need throughout your page.

That is it! A lot of steps, but a neat effect. If you need more styling help, reach out by comment, e-mail or Facebook. I’ll likely need a link to the page to help. Hope this hels people to implement not only this Codepen, but the multitude of other cool ones that are out there!

Metta!