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

  • 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!

1 thought on “Add your own css file to a Gantry Powered template”

Comments are closed.

Discover more from PowerUser Guide

Subscribe now to keep reading and get access to the full archive.

Continue reading