Tips About WordPress Twenty Twelve Theme

posted in: WordPress | 0

To change WordPress Twenty Twelve layout, first of all you need to

  • Login your WordPress administration.
  • Go to Styles
  • Select Stylesheet (Style.css)

How to change the text larger?

To change the text of WordPress Twenty Twelve theme larger,

  • Go to the section /* Body, links, basics */ and then at body { …
    body {
    font-size: 14px;
    font-size: 1rem;
    font-family: Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    color: #444;
    }
  • Make a change at font-size to the size you want.
  • Example:
    At the default,
    font-size: 14 px; font-size: 1 rem;
    To make the text larger, just change
    font-size: 1 rem; to font-size: 1.125rem;, the new code will be
    body {
    font-size: 14px;
    font-size: 1.125rem;
    font-family: Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    color: #444;
    }

How to change text of the widget larger?

To change the text,

  • Go to widget-area .widget .textwidget
    .widget-area .widget .textwidget {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    }
  • Make change at the font-size.
  • Example:
    By default, font-size: 13px; font-size: 0.928571429rem;
    To change text larger, just replace to the size you want.  font-size: 15px; font-size: 0.975rem; and then the style code will look like the following
    .widget-area .widget .textwidget {
    font-size: 15px;
    font-size: 0.975rem;
    line-height: 1.846153846;
    }

To change heading h3 at the widget,

  • Go to .widget-area .widget h3 where as
    .widget-area .widget h3 {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
    }
  • To change the text size of widget title (h3) to the size of 15 pixel, add font-size: 15px;
  • To add the background of the widget title (h3) to dark red, add background: #800000;
  • The final code will look like this
    .widget-area .widget h3 {
    font-size: 15px;
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
    }
(Visited 3 times, 1 visits today)

Leave a Reply