0
Welcome Guest! Login
0 items Join Now

Your first Gantry 4 CSS custom file - OR - LESS custom file

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3219
    • Custom work done

    Your first Gantry 4 CSS custom file - OR - LESS custom file

    Posted 5 years 5 months ago
    • You need to stylize something on your template but have no idea in the maze of CSS and LESS files what you should be changing.
      NOTHING!
      We never alter the original stylesheets.
      This method of creating a Custom CSS file works with both Joomla 2.5.x and Joomla 3.x.
      Unless your an experienced CSS user and need the advantages of LESS's more powerful syntax I would stick with using the CSS method. Usual tasks as colour changes, logo positioning and other basic styling customizations are well suited for the CSS method.

      This guide is divided into FOUR parts:
      - This first part deals with using a custom CSS file
      - the second part deals with using a LESS file Your first LESS custom file .
      - The third part is an addendum to show you a better way to look at the master.CSS file
      Better debugging of the Master compiled CSS file .
      - the fourth part is a quick guide to mediaqueries Using MediaQueries in your CSS custom file .

      Your first custom CSS file

      So we will use a custom CSS file to do our styling. In your \templates\rt_templatename\css folder create a file called rt_templatename-custom.css and save your CSS code there.

      Let's say your using our Vermilion template, then your custom CSS file should be called rt_vermilion-custom.css.

      So to create our new file, we go to the ..\templates\rt_vermilion\css folder. The new custom CSS file is ALWAYS this format -> rt_templateName-custom.css
      The "rt_templateName" comes from the name of the template folder your applying the file to. In our case the folder name is "rt_vermilion". We add the "-custom" part to denote to Gantry this a overriding CSS file. Finally the file extension is ".css".
      So "rt_vermilion" + "-custom" + ".css" gives us "rt_vermilion-custom.css".

      and you would create the file in the \templates\rt_vermilion\css folder using one of these three methods:
      • on a local server just right click and create a the new file
      • with your Cpanel right-click and from the dialogue window select "Create new file"
      • with your FTP client right-click and from the dialogue window select "Create new file"

      In the latest Joomla 2.5.xx and Joomla 3.x CMS's you can create the file and then edit it while in the Template Manager screen:

      This image is hidden for guests.
      Please log in or register to see it.


      Just follow the steps 1-5.

      Browser Specific custom CSS file

      You can also create a "browser specific" custom CSS file. For example let's say we need a custom file to handle some of your IE9 oddities, we would create in the /css folder a file called rt_templatename-custom-ie9.css and save your CSS code there.
      Here are some other browser examples:

      Chrome - webkit
      rt_templatename-custom-webkit.css

      FireFox - gecko
      rt_templatename-custom-gecko.css

      Internet Explorer - ie
      rt_templatename-custom-ie8-11*.css

      Opera - opera
      rt_templatename-custom-opera.css

      Android - NOT using the built-in OS browser
      rt_templateName-custom-android.css

      Safari - safari
      rt_templatename-custom-safari.css
      rt_templatename-custom-safari6.css

      Safari - ipad
      rt_templateName-custom-ipad.css



      The one advantage of this method in Joomla 2.5.x is that both of these files will be visible for direct editing in Admin -> Extend -> Template Manager -> style|TEMPLATES (choose this one) -> click on Rt_template_name Details and Files -> Template Manager: Customise Template -> Stylesheets
      Joomla 3.x will also show you the LESS folder so you can edit both directly.

      Both of these methods will guarantee that your custom coding will NEVER be overwritten by a template update.

      So you've replcaed the template logo with yours and it doesn't fit right. Custom CSS to the rescue!
      First for those of you who don't take advantage of the benefits of using FireBug for Firefox or Chrome Developer Tools, I will do this using the "Blind Faith" method.

      In this example I'm using our Vermilion template. The original logo is 80px * 65px. The new logo will be 227px * 130px.
      Typically we store the Logo in a container class that provides just enough room for the logo, typically defined as ".logo-type-vermilion #rt-logo".
      Obviously if your logo is bigger than the defined container, parts of your logo will be cutoff due to the container boundaries.

      This image is hidden for guests.
      Please log in or register to see it.


      We have to increase the container size (3).

      The original container code looks like this:
      .logo-type-vermilion #rt-logo {
      	width: 80px !important;
      	height: 65px !important;
      }

      All we have to do is replace the width and height with our new values, 227 & 130. So the new code is:
      .logo-type-vermilion #rt-logo {
      	width: 227px !important;
      	height: 130px !important;
      }

      In your \templates\rt_templatename\css folder create a file called rt_templatename-custom.css and save your CSS code there.
      You should check that you didn't have a typo by entering this URL in your browser -> http://mysite.com/rt_templatename-custom.css . If you can see the file then you can proceed.

      Editing your rt_templatename-custom.css file :

      You can edit your file the traditional way via FTP but the better way is to simply edit in your Admin end.

      Now that the file is created we'll enter the code via the Template Manager. Go to Admin -> Extend or Extensions -> Template Manager ->Click on the Templates TAB -> Click on your template (Vermilion)-> Template Manager: Customise Template -> Stylesheets -> Select the CSS file to edit (rt_vermilion-custom.css)

      This image is hidden for guests.
      Please log in or register to see it.


      In the Template StyleSheets Editor, enter your new code:

      This image is hidden for guests.
      Please log in or register to see it.


      Save and exit.

      Now refresh your back and front end caches and inspect your logo and it should be properly visible.

      This image is hidden for guests.
      Please log in or register to see it.



      The second method I call "See it for Yourself - don't trust others".

      This image is hidden for guests.
      Please log in or register to see it.


      With (1) you can see the logo container (3) is too small to fit the bigger logo (2)

      So we need to change that "width: 80px; height: 65px" (3) to "width: 227px; height: 130px".
      This alone won't do what we want as there is still existing valid code, the "width: 80px; height: 65px" that the template will persist to use. So in our custom file we have to override that original code. We do this with the "!important" attribute.
      So our code will be this "width: 227px !important; height: 130px !important;".
      We'll create our new custom CSS file and enter the code we used above.

      Refresh the back and front end caches:

      This image is hidden for guests.
      Please log in or register to see it.


      Now you can see that container size (1) is larger to accomodate our logo. Also you can see the presence (2) of our custom code and that it has properly overridden the templates original code (3).

      Congratulate yourself for a job well done
      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 1 year 10 months ago by DanG.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3219
    • Custom work done

    Re: Your first LESS custom file

    Posted 4 years 11 months ago
    • This second section deals with creating a custom LESS file to hold your styling changes.

      Both methods are safe-proof from template updates as the custom file will NEVER be included in our templates. Write it once and you don't need to worry
      This image is hidden for guests.
      Please log in or register to see it.


      This is an example of how to use the custom CSS-Less file facility to create some overrides. In a short piece of coding like this it may not seem to be a great benefit. However on a site with a lot of conventional CSS styling, as you constructed longer and longer selector names to specify inheritance, the code written looks messy and a month later hard to figure out what you did.
      By nesting selectors within other selectors, this makes style sheets shorter and inheritance much clearer.

      Before you start, please review Less-Css

      Specifically we'll create some code that will enable you to switch the display of the RokSprocket - Features - Showcase layout - image to the right and content left, compared to the default image to the left and content right:

      This image is hidden for guests.
      Please log in or register to see it.


      So go to your image left and content right RokSprocket module parameters and in the Advanced TAB -> Module Class Suffix set it to 'showcase-right':

      This image is hidden for guests.
      Please log in or register to see it.


      With Gantry 4 you can create custom LESS files of the format: /templates/rt_fracture/less/[LESS_FILE_NAME]-custom.less and these will get picked up and compiled into the main compiled CSS file. Gantry-4 compiles all the relevant .less files into one Master CSS file

      In the RocketLauncher install of Fracture the available files are:
      * /templates/rt_fracture/less/grid-responsive.less
      * /templates/rt_fracture/less/gantry-core.less
      * /templates/rt_fracture/less/joomla-core.less
      * /templates/rt_fracture/less/template.less
      * /templates/rt_fracture/less/utilities.less
      * /templates/rt_fracture/less/error.less
      * /templates/rt_fracture/less/main-light.less
      * /templates/rt_fracture/less/demo-styles.less

      So open /templates/rt_fracture/less/template.less and Save it as a copy called /templates/rt_fracture/less/template-custom.less. Delete all the code except the version & license information.
      This is where we'll enter our new overriding code.

      The code that we need to accomplish this is:
      float: right !important; margin-left: 25px !important; margin-right: 0px !important;
      padding-left: 25px;
      but instead we're going to write some LESS code to show you one of the features of Less, i.e. Nested Rules .

      Our root rule is the module class suffix .showcase-right and inside of it we'll place the two nested rules that we need, .sprocket-features-img-container img and .sprocket-features-content.

      So it looks like this:
      .showcase-right {
          .sprocket-features-img-container img {
              float: right !important;
              margin-left: 25px !important;
              margin-right: 0px !important;
          }
          .sprocket-features-content {
              padding-left: 25px;
          }
      }
       

      When the master file gets compiled, in my case master-962d1d890aa09ea141d0f1bfa5257987.css the CSS code that is output looks like this:
      .showcase-right .sprocket-features-img-container img {
      float: right !important;
      margin-left: 25px !important;
      margin-right: 0px !important;
      }
      
      .showcase-right .sprocket-features-content {
      padding-left: 25px;
      }

      Refresh your back and front end caches:

      This image is hidden for guests.
      Please log in or register to see it.


      Now you image is on the right and content on the left.
    • Last Edit: 3 years 6 months ago by DanG.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3219
    • Custom work done

    Re: Better debugging of the Master compiled CSS file

    Posted 3 years 9 months ago
    • P.S.
      One last tip for you.
      To help yourself in developing any custom.css or custom.LESS and us in debugging, in your Admin -> Template Manager -> Advanced -> LESS Compiler -> Set CSS Compression to OFF and Debug Header to ON.

      This image is hidden for guests.
      Please log in or register to see it.


      So instead of a long undecipherable string of CSS code (HARD) in your development tools:

      This image is hidden for guests.
      Please log in or register to see it.


      You'll see this (EASY):

      This image is hidden for guests.
      Please log in or register to see it.


      Here you see the LESS and custom files that were used to compile the master.CSS file and the CSS code is much more formatted.

      This also makes it much easier for us to debug your sites.
      Thanks
    • Last Edit: 3 years 6 months ago by DanG.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3219
    • Custom work done

    Re: Using MediaQueries in your CSS custom file

    Posted 3 years 6 months ago
    • So you've created your custom CSS file, congrats.
      Now you have an issue with some of your content needing some additional styling when viewed on a mobile device while using one or our responsive RocketLauncher's or stand-alone responsive template.

      First step:
      In your template folder find this file -> Joomla_Root\templates\rt_templateName\less\mediaqueries.less

      This file contains all the mediaqueries that Rockettheme uses for that specific template.
      I've attached my cheatsheet version to the end of this post. Here is what a mediaquery should look like when properly formatted:
      /**
      * @version   $Id: mediaqueries.less 12813 2013-08-16 21:57:09Z arifin $
      * @author    RocketTheme http://www.rockettheme.com
      * @copyright Copyright (C) 2007 - 2014 RocketTheme, LLC
      * @license   http://www.rockettheme.com/legal/license.php RocketTheme Proprietary Use License
      */
      
      // Large Mode
      @media only screen and (min-width: 1200px) {
      	html selector(s) here {
      		CSS code goes here;
      	}
      }
      
      // Desktop Modes
      @media only screen and (min-width: 960px) and (max-width: 1199px) {
      	html selector(s) here {
      		CSS code goes here;
      	}
      }
      
      // Tablet Modes
      @media (min-width: 768px) and (max-width: 959px) {
      	html selector(s) here {
      		CSS code goes here;
      	}
      }
      
      // Mobile Modes
      @media (max-width: 767px) {
      	html selector(s) here {
      		CSS code goes here;
      	}
      }
      
      // Small Screen Mobile Modes
      @media only screen and (max-width: 480px) {
      	html selector(s) here {
      		CSS code goes here;
      	}
      }

      Next we have to see what mediaquery is used when the template is viewed on a mobile (tablet or mobile phone) device.
      The easiest way to do this for me is to use Chrome Developer Tools or CANARY (beta browser) Chrome Developer Tools.

      Using the latter set to a Sony Sola smartphone, I get this view:

      This image is hidden for guests.
      Please log in or register to see it.


      As a general rule our mediaqueries are applied to the #1 - rt-module position -> rt-grid statement or to the #2 - rt-module position -> rt-grid -> rt-block statement.
      In this example we are using the mediaquery:
      // Mobile Modes
      @media (max-width: 767px) {
      	html selector(s) here {
      		CSS code goes here;
      	}
      }

      This is where you would change the styling to what you need. This code would be called from your rt-templateNmae-custom.css file.
    • Last Edit: 3 years 6 months ago by DanG.

Time to create page: 0.131 seconds