How to customize a theme

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

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 theme'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.

Web Developer Tools

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 theme

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.

Tip: Disable the theme'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 or WordPress articles, please use the custom.css file, located in your template's css directory.

Create your own theme style

The recommended way to customize themes is to create your own custom style. Styles are variations of the default theme and are similar to the concept of child themes in Wordpress or sub themes in Drupal. All styles benefit from inheriting layouts and assets from the main theme, 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 theme without merging all your customization later. Read on how to create a new style

Learn the basics

In general one can say that theme 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 themes work and also provide guidelines on how to modify them.

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!

Latest News

Products

Company

Support