4 replies to this topic

[michael_b]

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!

[batman]

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]

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. 

[James B]

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

 

[michael_b]

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