Part Four: Laying it All Out There

Responsible Monster

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:

Godzilla was largely misunderstood.

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:

Screen Shot 2018-07-10 at 11.01.06 PMMy 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”>

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.


By @nohoperadio - Leah Lindsaychen

Facilitator and Proprietor of Tales of Insecurity, a podcast of post-modern existential horror. I like to make the best of a bad situation, and also to make better ones. I'm here to be helpful!

Leave a comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: