starting CSS editing

• 

  venusmusicband · Member · Oct 1, 2011 at 4:44 am

  • Copy link
  • Add topic to favorites

  This may sound silly but I can’t understand how to start editing a theme! I have purchased the upgrade but do you need to rewrite the entire style sheet? How do you start? And how do you find what you’re looking for in a style sheet in order to change it?
  Sorry for all the probably silly questions but I have not been able to find any document that helps me get started!
  Thanks.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Oct 1, 2011 at 6:28 am

  • Copy link

  The best way is to do CSS changes at wordpress.com is to put only the specific selector, and only the specific declarations you are adding or changing into the CSS edit window and make sure you have things set to add your changes to the original stylesheet before saving. That way your change override the existing.

  As far as identifying the CSS selectors and such, you have to start with the markup (XHTML), find the element you want to change and then see what IDs and classes are listed for that particular element.

  One of the easiest to use tools for this is the Firebug Add-on for Firefox which will list the markup on the left and the corresponding CSS that controls that element on the right. You can use the “inspect” feature to highlight the element you are wanting to change and the two panes at the bottom will change to show the markup and the CSS for that element.

• 

  venusmusicband · Member · Oct 2, 2011 at 1:44 am

  • Copy link

  Thanks so much!
  I understand what’s happening now but I still for the life of me can’t figure out how to change the background colour of the boxes of content on each page/post. I understand how to change the main background but just not these little text boxes…it’s driving me INSANE!
  Could use any help you could give me.

  Thanks in advance!

• 

  thesacredpath · Member · Oct 2, 2011 at 2:29 am

  • Copy link

  This will change only the posts and page content area.

  #primary {
  background-color: #FFFFFF;
  }

  This will change the posts and the sidebar.

  #primary, #secondary {
  background-color: #FFFFFF;
  }

  As you can see, changing the color in the either of the above creates more work. For one thing, the “tear” images used for widget titles and the post meta have white around the edges.