Jump to content

- - - - -

How to change font size?

This topic has been archived. This means that you cannot reply to this topic.
3 replies to this topic

#1 overachiever



  • Members
  • 2 posts

Posted 26 December 2012 - 06:37 AM

I would like to know how to change the font size in the pagelines framework.  I was looking for the option in the typography tab to change the font size of the menu for instance, but I cannot find any options to change it on the different elements.  Please point me in the right direction.  

#2 Rob


    One Smart Egg

  • Members
  • 13575 posts

Posted 26 December 2012 - 08:00 AM

Font size is not controlled by a setting.  There are too many variables to permit this.  For example, fonts can be set for static sites in pixel height, but responsive sites want to use the em tag to ensure the site's have continuity in many browsers and devices.


So, the solution is to use a tool like Chrome's Inspection Tool or

Please Login or Register to see this Hidden Content

to identify the specific set of text you want to change, then apply CSS to your Custom Code / CSS Rules to change it, applying the change to the specific element containing that text. For more information about font styling, see

Please Login or Register to see this Hidden Content


I know that's confusing, so let me elaborate just a bit.  Each thing you do in PageLines falls into some styled element, like a paragraph or a list item.  (<p> or <li>, respectively)  and these usually have a class or ID applied to them.  Find the correct class or ID and you'll see something in the CSS like font-size: 12px;


Just change that 12px to 18px and you've increased the size.  Firebug and Chrome's Tool allow you to test first. If it's the way you like, copy the code from those tools and drop it at Dashboard > PageLines > Site Options > Custom Code > CSS Rules.

#3 overachiever



  • Members
  • 2 posts

Posted 27 December 2012 - 08:38 AM

Hello Rob,


Thank you for the detail explanation, it was very insightful.  I did have one more question now that I have looked into the tools you recommended.  For the styling I know now that I can just change what I want in the firebug or google developer tool and copy and paste it into the theme editor but how can I change other elements for instance the javascript or a theme function.  For instance with the styling I simply start at the .body and past but how is it possible to cut and paste other elements beside styling?  



#4 Danny


    Is Awesome!

  • Moderators
  • 19817 posts

Posted 27 December 2012 - 09:08 AM

I apologise but I am not quite sure you're referring to, can you go into greater detail.