Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Bueno theme customization help?

  1. biancajadeblog
    Member

    Hello,
    Can someone help me with a few CSS customizations to my blog? I am using the Bueno theme and have paid for the CSS upgrade.

    How can I change the navigation menu font and make them smaller?
    How to change the purple border around the photos to a different color?
    How to change the border around the actual post box to a different color?
    Also, I was inspecting with firebug and noticed when I turned off #main {width: 620px;} the recent posts moved to the bottom and the blog became a single column with the column spreading across the page. This is what I actually want the lay out to be like because I want my photographs in my posts to appear larger. How can I achieve this with CSS?

    Sorry for all the ?'s... I'm a rookie!

    Much Thanks!

    The blog I need help with is biancajadeblog.com.

  2. designsimply
    Staff

    How can I change the navigation menu font and make them smaller?

    In the Bueno theme, you can adjust the top navigation menu font size with the following CSS:

    #pagenav a {
  font-size: 100% !important;
}

    Adjust the percentage to a size you want.

  3. designsimply
    Staff

    How to change the purple border around the photos to a different color?

    First, note that you can select a different color scheme from the Appearance → Theme Options page when you have the Bueno theme enabled.

    If one of the preset color schemes doesn't work for you or if you just want to change the border around colors and no other color, you can use this CSS:

    .entry img {
  border: 5px solid tomato;
}

    Adjust the color as necessary.

  4. designsimply
    Staff

    How to change the border around the actual post box to a different color?

    Use this to change the border around posts and pages in the Bueno theme:

    .post, div.page {
  border: 5px solid black;
}

    Adjust the color as necessary.

  5. designsimply
    Staff

    I want my photographs in my posts to appear larger. How can I achieve this with CSS?

    To turn off one part of the CSS that's used in an original stylesheet on a WordPress.com blog, you need to override the existing CSS with a new rule. To invalidate width, you can use the default setting, which is "auto" like this:

    #main {
  width: auto;
}

    Note that this will make the sidebar fall to the bottom, and so if you add more sidebar widgets than what you have now, you will probably also need to add some CSS to adjust the layout for them.

    Also, you may need to re-insert some images if you have added them as a set size previously. Check out the media sizes on the Settings → Media page and make sure they look good to you. You should also adjust the limit width on the Appearance → Custom Design → CSS page (below the editor) to match the size of the main content area. If you use width:auto, then it works out to make the content 940px in Bueno.

  6. biancajadeblog
    Member

    Hello again,

    A big thank you to you for all of your help so far! I have a few more help requests.

    1. How to change the border color around the header banner image?
    2. Change the post title color to a dark gray vs. black?
    3. When I made the body of my column larger with the width:auto; the sidebar did fall to the bottom, which is what I wanted to happen. However, when I took the recent post widget that was in the previous sidebar away, the archives and meta appear in the footer by default. Is there any way to do away with these?

    Thank you!

  7. biancajadeblog
    Member

    Hello,

    I actually figured out how to change all of the previous inquiries from my Mar 21st post. Now I just need to figure out how to change the color of the black strips at the top and bottom of the page?

    Thanks

  8. biancajadeblog
    Member

    I figured out how to change the black strip above the navigation. Now I just need to change the black strip under the footer to dark gray. I tried the #extended-footer {
    color: #FFFFFF;
    }
    but it keeps changing my entire footer including the purple footer to gray.

  9. designsimply
    Staff

    I actually figured out how to change all of the previous inquiries from my Mar 21st post.

    That's awesome! If you have time, please post back the answers you found. They may help others too. :)

  10. designsimply
    Staff

    Now I just need to change the black strip under the footer to dark gray.

    Try this:

    #footer {
background-color: #3B0466;
}

  11. biancajadeblog
    Member

    Hi,

    It seems that when I click on a post to only view it singly or go to my about page, certain changes that I made to my page aren't applying.

    For example, I changed my Post title to Dark Purple, but when I click on the post or go to my about me page it is still black. How can I make it stay purple throughout?

    This is the code that I used to change my font:
    .post .title a:link,.post .title a:visited {
    color:#3B0466;
    }

    Also, If I click on the post title to view the post individually the body of my post gets smaller than on the main page, making it not in line with the full header anymore.

    Any advice?

    Thanks!

  12. designsimply
    Staff

    Post titles are links on the home page and archives pages, but they aren't links on individual posts, and that's why you're seeing the difference. To make all of the post titles dark purple, you can add an extra selector such as ".post .title" without an "a" at the end and that will work. Try updating your CSS rule for title colors to this:

    .post .title,
.post .title a:link,
.post .title a:visited {
	color:#3B0466;
}

  13. designsimply
    Staff

    If I click on the post title to view the post individually the body of my post gets smaller than on the main page, making it not in line with the full header anymore.

    I compared the content font size on http://biancajadeblog.com/ and http://biancajadeblog.com/2012/04/09/sweetness/ and they look the same to me. If you still need help with that issue, please post a link where we can see the problem happening.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags