Joomla

Add your own css file to a Gantry Powered template

Recently, Rockettheme’s Gantry framework made the transition from using CSS to LESS. If you occasionally dabble in CSS, like me, you might be lost at first. You want to add your own CSS, but where do you put it?

Personally I think adding a custom CSS file has become simpler for Ganty based templates. If you follow the simple steps below you can easily add your own CSS file.

Locate the LESS folder

media_1360186655748.png
  • Go to the “Templates” folder and open the folder for your Gantry powered Template.
  • Next, find the “less” folder; and open it.

Create a .less file

media_1360187049947.png

Create a file in the less folder, and name it myfilename.less . Myfilename can be anything you want; just make sure to use the .less extension

In your .less file, write the CSS you want to write. Plain old CSS will suffice, but of course you can also use LESS gems like variables and mixens to spice things up.

Open and edit global.less

media_1360186931036.png

Edit the file “global.less” and edit it. Adding the following rule will make Gantry include your CSS when compiling the CSS files:

@import “myfilename.less”;

Finally, save the file and reupload it. When you visit the page and clear the cache, you’ll see that your CSS is included. Victory!

Advertisements

Categories: Joomla

Tagged as: , , ,

1 reply »