Episode 2:01 Starting Over, Again

Featuring: Kathryn the Critic!
Cis Het Whites: Divorce!
Cuckoos!
Musical Theater!
Rocket Bees!
and more!

Part 6: Immobility

Another thing that’s nice about the default themes is that a good many of them, these ones specifically, are already optimized for mobile, so that anything you do will be reflected across platforms, so that users will have roughly the same experience whether they see your site on desktop, phone, ipad, or other device.

Once you start customizing the CSS, however, you have to check a few more things. Last night was the first time I looked at my site on mobile since I added the columns in part two, and it was truly horrifying.

IMG_0113

The website of an aspiring professional.

This was a terrible and desperate situation, and something had to be done about it immediately. And so, as soon as I had drawn a cute seal to somehow illustrate the point of “having mobile difficulties” I set to work.

sealbus

You get so excited sometimes that you always miss the bus.

Of course, if all else fails, I can disable the columns. I am not married to the columns. That’s the root of the difficulty here, and essentially what I want to happen, just on the mobile site. I do like the way they look on the desktop site, but is there a convenient way to seperate the layout of the two pages?

Let’s take a look at the layouts. You can do so conveniently by looking at the bottom of your CSS window.

Screen Shot 2018-07-13 at 5.27.19 PM

Desktop, tablet, and smartphone.

Our previous methods of examining the layout of the page prove fruitless here. All the elements have the same classes, the same code attached to them. There are additional layout elements in the browser to make this page look like a mobile site, but they won’t appear anywhere else.

In the CSS help on the WordPress site, they mention a body.mobile-theme class, so assuming everything follows the same structure from there:

body.mobile-theme article {
column-count: 1;
}

Huh, it didn’t work. Oh, I know. Let’s try:

body.mobile-theme article {
column-count: 1 !important;
}

Still nothing. How about:

article.mobile-theme {
column-count: 1 !important;
}

body.mobile-theme{
display: none;
}

and the one time I expect nothing, nothing happens. Meaning, nothing changes. I don’t think the body.mobile-theme class is current.

Unfortunately, the solution I found is a little hard to deduce. I had to crawl on the forums and find a similar syntax to apply to my situation. In the end, the code I put in was:

@media screen and (max-width:960px) {
article {
column-count: 1;
}
}

and now everything looks nice and clean. Except those tables.

Screen Shot 2018-07-13 at 5.30.18 PM

It’s not alligned right. It’s not floating right. What’s going on?

I guess it gives me more reasons to come back.


LL

Part 5: Further Customization

While you have somewhat limited control over the HTML of your page, there are a few things you can do. Divs. Remember divs? If you use the HTML view to write part of a post, you can write part of your update with a custom class or id. Just like this paragraph here. It’s not much different than other paragraphs, except it turns green when you hover over it. Just a funny little trick. All I did was add

Screen Shot 2018-07-11 at 6.01.01 PM

around this paragraph within this post, and

.custom:hover {
color: #2CDB5D;
}

in my custom CSS. You can do similar tricks with any HTML element. Headlines, pictures, tables…

Speaking of, I wanted to provide a quick little list of useful customization commands. With so many possibilities in CSS, I wanted to give a simple starting set of things that should almost definitely work, once you find the right selectors.

customrattle

Make it yours. Own it. Bedazzle your rattle.

 

Style

Name Function Useful For?
color/background-color Sets Color/Background Color Text, Various Elements
border/outline Getting the right spacing between things The area around an element, The area around that
box-shadow/text-shadow makes a shadow effect elements within a post, buttons, images, text

Boxes and Such

Name Function Useful For?
margin/padding Setting space around element, outside/within element Various elements spaced throughout the page
height/width Sets the dimensions of an element (width is more commonly used) Images, embedded content, buttons, navigation bars, other content
display: none any element, generally specific ids or .hidden class controls the layout and look of a page by pretending things aren’t there

Naturally, there are other simple commands one should know, and I’ll keep updating this list. For now, this site is a nice, simple resource to basic CSS usage, and it can tell you some some the special commands and usage for the above. This whole series may continue soon — there are definitely other things I want to talk about — but my strange obsession with animating a cute animal gif for every tiny article means I need to take a break.

My funny-sad podcast will be back soon, and I’m going to be helping out on the WordPress.com support forums. I just felt like I had a hard time finding a good starting resource specifically for customizing CSS on WordPress sites, and thought I might at least make a jumping off point for the next person! Please feel free to contact me if you have any questions about CSS or WordPress or anything at all, and I’ll do my best to help!


LL

Part Four: Laying it All Out There

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:

IMG_0021

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” or “div,” each of 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;
}

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

Part Three: Asserting Your Importance

Before we talk about customizing elements of the layout, we should simplify our workflow a little bit. Remember in Part Two when we had to add multiple selectors to get our point across? Turns out this happened because of the CSS trait of precedence. If you have two bosses of equal rank, one telling you to keep things the way they were and the other to change everything, you’ll probably take the path of least resistance, unless you have a good reason not to.

You can be an upstart, though. You can lead the CSS to revolution. You can be important, no matter who you are, like this little floofy puppy:

importantfloof

You don’t have to be strong to be !important

In the last example, we had to say “.post.type-post” to change the background color on posts, but with “!important” we can use just one of those class selectors like so:

.post {
background-color: #701A6D !important;
}

This is a hot tip, and a shorter article than others, but there is some danger of using this trick too much. However, f you’ve tried a few selectors and few of them together and none of them are cooperating, put an !important in there and let them know you mean it, in a friendly way of course.


LL

(thanks Ryan and Dezro!)

Part Two: Keeping up with Color

As may be apparent by the eggplant color scheme on my website, I am not a graphic designer, and while, yes, I do often look stylish and may I say, fabulous? — that’s mostly because I’m tall. I’m sorry.

Still, while I know some may find it garish, I like my eggplant color scheme, and I want to enforce it on my website, whatever the cost.

Without custom CSS, I have a limited supply of custom colors. Depending on the theme you have selected, you can customize a few elements of the page in the built-in interface. Within the “P2” theme that I’m using, you can change the Background, the link color, an accent color, and a second accent color. Without my custom CSS, it looks something like this:

Screen Shot 2018-07-07 at 7.28.17 PM

Boring, sad, ugly and restrained

All that white is way too clean for me. I like things a little more wild, though it’s probably a good idea to stick to a color scheme, lest your users become overwhelmed like my poor little chameleon here.

camelian

Poor chameleon just wants to fit in, but there are too many colors.

About five colors, give or take one or two, is good for a color scheme. To keep track of your colors, you can label them at the beginning of your CSS. You can comment them out if you like, though if they’re not selecting anything, they’re not going to affect anything. It’s probably a good habit to comment things out though.

My color scheme is like this:

/*Post Background: #701A6D
Widget-Background: #F5989D;
Headlines: #2CDB5D*/

And there are some other elements that I left to the built-in WordPress editor. It’s a pretty robust editor, and it handles several iterations and complementary iterations of elements at once. For everything that’s there, it saves a lot of time over writing each individual element in code, and sometimes the built-in panel can be difficult to override as well.

As you find the selectors you want to alter on the page using the inspect element tool that we talked about last time, you’ll often have to add a class or two to the element to get the style to “catch.” I couldn’t get my purple background with “.post” or with “.type-post” on their own, but “.post.type-post” works fine. That arrangement doesn’t mesh with what I know about CSS, but I’d love an explanation if you have one!

From here, nothing diverges too much from what you know about CSS already, thankfully. My advice at this point is to trust the WordPress interface as much as you can, and just put a few curly braces in here and there when you need to. Though, you might have more difficulty if you want to start rearranging things. Themes are mostly about the layout. It might be a bigger fight once you start meddling with that. Well, let’s not back down. I’ll look into it. For you.


LL

#brochures, #color, #css-guides, #information, #technology, #wordpress-com

Part One: The Freedom of Restraint

Hi!

While normally, my devotion here is presenting my comedy-horror funny-sad podcast, I’m taking a break right now to bring you informative tech journalism. For the next few days, I’m going to tell you about customizing your premium WordPress.com site using custom CSS.

If you learned CSS from an online course, and there’s no shame in that, you independent learner you, you likely learned it in relation to HTML, moving freely between two files, organizing your ids and classes and divs in HTML and selecting them as you needed them in CSS.

However, with WordPress.com’s themes, you have limited access to the HTML, which means you can’t alter each element exactly in the ways that might make sense to you. You are forced to adjust to the structure and vocabulary of the theme creator, and much of this code is inaccessible to the casual user. Considering you know a thing or two about CSS, it seems a little frustrating to be stymied by these closed doors. Why can’t you see what’s there in the HTML? Why can’t you alter it? Why isn’t it consistent?

I understand. I used to be like you. Just a few days ago, the way I was altering my CSS was copying the whole style sheet of the page, thousands of lines of code, and painstakingly altering the parts I wanted. It was…a partial solution. It made the page look how I wanted, but it was difficult to fix on the fly. It was poorly organized and ugly and as someone who studied as a poet, I want my language to be concise, even my unseen computer language.

The good news is: the selectors aren’t hard to find. Modern browsers have developer tools that allow you to see the labels on specific elements, and intuitively labeled. If you left-click an element and select “inspect element…”Screen Shot 2018-07-06 at 6.15.44 PM.png

…you’ll find a new window at the bottom the browser that looks kind of like this:

Screen Shot 2018-07-06 at 6.27.02 PM

That block of text looks horrible and ugly and something only computers want to read. That bit on the right though:

Screen Shot 2018-07-06 at 6.29.09 PM

This box is actually really useful! It tells you which bits of code are actually acting on the selected element, and which have been overridden. But it’s also kind of an information overload.

That’s CSS! I’d recognize it anywhere! It looks so simple and clean. Can I just put those selectors in and change the values and fix everything?

As it happens, no. At least not in most cases. But what I wanted you to look at is higher on the page when you hover over the big ugly block of text.

Screen Shot 2018-07-06 at 6.35.06 PM

Do you see that pop-up box there? It has the img element and a whole bunch of different classes, color coded for your convenience. I’m using Firefox, but Chrome and other browsers have similar interfaces.

Now, we can definitely change some properties of that image by entering that whole thing, img.alignone.size-full.wp-image-643.aligncenter, and that would take care of that specific image. As you learned in your online class, you can set properties for all your images with the selector ‘img’ or for use any number of those classes to choose images of a certain type.

Essentially, this hovering and interpreting the information displayed is the most fundamental step to using CSS with WordPress.com. No matter what else you’ve learned about CSS and other coding, if you haven’t figured out how to get this information from your website, you’re going to be more frustrated than you need to be, when really, more than half the work has already been done for you! Relax! All you have to do is customize the elements to your liking, which we’ll talk about next time.

LL