Change color of the navigation bar/Very top of each post

• 

  cinemagrotto · Member · Nov 25, 2012 at 9:40 am

  • Copy link
  • Add topic to favorites

  Hello!

  Is it possible to change the color of the very top box of the posts, as well as the navigation bar? My site is cinemagrotto.com – an example of what I am looking for is change the color behind the first post to red: “The Cinema Grotto Website is under construction!” This goes for the navigation bar as well.

  Also, could I add a layer to the existing background? An example would be a tiled layer that only covers the center of the background, behind the posts?

  Thanks so much, and my apologies for the multiple questions!

  -Joey

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

• 

  1tess · Moderator Emeritus · Nov 25, 2012 at 3:46 pm

  • Copy link

  The multiple posts caught you in the spam filter. I have un-spammed your topic now.

• 

  1tess · Moderator Emeritus · Nov 25, 2012 at 3:53 pm

  • Copy link

  It looks like you need to purchase the design upgrade to customize the Parament theme.

  http://en.support.wordpress.com/custom-design/

• 

  cinemagrotto · Member · Nov 27, 2012 at 12:26 am

  • Copy link

  Hello 1tess,

  I actually purchased it a few weeks ago. How do I go about changing the colors as described in my initial post?

  Thanks!

• 

  designsimply · Member · Jan 20, 2014 at 11:59 pm

  • Copy link

  change the color behind the first post to red

  I see that the first post is a sticky post and you can use the “sticky” class to target just that post:

  .sticky {
  	background: #ac1210;
  	color: #eee;
  }

  To change the menu colors in the Parament theme, add this to your Appearance > Customize > CSS editor:

  #menu,
  #menu ul ul a {
  	background-color: #ac1210;
  }
  
  #menu li.current-menu-item > a,
  #menu li.current-menu-ancestor > a,
  #menu li.current_page_item > a,
  #menu li.current_page_ancestor > a,
  #menu a:focus,
  #menu a:hover,
  #menu li:hover > a {
  	background-color: #db1714;
  }
  
  #menu li:hover > a,
  #menu li:hover > a:focus,
  #menu li:hover > a:hover,
  #menu li:hover > a:active,
  #menu li.current-menu-item > a,
  #menu li.current-menu-ancestor > a,
  #menu li.current_page_item > a,
  #menu li.current_page_ancestor > a {
  	color: #c2dad6;
  }

  I see you already figured out the background image question by using this custom CSS:

  body {
  	background-image:urlhttp://cinemagrotto.files.wordpress.com/2012/11/background_tile.jpg);
  }