10 replies to this topic

[janpeeters]

Hi,

 

I'm learning to use less for website customisation.

So far I'm really enthousiastic about the idea of variables.

My custom style.less file works but one thing I don't get to work is the following:

 

I'm using Typekit for www.panassembla.com

Typekit is working when I use it in the conventional way, but when I add the Typekit font to the variables in style.less like this it doesn't load the Typekit font but shows Times New Roman:

 

@baseFontFamily:        "ff-tisa-web-pro",georgia,serif;
@baseFontWeight:        400;
 

For now I've reverted to adding the font family to classes (this works like it should) but I'd love to get this working as a variable.

Hopefully you know what I'm doing wrong.

 

Thanks, Jan

[Danny]

OK, I don't use Typekit personally but once you have created your @baseFontFamily, how are you adding it to your code ?

 

Is it like this for example,

Please Login or Register to see this Hidden Content

[janpeeters]

Hi Danny

 

I wasn't aware that you have to place the @baseFontFamily variable in the classes in your custom CSS too. I presumed that once you set a variable it would cascade through onto the whole site where basefont is used like body text etc. I thought it to work like when you set a font in Typography in Pagelines Settings.

Wouldn't that be more logical and easier? You set your font in style.less and then it is applied to all classes that use the base font? Or I'm I not getting something?

 

Jan

[Simon_P]

Its a matter of timing, the variables are loaded 1st, you style.less is loaded way after that.

 

So you have 2 choices.

 

1. Use the pless_vars filter to change the constants.
2. make a folder /less/ in your child theme and copy variables.less into it, now edit it.

[janpeeters]

Hi Simon,

 

Thanks. Working with pless_vars filter seems a more durable solution since if you guys add something to Pagelines variables.less it won't be visible in my site if I copy the variables.less file to my child theme.

I have none experience however with using filters. I have used hooks in the past and added them to my child theme's functions.php. I've looked in docs and forum, but couldn't really wrap my head around how to implement filters. Could you give me some clues?

 

Thanks, Jan

[Simon_P]

Somthing like this then:

 

 

 

Please Login or Register to see this Hidden Content

[janpeeters]

Okay thanks and I place that in functions.php?

[Simon_P]

In a child theme or customize plugin yes, then click the flush less button.

[janpeeters]

Brilliant, gonna test it tomorrow. Thanks!

[Jenny]

Let us know how it goes!

[janpeeters]

Hi Jenny, thanks for informing, I had to postpone trying it, urgent work came up. But I will try next week. Jan