Editing widget font

• 

  stormsocialmedia · Member · Jan 14, 2017 at 2:12 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I have added the Gravatar widget and social media icons widget to the sidebar. Is there a way of editing the font on these? I would like to underline the title of the Gravatar widget and also the Find Us On Social Media wording bigger. Is this possible?

  Many thanks.

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

• 

  melindahelt · Staff · Jan 16, 2017 at 1:14 am

  • Copy link

  Hi

  Here’s the code that you’ll need to add to your custom CSS editor.

  h1.widget-title {
      border-bottom: 1px solid white;
      font-size: 30px;
  
  }

  For Border-Bottom, the first value defines the thickness of the border, the second the border style (solid, dotted) and the last, the color.

  If you want to read more about the options for those properties, take a look at http://www.w3schools.com/css/css_border.asp.

  For the font size, you can change the px value to any number you’d like.

  Hope this helps! Let us know if you have any other questions.

• 

  stormsocialmedia · Member · Jan 16, 2017 at 9:26 am

  • Copy link

  Hi,

  Thank you so much for this.

  It worked perfectly for the Gravatar widget but for the Social Media icons widget, the dashed border is still there and the title hasn’t changed size. I have tried playing around with coding but I can’t get it to look right.

  What am I doing wrong!!

  Thanks

• 

  melindahelt · Staff · Jan 16, 2017 at 4:22 pm

  • Copy link

  Hi

  You’ll need to add the following to remove the dashed line above the icons

  .widget ul li {
      border-top: none;
  }

  The titles for both widgets are the same size at 30px, but the Welcome was typed in all caps, and the Social Media in title case, so that’s why they are looking a little different. You can change that by re-typing one of them in the widget title area.

  Hope this helps!

• 

  stormsocialmedia · Member · Jan 18, 2017 at 7:58 am

  • Copy link

  Thank you! The code worked perfectly for getting rid of the dashed line.

  I re-typed the title for the social media widget using caps but the font size is still different. Is there another way to enlarge it?

  Many thanks

• 

  omkarbhagat · Member · Jan 18, 2017 at 8:10 am

  • Copy link

  Hi @stormsocialmedia,

  Both “Find us on social media” and “Welcome” are of the same font-size.

  Going a bit technical here – If you’re using chrome, you can right click on either of those texts and click on inspect. It will show you the font-size: 30px; in the styles tab.

  If you wish to enlarge it, you can change that 30px to a higher number.

  Let us know if that works for you :)

• 

  stormsocialmedia · Member · Jan 18, 2017 at 11:53 am

  • Copy link

  Hi,

  They appear to be the same size but when I look at the website the social media seems to be a lot smaller.

  I will leave it as it is for now. Thank you