As we approach the topic of custom layout, I do want to repeat: your safer option is choosing a different theme. There are so many to choose from, and growing all the time, and it’s hard to imagine you’ll have layout needs that aren’t already found between the original options and the layout of the original design.
However, if you’re an insistent type, or you just like a challenge, you might want to start by getting rid of all the CSS entirely. You can view the custom CSS for the page using your developer tools, and once you see what’s going on, you can test your expertise from there.
I, however, am not an expert. While I do have aspirations of becoming one, I do not see CSS when I close my eyes, nor am I yet confident when I write a line of code that I know exactly what will happen. While I’ve been playing with layout in my custom CSS, I’ve felt a little like this poor little dinosaur, who keeps destroying the city:
But here are some things I’ve learned, and some things I’ve learned how to do:
Extra Columns in Your Posts
If you want a little newspaper look to your posts, you can use a two or three column format, you can add something like the following to your custom code:
article {
column-count: 2;
}
I used the element selector; you could have used a class selector if you preferred, and it may not be the same element or class selector in your particular theme. Notice we didn’t use “body,” which results in something disastrous and interesting, and I invite you to take a look at what they do if you’re curious.
But this solution isn’t without casualties either. Take a look at our short article from last time:
My caption fell apart! The columns took over everything, now I need to override at least that one element to keep everything together. In my theme, that’s the “.wp-caption” class, but what do I do with it? White-space: no-wrap? Text-wrap: suppress? My solution in the end is:
.wp-caption {
overflow: auto;
}
But maybe my solution should be just to apply the two columns to this post. So let’s use the .div functionality. I had some problems making this work in the past, but it seems really smooth now! In my CSS, I added:
div.special {
column-count: 2;
}
and in this post, I added:
<div class = “special”>
</div>
around everything and it worked just fine. I know I had trouble with that when I tried to do it before, but it works now! Great! You can define your divs right in the body of your posts, and that’s a major problem solved.
I thought I might be able to move my widget bar from one side to the other, but I couldn’t. I thought I might be able to detach my header image from the sidebar and put it across the top, but all I could do was stretch it off to the side. But I’ll keep experimenting, and soon, I’ll try to come up with a handy list for you of the commands I know you can use.
❤
LL
Post Modern Existential Horror 