Episode 35: Starting Over Again (Again)

This week:
An Annoyed Astronaut!
Prom Victims!
The Pixlies!
A Parrot and Various Emergencies!
And please welcome our new producer, Shauna.

The Pixlies: Symphony of the Goddess Music Video

 

From Introducing: The Pixlies

doubleclick

The Pixlies Debut

Album available on Bandcamp: https://nohoperadio.bandcamp.com/album/introducing-the-pixlies

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