This is the sixth and final lesson in a short series on creating custom template styles for posts. We will be using Thesis hooks and filters to create these “post templates”. In this part we create the CSS rules to make our templates layout the way we expect them to.
Okay so that brings us to the final part of this. Step 6 is the final part which is creating the CSS. And so, we’re going to create that CSS here, edit the CSS and then let’s see, we’re going to close the Find, we’re going to open this. Let’s see, let’s go to… let’s start with the first one which is the no sidebars and inspect the element. We are inspecting content and the post box. And yeah, look at that. Div id post box, really… it doesn’t look like it requires anything because in this case, format text entry content… there’s no width specified for this stuff. So since there’s no width specified for it… that’s what happened. Actually you know, I didn’t… what happened was the class no sidebars got attached to this and so, there isn’t anything we have to do to these. The only thing we have to muck about with then is the one where we’ve got the split sidebars, Bing Cherry 2 because class no sidebars got added to this. You know what? I bet this is a feature of Thesis 181. It used to be that when you use that filter to remove the sidebars, this class was not added to it and you had to add a class. But I bet that what happened is that 181 changed that or Thesis 1.8.1 and when you use the no filter, it automatically adds this class to the content, no sidebars, which is totally cool except that it doesn’t work for us here because we need to muck about with this.
So what we’re going to do here is we are going to say .custom .post split sidebars and then content_box… oh no, pardon me, my mistake…for heaven’s sakes. #content_box width colon and let’s call it 50%. Did I misspell this? Custom…oh, that’s right. I did, actually. That was the problem. So that’s custom .post split sidebars and now the width is equal to 50% and so then what we do here is we need to…oh, we also need to float it. Float colon… no, no, no. We don’t necessarily need to float this yet.
So the next thing we need to do…I know you’ve… yeah. Next thing we need to do is for… we’re inside of content box, we’re inside of content… actually, I may have used the wrong hook for this but we’ll try this anyway. I should have used before content box. Let’s fix that. I said before content but I should have said before content box, right? Before content box, save document, upload document, come back over here and test this. And then custom CSS and then paste that stuff again. Perfect, that’s what I wanted.
Div id sidebars and so, now what we’re going to do is .custom… let’s see. Post sidebars #sidebars and that is going to float left. By definition right now, my setup’s at float right but we’re going to float it left… float: left. Okay so now, left is off to the side and then copy and then not sidebars but byob right split sidebar and we’re going to float it right. Byob right split sidebar and we’re going to give it a width of 20%. Okay, let’s give this one a width of 25% and then let’s see, content box so sidebars… so then content box… I guess we need to float this left also. Left, there we go. So now, it jumps up in between.
And so, now we have our left sidebar on the left, we have our right sidebar on the right. We’ve got our content dead in the middle. If we take that little bit of code and we add the custom CSS, save it, upload it, and then go to Cherries. Here we are with no sidebars, go back to Cherries and here we are with the split sidebar. Didn’t I upload that? Custom CSS… maybe I didn’t upload it. Upload it…yeah, there we go. And then go back to Cherries and go to our Black Cherries.
And so now, what we have here is 3 user-selectable post styles or post templates if you will that allow you to always upgrade with Thesis because the functions are in your custom functions php file and can move easily with Thesis and yet don’t require you to specify a specific post ide or something like that. So you don’t have to say if is post such and such in order to apply it. And that wraps it up.