Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

A bit of help with contempt just this one time

  1. evancking
    Member

    Hey guys I'm new to wordpress and even newer to CSS customization, since I just bought the upgrade. I know this is going to sound selfish but I personally don't want to really learn are lot of CSS. There are a few things I would like to change once and then never again and for that I don't think I should have to do the amount of searching I've done. In fact I feel wordpress kind of has poor support for searching anything other than blogs. For example how do I search the CSS Customization forum only? I don't think I can.

    Anyways I'm currently using the theme Contempt, which I really like, in fact I wouldn't change a thing about it if it wasn't for the fact that I'm sure a lot of people are using it, so I feel like I have to at least change the colours. Doing that, however has proven to be difficult to learn for the beginner, I've tried googling, tried looking here and still can't seem to find anything on how I can' change the colours of the title bars and outline for the widget boxes on the right. Once those are changed I'll upload a new banner that matches. I just need something other than blue for the widgets in the sidebar so I can match it with the banner.

    Also I'd like to know how to change the grey background. I probably won't change it but I'd like to know how just in case I feel the need to down the road.

    Those two simple pitfalls have stopped from going full steam ahead with my blog, and I'd really like to get some posts up. For an online tool that's extremely easy to start up with it seems unnecessarily hard to customize once you start paying for upgrades.

    Hopefully someone can help and what I want to do isn't too much of a headache.

    Thanks
    - Evan

  2. evancking
    Member

    Also is it possible to change the colour of links in your blog?

  3. vivianpaige
    Member

    There is NO official support for CSS and only a few people in the forums are well versed it. It is not recommended unless you already have CSS experience, which is why there is a free preview function. At the top of the CSS forum is a sticky which has a number of CSS tools in it.

  4. thesacredpath
    Staff

    The titlebar background is actually a jpg file 750 x 35 px. To change that, you would either have to make a new image file, or delete the image file from the CSS and redefine it as a simple color. If you do a new image file, then you would replace the URL in the "background-image" below with the image you created and uploaded to your media library.

    element.style {
background-image:url(place the full url of your new image here);
}

    If you wanted to use a solid color and not create a new image, then you would change "background-image" to "none" and then replace the word "transparent with your desired color such as below:

    element.style {
background-color:red;
background-image:none;
}

    The sidebar widget titles are under "#sidebar h2" All you have to do is change the "background-color" to your desired color such as below:

    #sidebar h2 {
background-color:#5581C0;
}

    To change the border color on the widgets, you need to change the "border" color in the section below. You can also change the background color of the widgets if you wish. If you do not want to change that, take the "background-color" line out of the below:

    #sidebar ul ul, #sidebar ul ol, #sidebar ul div {
background-color:#F8F8F8;
border:1px solid #2E5D99;
}

    The body background color takes two steps typically

    Change the color in "body" "background-color". This will leave two large grey borders on the sides of the content area. To get rid of those, you need to go to "element.style" and change "background-image" to none.

    My suggestion is to include ONLY include those lines and sections of the CSS that you are changing in the edit box and then make sure that "add to existing... is chosen before clicking save. That way your changes will override those parts of the original CSS. It is much easier to keep track of exactly what you have change if you do it this way.

  5. evancking
    Member

    @ vivianpaige: I did not know there is no support in place, that's too bad to hear and hopefully something the wordpress creators work on, thesacredpath was able to give me what I want and it didn't seem too hard, there really should be a better network for getting users knowledgeable to help grow the community.

    @ thesacredpath: Thank you so much for the help! It is exactly what I needed! Tomorrow I'll finish everything and move full steam ahead! Thank you, thank you, thank you. One more question though: is it possible to change the link colour from the default blue? And also what are you using to view the page's original code?

  6. yvette368
    Member

    I have the same template, Contempt. I think its perfect. Ive managed to change it how i like it but i too get them grey lines running down the side. There the only things wrong with it. Ive tried & cannot remove them.

  7. thesacredpath
    Staff

    In contempt, either add the following to your stylesheet, or change "background-image" to none if element.style is already in your CSS.

    element.style {
background-image:none;
}

  8. sgzoe924
    Member

    To thesacredpath-
    Sorry, I tried what you suggested and I still have the gray lines running down the side. Is there something I'm missing?

  9. rosclarke
    Member

    @sgzoe924, without a link to your blog, there's no way for us to help you.

  10. sgzoe924
    Member

    Sorry the problem I'm having is in http://sgzoe924work.wordpress.com/. Thanks for any help you may provide.

  11. devblog
    Member

    sgzoe924,

    Replace your current body definition with the following:

    body {
background: #fff url(http://sgzoe924work.files.wordpress.com/2009/02/yellowpattern.gif) left center !important;
font: normal 62.5% 'Lucida Grande', Verdana, Arial, Sans-Serif;
color:#333;
text-align:center;
}

    That should produce the results you want.

    HTH

  12. sgzoe924
    Member

    Thanks Devblog, it worked like a champ. I'm a CSS novice and would like to underatnd the "!important" parameter. I would appreciate it if you would explain it to me. Thanks.

  13. devblog
    Member

    The "!important" rule is used when you want your definitions to be prioritized over others.

    In your case, for example, the two gray lines you wanted to get rid of are defined in an inline style:

    <body style="background: url(image.jpg);">

    So your definitions weren't taking precedence. By adding the !important rule, you're helping your definitions to tell the browser "I take priority!"

    HTH.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags