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
- 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
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
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!
This is an Awesome technique! Wonderful. Thanks for this great tutorial! GREAT!