Changing background colour of menu in sonsa theme

• 

  keelybsmith · Member · Feb 29, 2016 at 11:47 am

  • Copy link
  • Add topic to favorites

  Hey I need a code that will change the colour of my main menu to white with pink writing and arial Font. Also how do I get arial fit for the whole blog?

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

• 

  keelybsmith · Member · Feb 29, 2016 at 11:48 am

  • Copy link

  Also how do I get rid of the “like” and tags and things at the bottom of posts (footer)

• 

  thesacredpath · Member · Mar 1, 2016 at 6:20 am

  • Copy link

  hi there, give the following a shot on the menu/widgets. I’ve made the widget title red (just for demonstration), but you can change it to whatever color you wish. I also included a “hover” rule (last one) for the widgets since the original hover color was white. Again you can make it any color you desire.

  .js .sonsa-secondary {
      background: #fff;
      border-right: 1px solid #ccc;
  }
  .js .sonsa-secondary .widget ul a, .js .sonsa-secondary .widget ul a:visited {
      color: #f9f;
  }
  .js .sonsa-secondary .widget-title, .js .sonsa-secondary .widgettitle {
      color: #cc0000;
  }
  .js .sonsa-secondary .widget ul a:hover, .js .sonsa-secondary .widget ul a:hover:visited {
      color: #cc0000;
  }

• 

  keelybsmith · Member · Mar 1, 2016 at 7:19 am

  • Copy link

  Thank so much that worked looks soooo much better!! How do I make the font a little bit smaller and change the font? I hate how rhw writing in menu is a spaced so far apart

  Also is there a code that hides the theme name and “blog posted at world press” in the footer?
  Thanks so much!!

• 

  thesacredpath · Member · Mar 1, 2016 at 7:42 pm

  • Copy link

  On the footer, we are not allowed to hide or edit the WordPress.com and theme footer credits per our Terms of Service (#1 Attribution). See the Frequently Asked Questions on the Custom Design support page for more information.

  You are allowed to restyle the footer credits to better fit with your design as long as they remain readable, and you are also allowed to add text to the footer, such as a copyright statement. If you need help restyling, or adding to, the existing footer credits, let us know and we would be happy to help.

  The menu is using the font you set as your Base Font in the Customizer. You are only allowed to set those two fonts, but we can override the font. The one thing we have to keep in mind though is that we need to specify fonts that are installed on all computers otherwise some visitors may see a browser substitution. Here is a good source for fonts commonly installed on Mac and Windows.

  For the navigation font family, here is what you would need.

  .main-navigation a {
      font-family: "times new roman", georgia, serif;
  }

  The following would set the same font as you have set for your headings in the customizer.

  .main-navigation a {
      font-family: "adelle-1","adelle-2",serif;
  }

  On the line spacing on the menu, the one thing to consider when adjusting the line height (spacing between lines) is that in Sonsa, the menu you see that slides out from the left is also the one that is used on touch devices (phones and tablets) so you have to make sure that the spacing is not too tight or visitors will have issues with accurate tapping. Personally the spacing on the menu items looks good to me.

  .main-navigation li {
      line-height: 1.5;
  }

  If, by chance, you are talking about the spacing below the menu and between the widgets, you can add this and adjust that spacing.

  .main-navigation, .sonsa-secondary .widget {
      margin-bottom: 90px;
  }

• 

  keelybsmith · Member · Mar 2, 2016 at 10:22 am

  • Copy link

  Thank you soooo much this forum is so helpful I love it! I’m not going to alter the line spacing and the code worked so I could get arial font

  Can I ask you another question? Haha soooo sorrry I keep thinking of things.

  When I click on the theme to change the site title and Tagline colour to a light pink I can never find the exact right light pink. Is there a CSS code where I can change the font to my choosing and also the size to arial?

  Soooo sorry for annoying you and thanks so much

• 

  thesacredpath · Member · Mar 2, 2016 at 10:27 pm

  • Copy link

  Let’s use CSS to change the color of the site title and tagline. I pulled the color you have above the images on your home page for the following, but you can adjust as desired.

  .site-title a, .site-description {
      color: #ff99ff !important;
  }

  One other suggestion on your font change on the navigation would be the following, which changes Georgia to Helvetica and serif to sans-serif.

  .main-navigation a {
      font-family: "Arial",helvetica,sans-serif;
  }