Part 5: Further Customization

Refined Rattle

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

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:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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.