Customizing the theme using CSS

• 

  estabrookpta1 · Member · Jul 8, 2015 at 5:06 am

  • Copy link
  • Add topic to favorites

  Hi,

  I need to change the font for “What’s New” heading on the homepage on my website…Haven’t had success yet..I have tried the developer tools on Chrome to find the CSS of the element but that’s hasn’t helped ..I know that I have to change the div “container hfeed” but sure how..

  Any suggestions??

  Thanks,
  Gauri

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

• 

  darrellschulte · Member · Jul 8, 2015 at 5:21 am

  • Copy link

  Hello Gauri,

  h1.title is what you are looking for…here’s an example.

  h1.title {
      font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
      font-size: 24px;
      font-style: normal;
      font-variant: normal;
      font-weight: 500;
      line-height: 26px;
  }

• 

  estabrookpta1 · Member · Jul 9, 2015 at 4:07 am

  • Copy link

  Hi Daschultemn,

  Thanks for your reply but I am just not seeing the h1 tag in the CSS using the developer tools. I am using Chrome…Could you help? May be I am missing something here.

  Thanks,
  Gauri

• 

  darrellschulte · Member · Jul 9, 2015 at 4:18 am

  • Copy link

  It’s in there. Are you inspecting the elements?

  https://developer.chrome.com/devtools/docs/dom-and-styles#inspecting-elements

• 

  estabrookpta1 · Member · Jul 9, 2015 at 7:29 pm

  • Copy link

  Hi,

  I found the following on CSS:

  html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 16px;
  }

  If I change the font size above (16px) it adjusts the font size of everything on page not just the “What’s new” heading on the homepage of my blog…

  Still no luck for me

  Any help is appreciated.
  Thanks,

  Gauri

• 

  thesacredpath · Member · Jul 9, 2015 at 9:55 pm

  • Copy link

  Gauri, if you wish to change only the post/page title size, add the following and adjust the 343.747% value as desired. Yes, the original number is weird, but that is due to the font being used, which is very tiny when set to a normal font size.

  .main h1.title, .main h2.title, .main h2.posttitle {
      font-size: 343.747%;
  }

• 

  estabrookpta1 · Member · Jul 10, 2015 at 4:04 am

  • Copy link

  Hi thesacredpath,

  Thanks again for helping out. The css coding that you sent worked wonderfully. Do you think you could let me know how and where you retrieved the above coding from? If this is something that I should be able to see using the Chrome Developer tools, I would be interested to know.

  It’s just that I want to understand and learn it myself too.

  Much appreciate your help.
  Gauri

• 

  thesacredpath · Member · Jul 10, 2015 at 5:51 am

  • Copy link

  I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

  In this case on this theme, the font size is set in h1 so it applies to all h1 page elements. Since we were wanting to change just the entry title, I glanced through the CSS in the web inspector panel and found this CSS selector, which was used to set the font weight. Seeing that it covered h1, h2 post and page titles, I created the rule using that selector and then added the font size I had found for h1 and then changed that to see if it did what I wanted it to do (change the font size) and it did, so there we are.

  CSS is a lot of fun, and it can be at times require a bit of looking around. It just takes time and playing around, and don’t be afraid to try things. If it doesn’t work, or if it causes your site to go wacky, you can just delete it and all is back to normal. And if things go awry, we are here to help.