background color on Patch theme and custom fonts

• 

  mbtauk · Member · Jun 15, 2015 at 2:37 pm

  • Copy link
  • Add topic to favorites

  Hi, I upgraded to the premium patch theme and I’m having trouble finding the CSS options to change the appearance. I wanted to try a yellow border with a blue font. I can find the option to change the border color, but not for the fonts. The CSS section is mostly blank and I can’t find the option to change. Wanted to make the font larger as well.

  The site is mbtauk.wordpress.com.
  Thanks!

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

• 

  kathrynwp · Staff · Jun 17, 2015 at 3:53 pm

  • Copy link

  Hi there,

  I wanted to try a yellow border with a blue font.

  If you want a yellow border around the entire page, then you would select yellow as the Main Accent colour in the Customizer. Currently, you’ve selected Blue, so that’s why a blue border is showing around your site.

  This is the colour I mean:

  

  Wanted to make the font larger as well.

  We need to target specific elements to change their appearance, so could you let me know specifically which text elements you’d like to be blue and larger?

  For example, the post titles on the homepage?

  The CSS section is mostly blank and I can’t find the option to change.

  The CSS editor is always blank by default – what you add there are CSS styles which override the theme’s defaults. You won’t see the theme’s stylesheet there – you’ll need to use a browser inspector to find the elements to target. Here are some very helpful posts that will help you customize your site with CSS:

  An Intro to CSS: Finding CSS Selectors

  An Intro to CSS, or How to Make Things Look Like You Like

  Intro to CSS: Previewing Changes with the Matched Rule Pane

  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

• 

  mbtauk · Member · Jul 23, 2015 at 2:38 pm

  • Copy link

  Thank you for these links, I have the site pretty close to what I want but there’s one more thing I can’t figure out. I changed the value for masthead to be the color I want but it changes the whole menu as well. I wanted to have blue lettering for the blog title but keep the menu text black, is there a way to differentiate the title and the menu within the masthead?

• 

  kathrynwp · Staff · Jul 23, 2015 at 5:43 pm

  • Copy link

  Try removing this:

  #masthead a {
       color: #0a63c9;
  }

  and add this instead, which targets only the site title:

  .site-title a {
       color: #0a63c9;
  }

  That should do the trick – let me know how it goes.