Changing title of widget in twentyfourteen

• 

  blueglu10 · Member · Sep 12, 2014 at 4:13 pm

  • Copy link
  • Add topic to favorites

  Hey everyone,

  I am trying to change the font of my facebook and twitter widgets but so far it’s not working yet. I would like to change font type, size and color to arial, 16px and black respectively.
  One thing I tried made the twitter title black but did nothing for the facebook title nor for size or font.

  Any suggestions?

  Ps I am new to all this so if you have any other suggestions or tips for my blog I would love the feedback!

  My blog is blueglu10.wordpress.com

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

• 

  thesacredpath · Member · Sep 12, 2014 at 5:22 pm

  • Copy link

  Are you taking about the title on the Twitter widget that currently says, “Follow me on Twitter”?

  If so, what we can do is to use the Twitter widget specific class and target the widget title with the following.

  .widget_twitter_timeline .widget-title {
      color: #000000;
      font-size: 16px;
      font-family: Arial, helvetica, sans-serif;
  }

  For the title on the Facebook like box, that is a Link, so we can target as we did above, and specify the link element ( a ) in the selector like this:

  .widget_facebook_likebox .widget-title a {
      color: #000000;
      font-size: 16px;
      font-family: Arial, helvetica, sans-serif;
      font-weight: bold;
  }

• 

  blueglu10 · Member · Sep 12, 2014 at 5:52 pm

  • Copy link

  Fantastic this worked perfectly! Thanks so much :D

• 

  thesacredpath · Member · Sep 12, 2014 at 5:52 pm

  • Copy link

  One additional thing I will mention is that the theme you are using is a responsive width theme which adjusts for browser window width and device screen sizes, so I would suggest going to Appearance > Mobile and deactivate the dedicated Mobile theme. It will give a more consistent look to your site across devices.

• 

  thesacredpath · Member · Sep 12, 2014 at 5:53 pm

  • Copy link

  You are welcome.

• 

  blueglu10 · Member · Sep 12, 2014 at 6:11 pm

  • Copy link

  Hmm I tried that but I don’t think it worked..?

• 

  thesacredpath · Member · Sep 12, 2014 at 7:13 pm

  • Copy link

  Hmmm, it worked for me with the web inspector, but it appears that it will need a little modification, at least with font size, to make it work in the custom CSS. Add the !important attribute to the font size declarations like this:

  .widget_twitter_timeline .widget-title {
      color: #000000;
      font-size: 16px !important;
      font-family: Arial, helvetica, sans-serif;
  }
  .widget_facebook_likebox .widget-title a {
      color: #000000;
      font-size: 16px !important;
      font-family: Arial, helvetica, sans-serif;
      font-weight: bold;
  }

• 

  blueglu10 · Member · Sep 12, 2014 at 7:21 pm

  • Copy link

  oh so terribly sorry, meant turning off the response to mobile devices

• 

  thesacredpath · Member · Sep 12, 2014 at 7:51 pm

  • Copy link

  You may have to clear the browser cache on your phone or tablet to see the change. They rely on cached pages heavily to lower bandwidth usage.