Tribe Support

Tribe Support's Articles

Nick Swinford

Nick Swinford

December 14 2013

Customizing your Template Style

Customizing your template in Anahita is easy and efficient.  Templates in Anahita are based on Twitter Bootstrap and leverage the advanced functionality of LESSjs.  All the features of LESSjs won’t be covered here, but if you have a decent understanding of CSS and basic programming principle, you can easily pick them up by reading LESSjs’s documentation.

If you look into the templates folder, you’ll find two templates, Base and Shiraz.  It’s important to note that all templates in Anahita inherit from Base and then can be over ridden in your template.  Also, it’s highly recommended not to make any modifications directly to the Base template.   These modifications could be overridden in future updates.

Shariz is the default template that comes with Anahita.  You can use it as a base to create your own style or template.  If you open the css folder in the Shiraz template, you’ll see that there are two different style folders here.  Style1 already includes the compiled css from the Base template.

Like previously mentioned, Anahita templates inherit from the Base template and can be overridden to make modifications.  To view what files can be overriding take a look at the css folder in the Base template.  Each of these files can be easily overridden in Style1 by creating a matching file and making modifications to it. 

Let’s start with the variables.less file.  This is an important file as it stores all of the different variables for the template and allow for easy changes.  Variables are a feature of LESSjs which allow you to set a value and then reference that same variable throughout your styling.

In the Style1 folder, create a new folder called bootstrap and copy the variables.less file into it.  Modify the values however you’d like.  For instance, set @bodyBackground to #9d261d. This will make the body background color a nice red.  Save the file.

Less files must be compiled to create the css file. To make compilation easily, a compiler is built into Anahita, but you must first activate it. 

  1. Login to the Administration section.
  2. Hover over Extend in the menu and click on Template Manager.
  3. Click on Shiraz. This will open up the Template Edit page.
  4. In the parameters, set Compile Style to Only if changed (good for development).
  5. Click apply.
  6. Switch back to the front side and refresh the page. This will trigger the compilation process and update the style.css file in the Style1 folder of Shiraz.

The background should now be a nice red.

Once you’re finished making modification and compiling your css, it’s recommended to set Compile Style in the Template Parameters back to Never (good for production) as this will speed render the site.

It's that easy to make modifications to your template style! Have some fun and play around with all the possibilities!!

6 people liked this
Nick Swinford
Nick Swinford
December 14 2013 Permalink
This is one of my articles for the doc camp. If you see anything wrong with it or that needs improving, please let me know below in the comments or feel free to edit it and improve!
Unknown Person liked this
Rastin Mehr
Rastin Mehr
December 14 2013 Permalink
Great work Nick thank you!
Unknown Person liked this

Additional Information

Powered by Anahita