How to change Bueno border color?

  • Unknown's avatar

    I am new to CSS and I am currently educating myself. I would like to know how can I change the black boarder to a chocolate brown as well as the bold type font?

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

  • Unknown's avatar

    I have upgraded the CSS editor

  • Unknown's avatar

    Are you talking about the black band at the top and bottom of Bueno? If so, here is where those two colors are defined (I just popped in a brown hex color code. You can replace it with a color of your choosing.

    #navigation {
        background-color: #553300;
    }
    
    #footer {
        background-color: #553300;
    }

    As far as the bold font, which ones? There are a number of places that the fonts and font weights are set.

  • Unknown's avatar

    Thank you so much. The bold fonts I am referring to are on the left hand side for the widget titles as well as the title of my entries. ie the title of my blog, about me, home. I hope I’m not being confusing.

  • Unknown's avatar

    First off on fonts, I recommend reading through this link as it give you an idea of the fonts common to all computers, and the browser will pull from the fonts on the computer so you do not want to use something that is not likely to be on the visitor’s computer.

    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

    One way to get around this is to sign up for and use typekit fonts, which are web based and served off the typekit servers which means you have a lot more choices.

    http://typekit.com

    The post titles and widget titles are set here:

    h1, h2, h3 {
    font-family: Rockwell,Georgia,Palatino Linotype,Palatino,"Times New Roman",Times,serif;
    }

    Rockwell, the first font in the font stack is heavy. If you remove that from the font stack (with its trailing comma) it will then use Georgia which is not has heavy. There is no “bold” set for those fonts.

    The site title is set here:

    .site-title {
    font: 72px/58px Impact,Helvetica,arial,sans-serif;
    }

    The first font, Impact, is a very heavy font, but it is also a compressed font, which means if you take it out and let helvetica be the main font, the length of your site title is going to expand considerably and will push the navigation down below the site title. You can give it a try and see what you think. You can always make the font smaller if you stick with helvetica or arial.

    The navigation font is set here:

    #pagenav a {
    font-family: Impact,Helvetica,arial,sans-serif;
    }

    Again, the same issue will happen if you remove “impact” from the font stack and goes to helvetica.

  • Unknown's avatar

    I’m not sure that I want to change the font type but I do want to change the color to the brown as well. Is that even possible? I don’t want to mess up the look and feel of the site by changing the font.

  • Unknown's avatar

    Most certainly. For the above selectors I gave, just add a color declaration with your selected color hex code.

  • Unknown's avatar
  • Unknown's avatar
  • Unknown's avatar

    I’m sorry this is my last time asking. I have been trying to enter my color declaration to no avail. Could you please assist me? This is what I’m entering but obviously it isn’t correct.

  • Unknown's avatar

    Not a problem.

    You know, let’s change some of what I had and add this to your CSS and see what you think. If you are using the preview function, you might have to force refresh the preview page to see the change. The preview function has been a little flakey lately.

    .site-title a:link, .site-title a:visited {
    color: #553300;
    }
    
    #pagenav a {
    color: #553300;
    }
    
    #pagenav li.rss a {
    color: #553300;
    }
    
    .widget h3 {
    color: #553300;
    }
    
    .post .title, .post .title a:link, .post .title a:visited {
    color: #553300;
    }
  • Unknown's avatar

    OMG, I really need to educate myself on this quickly. It totally worked. Thank you very much. I really appreciate your patience.

  • Unknown's avatar

    You are very welcome and I was glad to do it.

    If you are going to be playing with CSS, I suggest installing and getting to know the Firebug add-on for Firefox. It makes it very easy to see what selectors control what elements in the pages and also lets you try changes out in realtime.

  • The topic ‘How to change Bueno border color?’ is closed to new replies.