Jump to content


Photo
- - - - -

Changing Framework's font size and line height with LESS/CSS

less css fonts

Best Answer James B , 21 March 2013 - 12:20 AM

Hi there, I've not delved into LESS to much, but as far as I understand it if you want to set the default size in LESS then you can just enter the LESS command straight into the style.css like

 

 

 
@font-size:14pt;
 

 

that then sets the default text size to 14pt. Then when you're coding or editing other sections you can just put @font-size instead of writing out the full css.

 

If you've not seen the theme center yet, take a look at - http://demo.pagelines.me/theming/ which has some examples of the LESS variables and the cheat sheet here - http://demo.pagelines.me/cheat-sheet/

 

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 michael_b

michael_b

    Member

  • Members
  • 12 posts
  • Country: Country Flag

Posted 19 March 2013 - 06:46 PM

I'm trying to change Framework's global default font size and line height on my site. I currently use the Customize plugin and am familiar with the Custom Code section as well. From the docs it looks like these two LESS variables are: 

 
@font-size:
@line-height:
 
I guess I am just at a loss to where I should change these. I tried placing these along with the font size I want in the custom code section...but it didn't work. 
 
Could someone just give me some basic guidance on how to set one of these two? I could be messing up the format.
 
Thanks!


#2 batman

batman

    Bat Learning

  • Members

  • 1776 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 March 2013 - 01:52 AM

Hi michael

You can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

For example

Please Login or Register to see this Hidden Content

It is advisable to learn how to do this on your own too.  

Check out 

Please Login or Register to see this Hidden Content

 

If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info. 

Please Login or Register to see this Hidden Content

 

Also please be sure to watch our Firebug video tutorial here.

Please Login or Register to see this Hidden Content


  • michael_b likes this

#3 michael_b

michael_b

    Member

  • Members
  • 12 posts
  • Country: Country Flag

Posted 20 March 2013 - 02:33 PM

Thanks for info. The tools you point out are very useful. I have used them and made plenty of changes with the Pagelines Customize plugin. My question is actually about changing the base level fonts of the framework. Bootstrap documentation points out that these can be changed and then the rest of the font scale adjusts from those two factors. 

 

"The typographic scale is based on two LESS variables in variables.less@baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts." 

Please Login or Register to see this Hidden Content

 

What I am seeking is the manner in which those can be changed in Framework. 



#4 James B

James B

    Advocate

  • Moderators
  • 4985 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 March 2013 - 12:20 AM   Best Answer

Hi there, I've not delved into LESS to much, but as far as I understand it if you want to set the default size in LESS then you can just enter the LESS command straight into the style.css like

 

 

Please Login or Register to see this Hidden Content

 

that then sets the default text size to 14pt. Then when you're coding or editing other sections you can just put @font-size instead of writing out the full css.

 

If you've not seen the theme center yet, take a look at -

Please Login or Register to see this Hidden Content

which has some examples of the LESS variables and the cheat sheet here -

Please Login or Register to see this Hidden Content



 



#5 michael_b

michael_b

    Member

  • Members
  • 12 posts
  • Country: Country Flag

Posted 21 March 2013 - 12:24 AM

Thanks James. This is exactly what I was looking for to dive in a bit deeper to theme modifications.







Also tagged with one or more of these keywords: less, css, fonts