want to customize widget areas and widgets within

• 

  thissweetworld · Member · Apr 23, 2015 at 3:38 pm

  • Copy link
  • Add topic to favorites

  Hi there,
  Two questions:
  1. I would like to be able to manipulate the widget areas (specifically the bottom one) in the template I am using – Purpose. This bottom widget area seems to be divided into columns so that when I try to put a widget that has a lot of text, it shows up in a very narrow column.
  2. I want to make the About Me widget smaller in size and also use a different font from the blog posts. Possible?
  Thank you!

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

• 

  thesacredpath · Member · Apr 24, 2015 at 3:00 am

  • Copy link

  Hi there, the footer widgets in Purpose have the first 3 at 20% width, and then the fourth widget is 40% for a total of 100%. This is where the width for the first three are set

  .footer-widgets .widget {
      width: 20%;
  }

  and this is for the fourth widget

  .footer-widgets .widget:nth-child(4n+4) {
      width: 40%;
  }

  The key to resizing them is to remember the first three plus the fourth have to add up to no more than 100%.

  For your about me widget, you might try setting the gravatar alignment to “left” in the widget itself and that way the text would wrap around it making the overall widget smaller in size.

  With font families if you want to go with something different, keep in mind that the browser first checks for a custom font, then it looks to the user’s computer, and given there are only two choices under Fonts in the Customizer, you will have to stick with one of the cross-browser fonts that would typically be installed on all computer. Here is a resource for web safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp .

  It is also a good practice to specify more than one font so that there are fallbacks in the event that a visitor’s computer doesn’t have your preferred font installed. Here is a resource for some normal font stacks: http://webdesign.about.com/od/fonts/qt/web-safe-font-stacks.htm .

  We can use the about me (gravatar) widget unique CSS id to target only that particular widget like this.

  #gravatar-4 p {
      font-family: arial, helvetica, sans-serif;
      line-height: 1.4;
      font-size: 110%;
      color: #cc0000;
  }