Rosalie font and color changes

• 

  joselynmiller · Member · Jun 11, 2017 at 3:21 am

  • Copy link
  • Add topic to favorites

  Hello – I just switched to the Rosalie theme, and I’d like to change some of the fonts to something not on the offered list, if possible. I’d also like to change the color of the type used on the site title and tag line. Also, I’d like to get rid of (or change the color of) the gold line with the diamond shape that underlines site and post titles. I have the business plan. Thanks!

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

• 

  thesacredpath · Member · Jun 12, 2017 at 7:23 pm

  • Copy link

  Hi there, generally we can set the two custom fonts at Customize > Fonts, or we can use fonts that would be installed by default on all computers since that is where the browsers normally look for the fonts.

  Since you are on the Business Plan, you could install a Fonts Plugin. You can see a list of what is available here.

  On the site title and tagline, I see you are now using a header image with your information in it.

• 

  thesacredpath · Member · Jun 12, 2017 at 7:27 pm

  • Copy link

  On the graphic color, add the following to your custom CSS and edit the color codes as desire.

  .entry-title::before {
  	background-color: green;
  }
  
  .entry-title::after {
  	border-color: red;
  }

• 

  joselynmiller · Member · Jun 13, 2017 at 1:51 am

  • Copy link

  Thanks for your help. I found it easy to just use a header to get the font I wanted :) I’ll try the color suggestion you gave. Is there an easy way to change the color of the menu background strip and the tab shapes on the sidebar?

• 

  thesacredpath · Member · Jun 13, 2017 at 11:14 pm

  • Copy link

  For the background color on the navigation, add the following and edit the color code as desired.

  .site-header {
  	background-color: #cc0000;
  }

• 

  joselynmiller · Member · Jun 14, 2017 at 4:44 pm

  • Copy link

  Thanks! Now I think I may want to change the type on the navigation bar, to make it stand out against a new background color. Maybe the same color scheme for the tab headings on the side bar. Is this possible? Thanks again – I’m a beginner at this :)

• 

  thesacredpath · Member · Jun 15, 2017 at 4:02 am

  • Copy link

  To make the navigation stand out a bit more, you could make the text bold and increase the font size with the following CSS which matches the titles in the sidebar widgets..

  .nav-menu li a {
  	font-weight: bold;
  	font-size: 14px;
  }
  .navbar .menu-rtl {
  	width: 100% !important;
  }

  If you wish to also change the color on the widget titles, there are two rules needed for that.

  .widget-title::after {
  	border-color: #cc0000 transparent;
  }
  .widget-title {
  	background-color: #cc0000;
  }

  The first is to change the color of the little down triangle below the block (the first color code) and the second rule is to change the color of the background on the widget title.