0
Welcome Guest! Login
0 items Join Now

Tutorial - How to Add Custom CSS File

Last Post
Search Topic

  • Tutorial - How to Add Custom CSS File

    Posted 13 years 8 months ago
    • {Edit by Henning: if you are using Gantry 4/responsive templates you can follow this tutorial
      www.gantry-framework.org/documentation/j...-a-custom-stylesheet }

      How to Add Custom CSS File

      This tutorial will guide you how to add custom css style to Gantry based template without worrying to lose the changes when the template or Gantry get updated.
      We just need to add one new Gantry feature and one custom css file. We don't need to hack any core files.

      1. Download below attachment and unpack it in your desktop
      This attachment is hidden for guests. Please log in or register to see it.

      2. Put mycustomstyle.php to this folder:
      <Joomla Root>/templates/<Your Template Name>/features/

      3. Put mycustomstyle.css to this folder:
      <Joomla Root>/templates/<Your Template Name>/css/

      4. Add your custom css codes in the mycustomstyle.css as you wish.


      How to Add Custom CSS Code Correctly

      The most frequently asked custom code I found in this forum is, how to reduce the space (margin or padding) for some element. For instant, mostly they are caused by the default .rt-block element. So, I will explain how to use the proper custom css code to override the default code.

      1. For example, we want to reduce the .rt-block padding and margin in showcase. In Gantry template, you will find:
       
<div id="rt-showcase">
  <div class="rt-grid-12 rt-alpha rt-omega">
    <div class="rt-block">
      Content here
    </div>
  </div>
</div>
      2. With firebug, you will see that the default margin and padding has been defined as:
       
/* Grid Block */
.rt-block {padding: 15px;margin-bottom: 10px;position: relative;}

      3. If we want to override the padding and the margin and put it in the custom css file above, please check the following:
      WRONG CODE
       
.rt-block {padding: 5px; margin-bottom:5px;}
      Reason why it will not work well:
      - There are many other elements that use .rt-block and they will get affected by this change

      CORRECT CODE
       
#rt-showcase .rt-block {padding: 5px; margin-bottom:5px;}
      Please note that you need to put #rt-showcase in front of .rt-block, so we can ensure that the .rt-block which get affected by the custom code is only the one inside the #rt-showcase div.

    • The following users have thanked you: Stephen Hadden, Jacob Stanfield, WQSChinaMarketing, David Copeland, rudkovskiy

    #533658

  • Re: Tutorial - How to Add Custom CSS File

    Posted 13 years 8 months ago
    • thats great, but the css file is not loaded last so it's not overwritting all styles!
      how to achieve that?
      thanks
    #535252

  • Re: Tutorial - How to Add Custom CSS File

    Posted 13 years 8 months ago
    #535256

  • Re: Tutorial - How to Add Custom CSS File

    Posted 13 years 8 months ago
    • I know all that. But I would like to have inheritence not specificity. specificity is PITA. :cheesy:
    #535261

  • Re: Tutorial - How to Add Custom CSS File

    Posted 13 years 8 months ago
    • for example I want to change the default style

      .font-family-helvetica {font-family: Helvetica, Arial, FreeSans, sans-serif;}

      to

      .font-family-helvetica {font-family: Arial, Helvetica, FreeSans, sans-serif;}

      which is applied on body id="rt-variation". It doesn't inherit it nor overweight it.

      If I change my custom style to
      #rt-variation .font-family-helvetica {font-family: Arial, Helvetica, FreeSans, sans-serif;}

      it still DOESN'T overweight it.
      Even
      body #rt-variation .font-family-helvetica
      still DOESN'T overweight it.

      SO I would like inheritence. Simple and structured.
    #535262

  • Re: Tutorial - How to Add Custom CSS File

    Posted 13 years 8 months ago
    • Hello Martin,

      I have tested it and the custom css file is loaded. Firstly, ensure you've actually made the changes to the file. Check the file again, in case permissions are causing some issues.

      Secondly, ensure you are clearing your browser cache, and Joomla cache (Admin > Site > Clean Cache), as some changes will not even show up until you clear your cache.

      Third, your code is wrong. The html code is:
       
<body id="rt-variation"  class="font-family-helvetica font-size-is-default menu-type-fusionmenu col12 ">
 
      You can see that the body both using id and class. So to override it, the css should be:
       
#rt-variation.font-family-helvetica {font-family: tahoma;}
 
      Notice that there is no "space" between "#rt-variation" and ".font-family-helvetica".
      Just change the tahoma with your font you like.

    • The following users have thanked you: PaddyThorne

    #535289

  • Re: Tutorial - How to Add Custom CSS File

    Posted 13 years 8 months ago
    • thanks for the hint. Yes it is loaded, but somewhere between other css files.
      I would like it to be loaded absolutely last after fusionmenu.css of crystalline template.
      How to achieve that? There must be some sort of function that sets the order of the css files that are loaded!
      Thanks you
    #535293

  • Re: Tutorial - How to Add Custom CSS File

    Posted 13 years 8 months ago
    • setting
      isOrderable() to true in your mycustomstyle.php
      doesn't help.
    #535304

  • Re: Tutorial - How to Add Custom CSS File

    Posted 13 years 8 months ago
    • I think the order is based on alphabetical ordering. I don't have idea about it now, but may I know why you need to order them?
    #535395

  • Re: Tutorial - How to Add Custom CSS File

    Posted 13 years 8 months ago
    • unfortunately it's not alphabetical.
      I want to order them to have my custom css at latest position so it overwrites the default ones. I don't want to use specificity in this case.
    #535413

Time to create page: 0.112 seconds