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.
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.
Here are some useful resources to get you started with the web developer tools:
- Firebug for Firefox
- Firebug Guide for Web Designers
- Chrome Developer Tools
- HTML5 Rocks - Introduction to Chrome Developer Tools
- Paul Irish - A Re-introduction to the Chrome Developer Tools
- Safari Developer Tools
- Opera 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
- Mozilla's HTML Documentation
- HTML5 - A technical specification for Web developers
- HTML Dog - The Best Practice Guide To XHTML and CSS
- Mozilla's CSS Documentation
- W3C - Cascading Style Sheets
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.