Gateway Theme-CSS

• 

  lboczek181 · Member · Aug 13, 2015 at 4:24 pm

  • Copy link
  • Add topic to favorites

  Hi, I was wondering if anyone knows the CSS code to flip the color of the menu bar and the font? I want my menu bar to be blue and my font to be white. Thanks!

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

• 

  thesacredpath · Member · Aug 14, 2015 at 7:25 am

  • Copy link

  Hi there, the first two CSS rules will allow you to change the color of the menu bar and text in the menu when the full menu is active, and it will also change the color of the touch device menu items as well. The third allows you to change the color of the touch device toggle bar.

  .main-navigation {
      background: #3333ff;
  }
  .main-navigation a {
      color: #ffffff;
  }
  .menu-toggle {
      background: #3333ff;
      color: #ffffff;
  }

• 

  lboczek181 · Member · Aug 14, 2015 at 1:11 pm

  • Copy link

  Thank you so much! This is great.

• 

  lboczek181 · Member · Aug 14, 2015 at 1:22 pm

  • Copy link

  While we’re at it-do you know how to change the color of the footer? My site is white, blue and silver, so the black kinda clashes. Thank you!

• 

  thesacredpath · Member · Aug 14, 2015 at 7:06 pm

  • Copy link

  Super, glad that did the trick. The following will change the footer background color to the same blue as your navigation.

  .footer-wrap {
      background-color: #4775a3;
  }

• 

  lboczek181 · Member · Aug 18, 2015 at 7:20 pm

  • Copy link

  Thank you!!!

• 

  lboczek181 · Member · Aug 18, 2015 at 8:43 pm

  • Copy link

  Ok since you’re so good at this, is there a way to change the color of the links and the rollovers? For some reason my settings are now a gray color and it’s hard to read in the menu bar and the links within text blend in so you can’t tell it’s a link.

• 

  thesacredpath · Member · Aug 18, 2015 at 10:50 pm

  • Copy link

  We can do that. This will allow you to change the menu hover color.

  .main-navigation li:hover > a, .main-navigation li.focus > a {
      color: #ccc !important;
  }

  If you wish to change the color of the current menu item (such as home when you are on the home page, add the following and adjust the color as desired.

  .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a {
      color: #cc0000;
  }

• 

  lboczek181 · Member · Aug 19, 2015 at 10:10 pm

  • Copy link

  You’re a lifesaver! Thank you.

• 

  lboczek181 · Member · Aug 19, 2015 at 10:51 pm

  • Copy link

  OK next question haha. Is there a way to change the background of the slideshow feature? I have it on my main page.

• 

  thesacredpath · Member · Aug 20, 2015 at 8:23 pm

  • Copy link

  To edit the colors of the background in the slideshows, add the following and edit the color codes of the background and border.

  .slideshow-window {
      background-color: #222;
      border: 20px solid #222;
  }

• 

  lboczek181 · Member · Aug 20, 2015 at 8:27 pm

  • Copy link

  Perfect! Thanks so much, again!!

• 

  thesacredpath · Member · Aug 20, 2015 at 8:36 pm

  • Copy link

  You are welcome.

• 

  rasulijaz · Member · Aug 25, 2015 at 7:09 pm

  • Copy link

  How about editing the text color in this box?

• 

  rasulijaz · Member · Aug 25, 2015 at 7:09 pm

  • Copy link

  As in, How do I edit the text color in the slideshow caption box?
  Thank you!

• 

  thesacredpath · Member · Aug 25, 2015 at 7:15 pm

  • Copy link

  Hi @rasulijaz, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.

• 

  lboczek181 · Member · Aug 26, 2015 at 3:37 pm

  • Copy link

  Hey there-this didn’t work to change the background of my slideshow. Have you had this issue before?

• 

  thesacredpath · Member · Aug 26, 2015 at 8:47 pm

  • Copy link

  @lboczek, let’s add the !important keyword to force it to override the original CSS, like this.

  .slideshow-window {
      background-color: #b2c2e0 !important;
      border: 20px solid #b2c2e0 !important;
  }