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