So I went searching the deep dark corners of the internet for a slanted DIV overlay, and I found this awesome article. Nils explains it in a much cooler way than me, and has awesome graphics to match, so I won’t go into detail here. Regardless I am sharing the code I used to implement this on a WordPress site and you are welcome to cut and paste it into your next project.

Step 1.

First I cloned Nils pen on Codepen, and added the code from the article. Now with the code he provided, as soon as I dumped it into WordPress it did not display the same. I had to modify it heavily to get the look I wanted. Mostly because he was using the transform:skewY property, and for this project I need to use transform:skewX. That and I needed multiple media queries to work with WordPress. I started with the overlay, and then made some design decisions on how wide I wanted it to be. It had to be wide enough to cover roughly half the image, and comfortable display the text inside it, but not so wide that it don’t go all the way to the edge of the screen.

Step 2.

Then I added my text into the heading tags, and added a default margin for a wide screen. Because we are using the transform:skewX() property, everything inside the DIV is going to skew including the text. We don’t want this. Here’s an example of the ugliness that skewed text is, check out this H2 element:

Step 3.

I added the transform:skewX() property to each heading element. Since the overlay has a property of transform:skew(200.25deg), we have to apply transform: skewX(-20deg) to each heading element to ensure the headings are upright.

Step 4.

I started working on the media queries to make the page look responsive on all devices. This was a tad painful, as I had to keep tweaking the elements and overlay to get the right balance, but I got there. Now mind you if you view the Codepen, and it doesn’t look right on devices- this code has been used on a live wordpress site, so the responsive widths work on WordPress but they will not work on Codepen. Click here to view the source code.

Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post Creating a slanted div overlay with pure CSS appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

In theory, you would upload your logo to your header image, and Genesis would call in both the Title title AND the header image and display both. Except in Genesis it doesn’t.

I searched far and wide for a solution, and couldn’t find one so after some time playing around with my dev tools, I came up with a workable solution and that is using a pseudo element in CSS.

A Pseudo element is used to style specified parts off an element, eg. Before, first-line, first-child and so on.

Using pseudo elements in CSS allows us to further customise our Genesis theme without having to copy markup in the parent theme files, altering it, and adding a copy of that file to our child theme.

The specific pseudo element that I used to add my logo to my site title in Genesis, was the ::before selector. I targeted my .site-title a element, and added a ::before pseudo class to add an image above my site title.

You can see the result at the top of my page, and you can copy the markup on Github. Whilst I could have only shared the site-title a with the pseudo element, I added all my site-title CSS in as well in case it is different from yours, depending on which theme you are using.

I hope this solution works for you, and please leave a comment and let me know if you need any help.

Jane James is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post Add a logo on top of your site title in Genesis appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.