0
Welcome Guest! Login
0 items Join Now

What is the Impact of Default Font Change?

Last Post
Search Topic
    • zambego's Avatar
    • zambego
    • Sr. Rocketeer
    • Posts: 146
    • Thanks: 2

    What is the Impact of Default Font Change?

    Posted 11 years 4 months ago
    • I want to change the default font size to a standard 1em (16px) size as I think this is better design.

      The notes for templates and gantry imply there are many elements based on the 14px font size.

      What will the impact be of change the default to 16px?

      What is the most elegant way to do it?

      Chuck it in the custom css of the template?

      Thanks
    #914211
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: What is the Impact of Default Font Change?

    Posted 11 years 4 months ago
    • Hi there,

      In Gantry template you will find the original sizes in variables.less file...
      @white:                          #ffffff;
@black:                          #000000;
@light-grey:                    #cccccc;
 
/* Variable for RT icons.less mixin */
//@iconSpritePath:            "../images/sprite.png";
 
 
@baseFontSize:            14px;
@baseLineHeight:               20px;
      The majority of settings are either % or em using the @baseFontSize as the starting point.

      You could create either a custom css or custom less file.

      As GANTRY4 now incorporates LESS. There are two recommended methods for dealing with your custom changes to the template.
        1. For older templates (pre FRACTURE
      LESS compiler is not active), or for those of you that want to stick with traditional CSS, you can simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where TEMPLATENAME is the name of the template e.g. rt_fracture). GANTRY4 will automatically load this CSS file. you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
        2. For those of you that want to use the power of
      LESS (compiled CSS), you can simply create a file called "template-custom.less" (that is the file name - don't change it) and put this file in the less folder of the template. Now clear your cache GANTRY4 will automatically detect this file and automatically compile the LESS code therein and put it into the compiled css for your site (along with the other compiled LESS files from the template). Note that you can just put ordinary CSS in a LESS file but you are strongly encouraged to learn more about LESS as it will speed up your development and make it clearer.

      Do not change the CSS files in the compiled-css folder as these changes will be lost whenever Gantry 4 detects a change in a LESS file, or the cache gets cleared.

      For more information on LESS please see the documentation on Gantry 4 at http://www.gantry-framework.org/documentation/joomla/advanced/less-css . Also, see this tutorial http://www.rockettheme.com/forum/index.php?f=662&p=860738&rb_v=viewtopic#p860738

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #914241
    • zambego's Avatar
    • zambego
    • Sr. Rocketeer
    • Posts: 146
    • Thanks: 2

    Re: What is the Impact of Default Font Change?

    Posted 11 years 4 months ago
    • Hi Davide,
      Thanks for the reply.
      I know how to do the customisation file.

      Are you saying I can use the @baseFontSize:

      In my custom css file?

      My question is the impact. Any thoughts on that? Or is it a bit of suck it and see?
    #914390
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: What is the Impact of Default Font Change?

    Posted 11 years 4 months ago
    • Hi there,

      You can use custom less file.

      Impact - suck it and see I'm afraid.

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #914416
    • zambego's Avatar
    • zambego
    • Sr. Rocketeer
    • Posts: 146
    • Thanks: 2

    Re: What is the Impact of Default Font Change?

    Posted 11 years 4 months ago
    • Ahh right.

      Actually maybe I didn't know as much as I thought. Didnt realise I could have a custom less as well.
    #914417
    • zambego's Avatar
    • zambego
    • Sr. Rocketeer
    • Posts: 146
    • Thanks: 2

    Re: What is the Impact of Default Font Change?

    Posted 11 years 4 months ago
    • USing a different baseFontSize in a template-custom.less file results in a blank page for me.

      hmmm.
    #914441
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: What is the Impact of Default Font Change?

    Posted 11 years 4 months ago
    • Hi there,

      As the original setting is in variables.less you need to use variables-custom.less as override. This is to ensure correct settings are used and the files don't get overwritten if you update template. For more information see below...

      As GANTRY4 now incorporates LESS. There are two recommended methods for dealing with your custom changes to the template.
        1. For older templates (pre FRACTURE
      LESS compiler is not active), or for those of you that want to stick with traditional CSS, you can simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where TEMPLATENAME is the name of the template e.g. rt_fracture). GANTRY4 will automatically load this CSS file. you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
        2. For those of you that want to use the power of
      LESS (compiled CSS), you can simply create a file called "template-custom.less" (that is the file name - don't change it) and put this file in the less folder of the template. Now clear your cache GANTRY4 will automatically detect this file and automatically compile the LESS code therein and put it into the compiled css for your site (along with the other compiled LESS files from the template). Note that you can just put ordinary CSS in a LESS file but you are strongly encouraged to learn more about LESS as it will speed up your development and make it clearer.

      Do not change the CSS files in the compiled-css folder as these changes will be lost whenever Gantry 4 detects a change in a LESS file, or the cache gets cleared.

      For more information on LESS please see the documentation on Gantry 4 at http://www.gantry-framework.org/documentation/joomla/advanced/less-css . Also, see this tutorial http://www.rockettheme.com/forum/index.php?f=662&p=860738&rb_v=viewtopic#p860738

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #914507
    • Eoin's Avatar
    • Eoin
    • Hero Rocketeer
    • Posts: 413
    • Thanks: 17

    Re: What is the Impact of Default Font Change?

    Posted 7 years 10 months ago
    • An old post but never the less. I'll ask it.

      Should the less file be named:

      variables-custom.less
      template-custom.less
      rt_vermilion-custom.less

      The advice above is a little confusing. Failing that... is there a way to override the default font-size using CSS? Obviously we can't use @baseFontSize.
    • Just a lonely web designer trying to make his way
    #1297179
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: What is the Impact of Default Font Change?

    Posted 7 years 10 months ago
    • Hi there,

      These changes are gantry 4 only.

      Templates where you want to add CSS then use templatename-custom.css where templatename is the actual template as shown in the manager e.g. rt_fracture so the filename would be rt_fracture-custom.css

      If you want to write code in LESS then use add that code to template-custom.less - note this is the file name.

      Hope this helps 8)

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #1297181

Time to create page: 0.058 seconds