Hover like a butterfly….

float-like-a…Sting like a pseudoclass!

So over on one of the Facebook Divi user pages someone asked about how to change one image for another upon hover in Divi. That sounded like a perfect opportunity for a tutorial! Without further ado, let’s learn about the :hover pseudoclass selector.

First up, what are pseudoclass selectors? They are a way that we can look at the state of a DOM element and add styling based on that state. There are a whole bunch of them, and another related set called pseudoclass elements, but we are going to focus on :hover. For the sake of simplicity, in the case of :hover, we tell the browser to “listen” for a mouse-over state on a particular element. If that state occurs we apply specific styling. Once we get a mouse-out event we re-apply the original styling. This allows us to do things like apply an overlay to an image upon hover, or even change the image entirely!

So, How do we accomplish this in Divi? Well, there is a quick and dirty way. This will work, but can bog your page load if you have a ton of them. Basically, you add a code module and enter the following code:

Open your media library and replace the [IMAGE XXX SOURCE] in each of the three places with the link that you can copy there.  

How do we do this if we have more than one set of these on a page? There are multiple ways to accomplish this using either straight CSS or javascript. For this tutorial, I’ll just address using CSS. I’ll save the fun stuff for another tutorial!

To implement this with straight CSS you really need to use images of the same size. Otherwise, you will get a shift in your page when you mouse over the image. You can force the image size by adding height and width parameters, but that has the potential for breaking your flow as you resizeScreenshot 2016-07-26 14.36.37 the page. Add an image module into your row containing your base image. Go into the custom CSS tab of that module and give it a CSS ID. Next, go into your style sheet (or the Divi theme options CSS box) and add the hover rule listed to the right. Change out the ‘CSS-ID’ for the ID you gave your image, and the [IMAGE SOURCE TWO] for the link copied from your media library for the second image. You can do this for as many images as you would like, just remember to give each one a unique CSS-ID.

Oh wow, you can switch a simple image, I’m impressed…not. What if I want a filter in addition? Glad you asked. Once you have your hover CSS rules set-up, you can do a lot of things. Want the picture to blur? Just add this in along with the rest of the CSS rules.

Screenshot 2016-07-26 14.47.29

flippyWant to have a fancy flip rather than just a replacement? Do you mean something like this? Pseudoclasses to the rescue again! In this case, we will apply the rule to the container itself. The first set of rules will set up the transition that we want – in this case, we will give the image a Y-axis rotation at the same time we change it. The second rule will define how quickly and what type of animation we want to use.

 

Screenshot 2016-07-26 16.23.48Again, you will have to insert your CSS ID in place of mine (‘monkey-one’) and the url with a link to your picture. With just a little bit of CSS ‘monkey-business’, you’ll find there is an amazing amount you can do with pseudoclasses. There is a plethora of other transformations out there to play around with on your pages. 

If anything in this tutorial is unclear, or you want something more specific for your design needs, drop me a comment!

Quick Important Update!!: I uploaded the wrong code above previously – you need the img tag selector in there.

Sometimes life is a blur

blurry

We meditate so that we can see the miracles unfolding around us. Without stillness, life is a blur.  

-Russell Simmons 

Namaste – Welcome to another Divi tutorial! I had originally planned on doing a post about using Divi shortcodes, but had problems coming up with a decent short example. So, instead I’m posting a tutorial covering a question/comment I saw on one of the Facebook Divi groups. The poster asked if there was an easy way to have two images that are links where when you hover over one, the other goes blurry and some text pops up. The example that was given is here: http://www.abbeypynford.co.uk/.

Screenshot 2016-07-19 12.15.46
Example when hovering over the left image

Just to state up front, I’m still somewhat new to Divi and the experts out there might have a better quicker way to do this. Feel free to chime in! At first glance, you might think this problem can be solved with some simple custom CSS. Just apply a hover state and ‘Bob is your Uncle.’ The problem is, we want the opposite panel to blur. I decided the best way to accomplish this, as well as adding the appropriate text was to use some jQuery. While I could add this as a script into the Divi theme optimization, I’m electing to add this as a standalone script to my child theme.

Screenshot 2016-07-19 12.26.57You can download this script here. Let’s step through it. Throughout this code I’m using jQuery (instead of ‘$’) for clarity. First, we check that the document is fully loaded and then we set up our ‘listeners’. As you can guess from the name, these are jQuery commands that ‘listen’ for specific changes in the DOM. In this case, they are listening for a mouse hover over either the left or right panel, imaginatively named “#panel-left” and “#panel-right”, respectively. Following the hover listened are two functions. The first is for when you get a mouse enter to start the hover. The second is for the mouse out event. 

Screenshot 2016-07-19 12.12.04So, If you mouse over the left image the jQuery appends a div containing my text, “Design Services”, and positions it to be centered on top of the image. It also adds styling to the opposite panel to make it blurry. Out of habit I used the keyword ‘this” to refer to the panel being hovered over, but you can use the CSS selector instead. Once you have a mouse leave event both the styling and div event are removed. Note that this method will not function well on touch-screen devices. I will address implementing :hover on non-mouse devices in a later tutorial.

So we have three additional steps to get this working. First, on the Divi Builder side you need to add the CSS IDs to each of the images. Remember, you don’t add the preceding ‘#’ into the custom CSS boxes. Next, to get the words to center properly, I added some custom styling to each module and the overall section.
Screenshot 2016-07-19 12.50.23I gave the section a CSS ID of ‘panel-container’, and the modules ‘panel-left-container’ and panel-right-container’. Then I added these CSS rules into my style sheet.

Finally, we need to enqueue our script to get it all working. While you could load it using the Theme Options in Divi, I still prefer hardcoding it into the child theme. I saved my javascript file (‘hovering.js’) in a folder titled ‘js’ in my child folder. Then we just have to add a function and action to our child ‘functions.php’ file.

Screenshot 2016-07-19 13.00.13I’ve gone over this in a previous script, but if you are unclear on what exactly you need to do with this chunk of code, drop me a line! As always, I’m happy to clarify/customize anything I’ve posted here. Please subscribe if you found this helpful. I’ll be posting new tutorials 2-3 times a week as my schedule allows. I’ll send out a short update e-mail about once per month and will NEVER spam your inbox or sell your address. Any ideas/requests for new tutorials are welcome.

Laying Bricks with Masonry.js

Screenshot 2016-07-14 11.44.11Everything looks like a brick when all you have is a trowel and concrete.

-no one, ever

Presenting the final installment of using a masonry layout with the Divi theme from Elegant Themes. Note that this is an affiliate linkout. If you make a purchase through it I will get paid, but it costs you nothing extra. This time we will be building the layout you see above. We will be applying this layout to the categories page using the Masonry.js library, but you could extend this lesson to any page you would like. Using straight CSS to style a masonry layout is great when you have list items. The problem with blog posts is that in straight CSS they get wrapped to the top of the next column (I can think or a workaround for this, can you?). Masonry.js will let us overcome this and using it in your site is as easy as enqueuing a couple of scripts and adding some CSS. Let’s get started.

First up, make sure you are working with a child theme because we are going to be altering the ‘functions.php’ file. In this tutorial I’ll be hosting the library on my site. You could also use the CDN if you need to save space, but if the site hosting the library is down you will lose functionality. The Masonry.js library can be found here. In the right hand corner you will see a link to download the minified library. Save this file to a folder named ‘js’ within you child theme folder. 

Now, open up your ‘function.php’ file in your child folder. We will enqueue two scripts – the masonry.js we just downloaded and a custom script that we will create later. To do this insert the following code:

Screenshot 2016-07-14 11.43.11Now let’s step through. First we create a function with a unique name. I prefixed mine with ‘shd_’ for Spring Hill Design, my web design service. You should always prefix your functions with a unique identifier if they are going to be distributed. The first line in the function uses the ‘wp_enqueue_script’ action. In some ways this is wasteful, since we only need the script in the category page, so it would be better to register the script and then use conditional logic to load it when necessary. However, for the sake of brevity I’ll just load them on every page.

 Following the action I pass in a number of parameters. The first is a unique shortname so that I can address the script later. Next is the location of the script. Since I’m in a child theme I get the path to the directory using, ‘get_stylesheet_directory_uri()’. If we weren’t using a child theme we would use, ‘get_template_directory()’. You never want to hardcode your directory pathway. I then concatenate that to the remainder of the location in the ‘/js’ folder.

The other three parameters are any dependencies, the version, and whether you want the script added to the footer. In addition to the masonry library we also are enqueuing a custom script, which we will name ‘archiveMasonry.js’ and save in the ‘/js’ folder of the child theme. Finally, after finishing the function we actually want to run it using ‘add_action’.

Now let’s open up our custom script. The Masonry.js library uses jQuery to Screenshot 2016-07-14 12.12.08 target specific DOM elements. I’ve chosen to stick with the default selectors for simplicity. THe overall structure is a container with the class of ‘grid’, and then a series of items inside with a class of ‘grid-item’. So, we need to add those to our category posts as they come in. We will accomplish this using jQuery.

Open up your empty ‘archiveMasonry.js’ file in your favorite editor and enter the following code:

Screenshot 2016-07-14 12.14.16Let’s walk through. First, we let jQuery know that we don’t want to fire our commands until the page is all loaded using ‘.ready()’. Next, we make three modifications to the DOM. Using ‘.addClass()’, we add the ‘grid’ class to the container that holds all of the posts. Using ‘.prepend()’ we add an empty div with the class ‘grid-sizer’ immediately before all of the posts. This will be used to make the page responsive and I will explain in it later in the tutorial. Finally, we use ‘.wrap()’ to put every post into a div with the class ‘grid-item’.

Okay, now that we have the DOM prepared, we fire or custom masonry function, ‘masonify()’. This is the jQuery that initializes the masonry.js library. We are passing several options into the library. First, we tell it that our main container has a class of ‘grid’. Next up, we say that we want the columnWidth set by the size of the div with a class of ‘grid-sizer’. Next we set the itemSelector to the class of ‘grid-item’ so it knows what a complete item is to prevent wrap around. Finally, we set percentPosition to ‘true’ to allow for relative sizes during page resizing.

Screenshot 2016-07-14 12.25.20We are in the home stretch!! Lastly, we need to set a size for the columns and add a bit of additional sizing. We will do this in our child theme styling file. The actual CSS to get the page set to three columns is simple. We just select both the ‘grid-sizer’ and ‘grid-item’ classes and add a width to them. In this case I added 33.333% to give three columns. But, you could give a width of 50% for two or 20% for five. It is up to you. I would also add media queries to break this down into single column on smaller devices.

Lastly, just add regular CSS to make your page look good. I added a border, some margin, some padding and a box-shadow. Ihope this was clear. If you need/want any additional explanations please leave a comment or drop me an e-mail. I’d be happy to help you get this implemented on your pages.

Really, another brick?

Screenshot 2016-07-12 14.40.07Oh for God’s sake, he posted another one. Can’t someone tell him to stop?!

-everyone on the Facebook Divi Groups

Welcome to part 2.5 of my tutorial to add a masonry output to the Divi theme without using a plugin. I’m labeling this 2.5 because I originally promised to use the Masonry.js library and got a bit distracted. Instead, I’m going to show you have to add categories to your media library images and use a function, along with CSS to accomplish our layout.

In the last tutorial we had to enter the URL of each image we wanted displayed into HTML markup by hand. Painful!!! To get around this we need a way to identify selected images. You would think that by now WordPress would have Categories and Tags for images, but no. I guess we’ll just have to implement that by ourselves! Okay, first up, make sure that you are using a child theme. Divi updates will break this method. 

Go into your child theme’s functions.php file. If you haven’t made any alterations previously, it should be relatively short. At the bottom add the following code:

Screenshot 2016-07-12 15.43.49

Okay, so what does this do? When you bring images into your media library Wordrpress considers them ‘attachments’. This simply says to allow for taxonomic categorization of all attachments. If you go into your library you will see that you now can assign categories to your uploads. Screenshot 2016-07-12 14.56.41 For the purposes of this tutorial, go ahead and make a new category called ‘masonry’ and assign several photos to the category. Okay, we now have a way of identifying the photos we want displayed. Let’s go back to our ‘functions.php’ file to implement some code to actually pull the file URLs out of the library. We will use two separate functions for this:

Screenshot 2016-07-12 15.44.52

This function performs a query on your media library and fetches all of the attachments with a category of ‘masonry’. I chose to give them a random order to change the page on each reload, but you may want to do this in a different way. With the second function we will actually make a shortcode to allow us to easily dump an HTML formatted list of URLs to a Divi code module.

Screenshot 2016-07-12 15.45.41

Okay, now we have the short code ‘[masonlist]’ that we can take back into the Divi code module. Almost done!!

Loaded up a Code module into the page you want to display your images on. In the code module you are going to put together a little HTML, just as in the last tutorial. Again, for simplicity I’m using exactly the same CSS that I used last time to achieve the masonry effect.

Screenshot 2016-07-12 15.46.22

And that is it. Any pictures from your library that have the category ‘masonry’ should load in and neatly tile. In this case you have fight a little more to change up the order, but if you have a lot of attachments you want to display, that is the price you pay.
As always I would be happy to clarify/extend any part of this. I’ll be back soon with the last installment of this tutorial. In the meantime, drop me an email if there is any other tutorial you would like. I apologize for the code boxes. Me and WordPress are arguing about how to display things! 

Just Another Brick…

Screenshot 2016-07-11 05.49.09Love is like a brick. You can build a house, or you can sink a dead body.

Lady Gaga

So the fine people of Divi nation (more specifically, those who subscribe to the Divi Theme Tutorials Facebook page) have requested a tutorial on how to implement a masonry layout in Divi from Elegant Themes. This tutorial will be split into two parts. In this first part I’ll show how you can easily accomplish this using HTML in the code module and some CSS. In the second part I’ll show you how this can be accomplished using the javascript library Masonry.js

Fair warning before we dig in. While I’ve been working with web design for awhile, I’m relatively new to using Divi, so there could be better alternatives for accomplishing this same output.

Many times you have a gallery of images that you want displayed in equal width columns, but without them getting cut off, or resized in an odd manor – masonry display to the rescue. There are many different ways to accomplish this and the one I’ll be presenting today is probably the most lightweight way to accomplish this effect. However, it does require a bit of work on the part of the designer to display a large amount of images. At the end of this section of the tutorial I’ll talk about how you could potentially speed this process up.

First up, slot a full-width code module into your favorite row. The code to the right is the basic structure we will be using for constructing our masonry content. It has two different, unique IDs that we will target using some custom CSS later. The first ID tags a container  (<div>) for an unordered list. The second creates a selectable tag for the unordered list itself (<ul>). I have presented it here with nice indentation, but I’ve found that I occasionally get odd results with Divi when I don’t collapse the indentation, so when you put it into your code module just end lines with a simple return, and don’t add tabs at the beginning.

Next up, we are going to add in our content. Using this method is a little tedious since you have to insert the media links by hand into the <img> Screen Shot 2016-07-11 at 3.52.33 PMsrc field. To get the URL for each image, navigate to your media library. Click on an image you want to put into the masonry display to pull up the info window. Copy the top line labelled “URL” and then paste it in between the “” of the src field of your list image. Duplicate this process adding new <li>…</li> into your HTML, making sure not to delete the closing </ul> tag at the very end of the whole list. So in the end, here is what my code looked like:

Screenshot 2016-07-11 19.25.25

Okay, now that the HTML section is complete it is time to move onto the CSS portion. It is up to you whether you put it into a child theme style sheet, or the Divi Custom CSS panel. Here we are going to take advantage of a CSS native property called, “column-count.” I should note at this point that while most modern browsers can handle this CSS property, IE only introduced support 

in version 10. First up, we add some styling to the overall container by targeting it with “#masonryContainer” (remember that “#” targets IDs in your HTML, while “.” targets classes). Column-count requires that a width be set. In this case I’m using a percentage. If you prefer, you can set a specific width, but then you will also have to set up media queries to make it responsive. I should also say that you probably want to set up a media query to reduce the number of columns on smaller devices even if you have the width set as a percentage. I also have one other styling inserted that compensates for a bug in the Chrome browser that I will come back to in the next section.

Next comes the magic. We have two different stylings applied to the unordered list we created. The first is “column-count”. This tells the browser to set the width of the incoming list item in order to fit X number of columns in the given width. In this case I set it to 4 columns, but you can feel free to change this to any number that is aesthetically pleasing. To add support all browsers we have to use the “-moz-” prefix for support of Firefox, and the “-webkit-” prefix for support of the Android Chromium browser. All other browser support this styling without prefix. There is a known bug with Chrome calculation of column width that can be (mostly) overcome by setting the perspective of the container to 1.

The next important styling is column-gap, which does exactly what you think it would, sets a gap between adjacent images. Again, you can adjust this till it is visually pleasing. Finally, I’ve also set the “list-style” to none so that the bullets don’t show up at the beginning of each row.

Lastly, I put some styling onto each of the list items to get them to stack a little more nicely. You can alter this to your taste. You could also add a border with border-radius to round the corners, or alter the styling to make the display a little more visually interesting. Another aspect to using this method is image ordered. Your HTML will load them in starting with the first list item, putting the second list item below the first until the height of the next list item would excede the overall max column height. It then places the next image in the list at the top of the next column next to the very first list item. Sometimes rearranging the order you put them into the list can create a more harmonious grid.

If anything isn’t clear, please drop me a comment or e-mail. I’m more than willing to re-write this or extend it to help someone out. Stayed tuned for the second half of this tutorial which will use javascript to accomplish the same thing.

Note: Many of the links on my site are affiliate links that pay me a commission if you buy something after you click through. This is at no cost to you, but helps me out. Thanks.

 

No Emoji is strong enough!

vomit

I swear to God I can smell that with my eyes, that is not right, that is how bad your cooking smells.

Namaste! Just a short post because the retching is interrupting my typing.

We were up and down all last night with Mali feeling a lot of pain from surgery and needing comforting. Somewhere around 2:00am Gracie decided to take advantage of this by going outside for some nosing about. I was waiting by the door and suddenly got a really pungent waft of musk. Skunk! I called to Gracie fearing the worst. A few seconds later she cam trittle-trottling in smelling as fresh as a vizsla can. (BTW – vizsla actually smell really good, not kidding.) I wiped my forehead with the relief of dodging the “middle-of-the-night-dog-bathing” bullet.

With Mali recovering from surgery and Gracie is afraid that she’ll be left alone again if she leaves her side, I had to venture forth to the barn for chores by myself this morning. As I approached the corral I got a wiff of the most gut-wrenching odor. It got steadily stronger as I approached, reaching the level of burning eyes by the time I got up close to the boys. I quickly gave each of them their grain and started searching about for the source.

Luckily (?) it didn’t take me long. Along one side of the corral, the fierce donkey defender Bo had completely stomped a skunk to death. Intestines here, head there, one paw here, and another there. Such carnage has not been seen since the last “Friday the 13th” I saw way back in 1980. And the donkey, smelling like the back-end of a pig with an intestinal disease, had a gleam of pride in his eye as he finished his breakfast and trotted off into the now-skunk-free meadow.

Metta

No break for the wicked…

Mali's tumorNamaste! Well, we took the dogs in for their yearly. I had noticed what I thought was a bug bite on Mali’s side and decide to ask the vet about it. She took a look and decided to do a quick needle aspirate on it. A few minutes later she came back with the news that it was a Mast cell tumor. She sent us home with a script for prednisone and a date for surgery.

Our tummies were all fluttery, but we took solace in the fact that we caught this early and it is a fairly treatable cancer. We started Mali on the drug right away. Within two days it had shrunk to almost non-existence! Hoorah!

As anyone who has ever gotten short term prednisone knows, there is a taper period where you decrease the dose. We were two days into the dose reduction when it started coming back, seemingly more aggressively than before. We got in contact with the vet and she had us change the dose back for the higher amount. After several days of it not reducing the tumor size we moved the surgery date up.

MaliIncisionThe surgical treatment of mast cell tumors is fairly straightforward – scorched earth. Cut out as much surrounding tissue as possible to get nice clear, cancer-free margins. So, this is what we got from a tumor that was about the width of my finger!

The pathology report came back and said the the bottom margin, toward the rib cage, has a really small margin, but the rest look clear. We can only hope that there isn’t a recurrance. 

Getting her home post-surgery and staying up to comfort her was a whole other story that I think I will save for another time. This whole experience has reinforced the idea that we have to remember that although they may not understand sometimes, our fur babies look to us for comfort when they are in pain.

Metta.

Bloom Plugin for Divi and a Tale of Selectors

Screenshot 2016-07-04 09.54.13

Today’s tutorial will be a little long-winded to give a simple intro to Parent:Child relationships and selectors. While it is written with Divi as an example, it applies generally to CSS on all types of pages.

I’ve been spending a bit of time on Facebook lately looking through various groups dedicated to web design. I’m trying to learn more about what is giving people difficulties and learning about problems I might run into in the future (beware developing a page locally on a different version of php than the final host, you are in for a world of hurt!

When I can I try to throw in my meager knowledge to answer a question or solve a problem. Today a person was asking a question about the Bloom e-mail optin plugin in from elegant themes for their Divi builder (remember I’m an affiliate, doesn’t cost you anything, but makes me a Screenshot 2016-07-04 10.06.44little cash). Basically, the person wanted to be able to click a button and have the opt-in pop up. Luckily, the plug-in has an option for that!

Once you have the Bloom plugin installed you need to make a new “OPTIN”. To do this you go to your dashboard and click on the Bloom config on the left side. That will bring up your active optins screen.  From there you click on the “NEW OPTIN” button on the upper right. Next, you have to walk through three different configuration screens that set the campaign’s name, what mailer you are going to use, and the overall design. Once those are locked in it is time to set-up when or under what conditions you want the opt-in to appear.

Screenshot 2016-07-04 10.11.54

As you can see, there are a number of options. In this case I have “Trigger On Click” checked. You can also have multiple triggers – like a time delay and a trigger when clicked. A word of warning, the “Display Once Per Session” doesn’t seem to apply to all the triggers, so if you select time delay and click to trigger, the user will see your optin more than once.

Okay, back to the main tutorial. Once you check the “Trigger On Click” option you will see another box appear below it that says “CSS Selector (string)”. Here is where you will define what object/s in your DOM can cause the optin to appear. One important thing to think about here is how specific you want to be and how to make sure that the click item is unique. The best way to do this is to give either the item (or its parent in the DOM) a unique ID. So what is this whole parent:child thing?

Screenshot 2016-07-04 10.25.04

Here is just some example HTML that defines a short “About Us” page along with our subscribe button for the optin. Hopefully you can build something like this easily with Divi using whatever modules you would like. We will get back to the Divi specifics shortly and where you can run into “trouble”. In the most straight-forward implementation, you could simply add an id to the button.

Screenshot 2016-07-04 10.30.57

Then, within you Bloom CSS Selector you would add “#sub_clicker” without the quotes. This basically says to look for an item on the page with an ID (#) of sub_clicker. Note: Class and ID names are case sensitive – I usually use camel case for my Class and ID names, but here it seemed clearer to use underscores. In this case, I only want one button on my whole site to allow people to subscribe, so I used an ID. If I have multiple buttons I would use a Class name.

Screenshot 2016-07-04 10.36.31

Then I would modify my CSS Selector to “.sub_clicker”. So, hash (#) for ID and dot (.) for Class. “But,”, you yell, “I’m using a module in Divi that doesn’t let me give Class/ID names to individual buttons!” Here is where the parent child thing comes into play. Any element up the DOM tree is going to be a parent to those lower on the tree. So, in the original code the “.main-body” is going to be the parent to both the “.about-us” div and the button. The “.about-us” div will be the parent of the button. So, say we can use Divi to only add a custom ID to the parent. The example that came up today was the full-width header module. It allows for two buttons, and while you can add custom CSS styling to each, there isn’t a way (that I know about) to add a Class or ID to those buttons within the module. However, you can add a custom Class/ID to the main module. This ends up generating the following code.

Screenshot 2016-07-04 10.51.03

As you (hopefully) can see, I added an ID of “clicker” to the section. If I didn’t have other pages with buttons I could simply add “.et_pb_button_one” to my CSS selector line in Bloom. However if I do have other pages with buttons, this will quickly hijack their functionality. But, with the “clicker” ID set on the section we can take advantage of the parent:child relationship and set our CSS Selector to “#clicker .et_pb_button_one” to target only this button in this section. Note the space between the two selectors, this can be important! This same approach can be used with tags, as well. If we wanted both of the buttons to be optin triggers we could use “#clicker a”, since they both have <a> tags. We could even have our text be the trigger with “#clicker h1”!

I hoped this helps someone out. Let me know in the comments if there is something you need clarified. Feel free to send me a message if there is some other HTML, CSS, Javascript, or Divi tutorial you would like.