Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Change Line Color in Chateau?

  1. careyjolliffe
    Member

    Hello,

    I'm trying to change the color of the lines that divide the columns and posts in the Chateau theme. Also, I would like to remove the line around the header image. Lines, borders, strokes -- I'm not sure what to call them.

    The blog I need help with is careyjolliffe.wordpress.com.

  2. thesacredpath
    Staff

    Do you have the custom design upgrade?

  3. careyjolliffe
    Member

    Yes I do.

  4. thesacredpath
    Staff

    The double line between the content and sidebar is here.

    #content {
    border-left: 3px double #3E3E3E;
}

    I see you got rid of the border around the header image already. If you are talking about other lines as well, let use know which.

  5. careyjolliffe
    Member

    I think I finally figured out how to change the line colors. Now I'm trying to refine the type. I'm trying to increase the font size of the body copy and side menu. I'd also like to change to color of the body copy and the links (both on the side menu and above the body copy).

  6. careyjolliffe
    Member

    Okay, I figured out how to change the size of the menu. But I still can't change the body copy

  7. thesacredpath
    Staff

    This is a long one, but it will change the bulk of the text color.

    .post-info, .post-extras, .post-extras p a, .post-entry, .post-entry p, .post-entry li, .post-entry h4, .post-entry h5, .post-entry h6, .wp-caption .wp-caption-text, .gallery-caption, .wp-caption .wp-caption-text:before, .post-entry cite, .more-posts .page-title, .more-posts .notice, #more-posts-inner article, .comment-author, .comment-text p, #comments li.pingback .comment-text .edit-comment a, #calendar_wrap table td, #error404 span {
color: #A19090;
}

    This takes care of normal text in the sidebar.

    .sidebar-widget p {
color: #023F5B;
}

    This is sidebar links

    .sidebar-widget li {
color: #023F5B;
}

    Post body font size

    .post-entry {
font-size: 13px;
}

    Sidebar font size will have to be done like this (change the 100% value)

    #secondary {
font-size: 100%;
}

    Links under title (cats, etc.)

    .post-info a {
color: #ffffff !important;
}

    I've likely missed some stuff, so give the above a try and then we'll go from there.

  8. careyjolliffe
    Member

    Thanks. All that helped a lot. I still can't change the color of the links on the side menu but what I have will work. There's a couple other lines like the ones around photos that I can't change, but I have everything about 95% of where I want it, so I can live with it.

  9. thesacredpath
    Staff

    First off, it appears as if you have pasted the entire stylesheet into the CSS edit window. That can cause issues. Generally what you want to do is put only the specific selectors, and the specific declarations you are changing into the CSS edit window and make sure that "add to existing..." is selected.

    Secondly, I see the #content stuff in your CSS, but you did not edit the hex color code. It is exactly what it was originally.

    This works. I just did it on my test blog, but with you having pasted the entire stylesheet there might be something in what you pasted that is overriding the change. That is one of the problems you will run into doing it the way you have.

    Add the following at the very bottom of all the stuff you have in the CSS edit window. Very end. I used the "important" attribute to force it to override everything else. Edit the color code to your desired color.

    #content {
border-left: 3px double #CC0000 !important;
}

  10. thesacredpath
    Staff

    Sidebar links.

    .sidebar-widget a {
color: #CC0000;
}

    Sidebar hover links

    .sidebar-widget a:hover {
color: #33FF00;

    }`

    Image border color. (colors are top, right, bottom, left)

    .post-entry img {
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-style: solid;
border-width: 1px;
}

    If you want no border on the images.

    .post-entry img {
border: none;
}

  11. careyjolliffe
    Member

    Wow, this is all perfect. Thanks again. If it's not too much trouble, could you help me with one last thing? When you view each blog entry on it's own, towards the bottom of the page below the "Like This" link and above the "Previous Post" link there is a white line. How can I change the color of this?

    Thanks again for all your help. I'm not a coding guy so I'm learning as I go.

  12. thesacredpath
    Staff

    This is the single post nav link stuff (non-hover).

    #nav-below a {
background: #EEEEEE;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-style: solid;
border-width: 1px;
color: #666666;
}

    This is the single post nav link hover stuff.

    #nav-below a:hover {
border-color: #CCCCCC #999999 #999999 #CCCCCC;
color: #000000;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags