All the pretty colors…

Namaste!

Just a quick post today to show you all my latest free plugin. I use the code module to put additional HTML into my Divi pages. I use it less often, but occasionally to put in a block of inline style or a script. Overall, using the code module is not a generally pleasant experience after coming out of a full-fledged IDE, like Sublime Text (donateware) or Brackets (freeware). But, having to do some coding in one of these programs and then cut-and-paste over into Divi can break your flow. I’ll let you in on a secret, both of these great products are built around a great library called CodeMirror. So I said to myself, “Bo, why can’t us Divi lovers have that?” The answer is that now we can.

Before I show you a quick demo, the caveats. This is a beta release. I’ve tested it on several development sites, both clean installs and in the presence of other plugins. No problems, but your mileage might vary. One problem it was having that I hopefully have solved is a timeout problem on first install. If your codebox still looks the same, back out of the post and try again. Also, not all of the features I would like are incorporated, yet. I want to add additional settings for custom key bindings, as well as some improvements to linting. One Divi quirk is the fact we are doing everything inline, so you have to add script and style tags. How I have linting set up right now chokes on this. So, I recommend you leave these off until you are done and have error checked your code. A pain I know! With that, onto the quick demo.

I’m going to use one of Andy Tran’s recent blog postings to show you the new module. In this case, he is using his really cool codepen generator to make a pop-up modal in codepen and integrate it into Divi. I will be freely stealing his code just to show you how the module works. I encourage you to read through his tutorial. 

First up, install my free new plugin you have downloaded from here, it is at the bottom of the page. There are an instruction file and the plugin file in the archive you download, so save it someplace and unpack it. Then go to your plugin manager on the Admin dashboard and install the zipped plugin file. Once it is successfully activated, I recommend you go to the “Settings” menu and select a theme. In a future version I will have examples of each theme to make selection easy.

So, after you have the new modules installed, open up a fresh Divi page and add three extended code modules (blue background compared to normal grey of Divi). They can be standard or full-width,
 doesn’t matter. In the first, we will copy and paste Andy’s HTML (see picture at the top of the post). Make sure to have HTML selected for the language.

In the next module, we will select CSS and paste in the styling from his article (Note: I wasn’t able to directly copy from the article. I had to go to his modal codepen, use the pulldown next to CSS and select “View Compiled CSS”, select all of the code, and paste it in. We see something interesting here! On the left side, there is a yellow triangle. If we hover over that triangle, we will see it says, “Rule doesn’t have all of its properties in alphabetical order.” This is a warning, not an error – feel free to ignore! Further down there is another triangle with a plus inside. This means that there are several warnings about this line. Additional linting indicators are a red octagon with an “X” and the same symbol with a plus added. These indicator single or multiple errors, respectively. Finally, before saving this you need to put a <style> at the beginning and </style> at the end. Sometimes these tags confuse the linting, so I leave them off until the end.

Last module, Javascript! The picture to the right contains some code from the CodeMirror linting demo, not Andy’s code, to demonstrate what code with errors looks like. Open it up, select javascript as the language and post in Andy’s code. In this case, we have to wrap the code with both <script></script> tags, but also come code to tell the code when to fire. After the opening script tag add,  “jQuery(document).ready(function(){“. You can choose to place a “$” in the function parentheses if you get tired of typing out jQuery in the subsequent code, but since we are copying from Andy, we don’t have to bother. Before the closing script tag put “})” to close out your function. 

That should be it. When you preview the page you should get a button that on click opens a modal window. If the modal is already open, it is a problem with the CSS. That is what happened to me when I copied the CSS directly from the blog post instead of the codepen. Anyway, this module is about options. We can debate whether it is good practice to put in a large amount of inline styling or a script into a page, rather than in seperate sheets, but we have a slightly better code module now. Going forward, I want to see the response I get to this module. If enough people want me to, I will try to expand it, more as a coding exercise than anything else. I hope this benefits at least a few of you out there in the Divi Community!

Metta!!