Log in  \/ 
x
 Use Facebook account  Use Google account
or
Register  \/ 
x
 Use Facebook account  Use Google account
or


search

How to Customize a Template

In this tutorial we'll show you, how to start customizing a Warp template and which tools you need to learn to make small modifications like changing the look and colors of a template.

Create your own template style

The recommended way to customize templates is to create your own custom style. All styles benefit from inheriting layouts and assets from the main template, which allows you to create minor customizations really fast. The main benefit from using a custom style is that it allows you to update a template without merging all your customization later. Read on how to create a new style.

Web Developer Tools

Whenever you try customizing our templates we highly recommend using Web Developer Tools like the famous Firebug plugin for Firefox. Other browsers like Chrome, Opera or Safari include very similar functionalities. Using these tools you have the possibility of easily trying out CSS styles right in your browser and inspecting existing styles to find their location in the template's CSS files.

Editing CSS styles directly in your browser

Bring up Firebug by right-clicking on an interesting element and choosing "Inspect Element". On the left side you see the html-structure of your document (make sure you have the HTML-Tab enabled). Here you have the possibility to add and edit attributes and their values. Just double-click parts of the code to edit them.

customize firebug

Even more interesting is the right side of the plugin, here you see all css-styles for the selected element. If you want to edit something just double click on it, enter your new value and press enter when you are done. You will notice that Firebug opens a new empty line so you can not only edit existing styles but also add new ones. Firebug even shows you the computed style-values for the selected element, make sure you have activated the style-tab for our example.

Finding the right CSS file in your template

As you might already have noticed, next to each css-selector (in our case #headerbar) a filename and a line number are being displayed. Just hover over it and you will see the full path to the file. To learn more about your template's directory structure have a look at this tutorial.

Disable the template's Gzip and Compression feature or any other caching script you may be using on your your site when you start out on customizations. If you don't do this, you will not see the file and line locations of the code you want to customize and you also will not see changes you made immediately. Also remember to frequently clear browser caches.

More Resources

Here are some useful resources to get you started with the web developer tools:

Where to put the CSS to style my custom content?

If you want to style your content, for example some custom markup inside your Joomla articles, please use the custom.css file, located in your template's css directory.

Learn the basics

In general one can say that template customization is not an easy task. Sometimes it might not work on your first try, but if you do invest some time, things will start to do what you expect them to. Further you don't necessarily need a profound knowledge of web programming, but you do need to know your way around HTML and CSS. Of course if that knowledge is supported by some PHP and JavaScript skills - depending on the task - that is even better. Here are some useful resources to get you started:

Make sure to read through the tutorials of the customizing section which explain how Warp templates work and also provide guidelines on how to modify them.

On Point Newsletter

Stay up-to-date with all things Pixel Point Creative!

Your cart is empty.

Use code START STRONG to save 50% off of a Joomla Developer Club Membership.
HURRY! It is only valid until 2/1/17  
JOIN US