Last week in part one of our series, we learned how to integrate Editus within Genesis. In this second part of our two part tutorial series, we’ll dive into how to modify the CSS in Genesis to utilize those beautiful full-width components within Aesop Story Engine.
Install Aesop Story Engine
The first step is easy, get Aesop Story Engine installed. This can be done within your WordPress admin area, just head to the plugins menu, add new, and search for Aesop Story Engine in the WordPress plugin repo.
After you get it installed, we need to add a theme_supports tag so that it will load additional styles for the components. Of course, if you’re the super duper dev that we know you are, you might want to override all the styles and load them yourself. But for now, we’re going to go ahead and load up some extended styles with a simple code snippet.
This is really all that’s needed to get Aesop Story Engine functioning correctly. Next, we’re going to do next is “break” the central column of Genesis, so that the components can be set full-width.
Ever since we first created Aesop Story Engine, our mantra has always been “Content First”. Content precedes design. Without content, you have nothing. So we start with the content, and build out from there. When it comes to posts and pages, we’re talking about the text itself.
[aesop_image lightbox=”off” captionposition=”left” caption=”This illustration depicts setting the width on the paragraph itself, instead of a central column.” align=”center” imgwidth=”600px” img=”https://edituswp.com/wp-content/uploads/2015/04/content-first-ss-3.png”]
Most themes set a width on a central column. This is normal, but it won’t work for full-bleed components. So what we’re going to do is set the width on the text itself, instead of a central column. This is indeed a drastic departure from normal, and there are other ways of approaching this, but for now, this is the cleanest of them all.
As you’ll see below this is important for Genesis, as by default it has a central column, and the width of the images will not be edge-to-edge.
[aesop_image lightbox=”off” captionposition=”left” caption=”By default the components in Aesop Story Engine won’t be full width without modifying the CSS.” align=”center” imgwidth=”800px” img=”https://edituswp.com/wp-content/uploads/2015/04/genesis-pt-1.png”]
It’s worth noting that WordPress gives us some body classes to work with, so that we can only restrict this to a single post. We won’t be showing that in this tutorial, but all you have to so is apply .aesop-on-genesis.single. Armed with this information, let’s dive in and write some CSS!
We’re going to be using the very handy :not CSS selector, which has pretty good browser support. We’re going to use this and set the width on everything within a post except Aesop components . All Aesop components have an .aesop-component class, so singling these out within a post or page is pretty simple.
[aesop_image lightbox=”off” captionposition=”left” caption=”The CSS that we need to apply to Genesis can either go into it’s settings, or into a child theme.” align=”center” imgwidth=”800px” img=”https://edituswp.com/wp-content/uploads/2015/04/genesis-aesop-settings.png”]
This CSS can go into a child theme, or it can be inserted as a style tag within Genesis settings. For the sake of this tutorial, that’s how we’ll be applying our CSS. The image above shows what this would look like when put inside of Genesis. Also, don’t forget to change the Genesis layout to full-width.
[aesop_image lightbox=”off” captionposition=”left” caption=”After modifying the CSS we can now have full-width Aesop Story Engine components within Genesis.” align=”center” imgwidth=”800px” img=”https://edituswp.com/wp-content/uploads/2015/04/genesis-pt-2.png”]
After we save our settings, and if everything has gone as planned, when we view the front we should see our full width components! Here’s a Github Gist of that CSS snippet in case you need to reference it later.
And the rest as they say, is history!
With very minimal effort we’ve turned Genesis into one powerful story-building theme driven by Aesop Story Engine, and editable all on the front-end with Editus.