WordPress.com

1. flywithowen
   Member
   Feb 20, 2013, 11:33 AM

   Hello

   I'm new to CSS customisation of my site. I've read the guides on this site and linked from WordPress, done a couple of tutorials and feel I understand the principles of making changes. But what the guides seem to miss out is working out which bits of the CSS file apply to the thing I'm trying to change. I've been using the "inspect element" option in Google Chrome, but it doesn't always seem straight forward. So my questions are:

   • Is there a better way to identify which elements of the CSS file apply to the different elements of the page?
   • The CSS file for Twenty Ten seems massive with some things being defined in several ways. Is this typical of themes? Or are there some themes that are much simpler?

   All I really need to be able to do is change the font size and the colours - the page background, links, menu bar background, titles and text. I'm considering finding a simpler theme I can do that with, but think I'll be wasting my time if they're all developed in the same way.

   Many thanks for your help! If I'm on the right lines, I'm happy to knuckle down and work it all out bit by bit :-)

   Cheers

   Jenni

   PS - the URL is http://airadventuretandems.co.uk

   The blog I need help with is airadventuretandems.co.uk.

2. designsimply
   Staff
   Feb 24, 2013, 3:54 AM

   Welcome to WordPress.com!

   Is there a better way to identify which elements of the CSS file apply to the different elements of the page?

   Using the web inspector by right-clicking and selecting "Inspect Element" is the best thing in my opinion. It will highlight the HTML you clicked on and also show all of the CSS rules that apply to that thing. If you keep clicking on different elements in the panel on the left, the CSS will keep updating on the right. When you're starting out, it's useful to adjust the CSS right inside the panel and then just copy out the updated CSS and paste it into your Appearance → Custom Design → CSS editor.

   Here is a more in depth tutorial about the web inspector from the Chrome developers. Check out the CSS Styles section:
   https://developers.google.com/chrome-developer-tools/docs/elements

   The CSS file for Twenty Ten seems massive with some things being defined in several ways. Is this typical of themes? Or are there some themes that are much simpler?

   Twenty Ten was designed with best practices in mind. It may seem like a lot because it's taking every possible scenario of the content into account. That's why using the web inspector to just look at CSS for one area at a time makes it a little easer to start figuring out what's happening with all of it. I think the Twenty Ten CSS is pretty typical. Of course, it varies. Here is the CSS for two different themes so you can compare:

   This is Twenty Ten's stylesheet:
   https://s1.wp.com/wp-content/themes/pub/sandbox-162/style.css?m=1323834012g&minify=false

   This is the stylesheet for the Sandbox theme:
   https://s1.wp.com/wp-content/themes/pub/sandbox-162/style.css?m=1323834012g&minify=false

   It's simpler, but it's designed as a blank slate for someone to customize themselves so it doesn't have rules for a lot of stuff and the starting point of the theme looks pretty plain: http://sandbox162demo.wordpress.com/

   For some people, it's easier to start with a stylesheet like Twenty Ten because you can see how something was styled, take that, and adjust it. With the Sandbox theme, you have to come up with the CSS to style everything on your own. It's up to you to decide which approach works best for you.

Topic Closed

This topic has been closed to new replies.