Zero to CSS in 45 minutes: A beginner’s guide to editing CSS in WordPress
with WordPress geek Toby Cryns
It is time that you take control of your WordPress design! In this hands-on workshop, Minneapolis-based WordPress guru, Toby Cryns, will teach you the basics of editing your website’s colors, fonts, and more using the CSS editor that is already installed on every WordPress website. Due to the hands-on nature of this workshop, laptops are highly-recommended.
Everyone with a WordPress website or blog has the power to take charge of their design. By the end of this 45-minute workshop, you will have the tools to:
- Change your website’s font size, style, color, and family.
- Force fonts to go uppercase, lowercase, or italics.
- Take advantage of CSS3 to add drop-shadows to images and text, add rounded corners to square things, make things transparent, and use awesome fonts with Kernest.
- Change the style of your sidebar headers.
- Change the style of bulletted lists.
- Use Firebug to figure out what needs to be edited in your CSS file to make the changes you desire.
- Use the built-in WordPress file editor to edit your CSS file.
Step 1: Get Firebug
Step 2: Open the WordPress file Editor
Go to your WordPress admin panel on your self-hosted website, and open “Appearance” -> “Editor”. Then click on “style.css” on the right side.
Step 3: Use Firebug to figure out which CSS tags to edit.
Step 4: Edit the CSS in your WordPress file editor (in “style.css”).
Repeat steps 3 and 4 as necessary.
Resources:
- CSS3 Generators: http://css3generator.com/ and http://www.westciv.com/tools/index.html
- Me! 612-293-8629
- MSP WordPress User Group
- Google and YouTube (of course)
- WordPress.tv
Agenda:
- Firebug
- Login to WordPress theme editor
- Change blog title font-family
- Give blog title some fire
- Add drop-shadow to H2 tags
- Add drop-shadow to images
- Change the styling of bullet-points (http://www.w3schools.com/css/pr_list-style-type.asp)
- What do you want to do?
More posts from themightymo.com
How to Connect a GoDaddy Site to ManageWP
GoDaddy owns ManageWP, and, strangely, they make it very difficult to add GoDaddy-managed WordPress sites to their ManageWP service. Thankfully, there’s a quick workaround: Visit https://yoursite.com/wp-admin/plugins.php?showWorker=1 — This will make the ManageWP “Worker” plugin visible. Copy the connection info from the ManageWP Worker plugin. Add the site per-normal on ManageWP. That’s it! I hope this…
How to check if your current page is the wp-login.php page
I realized this morning that my TMM Maintenance Mode WordPress plugin had a bug that was causing the wp-login.php page to be inaccessible. The solution was to write a simple function that checks whether or not we’re currently on a login page, and then add a call to that function in my code. Here’s the…
WooCommerce Product Image Gallery Not Loading with WP Rocket Active
Today I updated a WooCommerce site, and everything worked fine, except for the images on product pages – they were not displaying at all. After a lot of trial & error, I realized that WP Rocket was to blame. I’m not sure exactly what the issue was (though my hunch is that it had to…