CSS for Bueno – menu drop downs & page headings

• 

  adamandlou · Member · Mar 11, 2011 at 12:55 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I am modifying the Bueno theme and am stuck on a couple of points.

  Blog is adamandlou.com

  1) Want to change the colour of the underline on the selected page. Have changed it for highlighted but want a different colour when selected (currently is very dark green)
  2) Want to change the background colour of the drop down boxes
  3) Want to change the font colour of the heading in the actual posts (currently black) and to change the colour of the light blue line that separates the heading from the text.

  Thanks in advance :)

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

• 

  thesacredpath · Member · Mar 11, 2011 at 1:43 pm

  • Copy link

  1. This is the bottom green border color.

  #pagenav li.current_page_item a, #pagenav li.current-menu-item a, #pagenav li a:hover {
  border-color: #115900;
  }

  2. This is the cream color (non-hover).

  .nav li ul li, #header .menu li ul li {
      background: none repeat scroll 0 0 #FFFFF0;
  }

  3. This is the page title color.

  .post .title {
  color: #000000;
  }

• 

  adamandlou · Member · Mar 11, 2011 at 2:03 pm

  • Copy link

  Got the goods as always! Thanks :)

  Sorry I wasnt clear on my second question, I want to change the hover colour background of the drop down box

  Also, any ideas on the light blue line under the post heading?

  Cheers,

  Louise :)

• 

  thesacredpath · Member · Mar 11, 2011 at 8:52 pm

  • Copy link

  The border line beneath the post/page titles is here:

  .post .title {
  border-bottom: 1px solid #E7E7E7;
  }

  On the hover color it is here.

  #pagenav li ul a:hover {
  background: none repeat scroll 0 0 #115900;
  }

• 

  adamandlou · Member · Mar 12, 2011 at 1:52 am

  • Copy link

  Thanks so much !

• 

  thesacredpath · Member · Mar 12, 2011 at 4:39 am

  • Copy link

  You are welcome.

• 

  adamandlou · Member · Mar 12, 2011 at 7:18 am

  • Copy link

  Sorry , one last question, I just about have it how i want it. Just need to change the colour of the drop down text when hovering. Currently its white so disappears.

• 

  thesacredpath · Member · Mar 12, 2011 at 7:26 am

  • Copy link

  Add a color declaration to the following with the !important attribute.

  #pagenav li ul a:hover {
  background: none repeat scroll 0 0 #FFFFF0;
  color: #000000 !important;
  }

• 

  adamandlou · Member · Mar 12, 2011 at 9:44 am

  • Copy link

  Perfect thanks! Now this is finished I can finally send out my Save the Dates.

• 

  thesacredpath · Member · Mar 12, 2011 at 10:14 am

  • Copy link

  You are welcome, and it looks very good. You’ve done a great job on it.

• 

  jacklynnpham · Member · Apr 4, 2011 at 8:56 pm

  • Copy link

  @thesacredpath, I’ve been reading all your comments and you’ve been such a great help! Do you happen to know how to change the box that’s around the drop down menu items as well? Mine is still pink from the original theme.

  jacklynnpham.com/portfolio.

  Thanks in advance!!

• 

  thesacredpath · Member · Apr 4, 2011 at 9:23 pm

  • Copy link

  @jacklynnpham, it looks like you got this taken care of. Also since your blog is self-hosted, you need to inquire about question on that blog at http://wordpress.ORG/support/ as that is where self-hosted blogs are supported.

• 

  jacklynnpham · Member · Apr 4, 2011 at 9:31 pm

  • Copy link

  Yeah, I have been searching forever *just* discovered the default.css via the firebug tool you suggested…thanks so much! thanks too for the .org tip.

• 

  oceansidepei · Member · Apr 5, 2011 at 4:40 pm

  • Copy link

  Okay, so I’m really dumb at this, but I need some extremely basic help.

  I’m designing a website for my company using the Bueno theme. I’ve purchased the CSS upgrade and expected it to be a bit easier than it actually is to customize the theme.

  Under the ‘Appearance’ tab, I’ve clicked on ‘Edit CSS’. The box is filled with sample text that is to be removed. Just under this box, there’s a hyperlink to ‘view the original stylesheet’. I’ve taken this information and pasted it into a Word document.

  I’ve been experimenting, adding codes willy-nilly. When I paste the revised text into the CSS box and hit preview, nothing about any page on the website changes.

  Can someone provide me with some extremely basic tips on how to start customizing? As it stands, my approach is completely futile.

  Thanks very much.

• 

  thesacredpath · Member · Apr 5, 2011 at 6:12 pm

  • Copy link

  Is this the site you are talking about, http://oceansidepei.wordpress.com/ ?

  Were you using the preview function? Sometimes with that you have to force refresh the preview page.

• 

  oceansidepei · Member · Apr 6, 2011 at 11:58 am

  • Copy link

  Yes, that is the website — and yes, I was using the preview function.

  Was my approach correct? If so, when I add codes (for example, to remove comments completely), can I add them anywhere to the sheet? I’m not sure what I have to delete in the existing stylesheet — I’m assuming I can’t just add the new coding for removing comments, and leave everything else as is?

  Thanks!

• 

  thesacredpath · Member · Apr 6, 2011 at 5:18 pm

  • Copy link

  Don’t paste into a word document. Paste the stylesheet into a plain text editor such as notepad or textedit, or something like that. Word can change some of the characters used and mess things up.

  When putting stuff into the edit window, what is best is to include only the specific selectors and the specific declarations that you are changing and make sure “add to existing…” is selected before saving. For example, lets say you wanted to change the background color in the following.

  #navigation {
      background-color: #000000;
      font-size: 11px;
      text-transform: uppercase;
  }

  This is all you want to put into the CSS edit window.

  #navigation {
      background-color: #000000;
  }