All themes for Magento ® are divided into a base (standard), and custom (non-standard). Let us review how to perform custom theme adjustment procedures and configure the modules to work with it.
General Custom Theme installation information
Before starting the theme installation it is necessary to create a folder for it in the root directory.
The path will be: app/design/frontend/default/your_future_theme_name.
We do not recommend using ‘space symbols’ in the name but to replace them with dashes or underlines with an emphasis on using dashes because they are easier to see in a URL. After the folder is created, you also need to create subfolders inside it named ‘template’ (where the theme files will be stored) and layout (where local.xml files should be located, it is empty by default).
The next step is to create another template file called ‘local.css’ that should be located at skin/design/frontend/default/your_theme_name, this document will determine the template properties. If you wish to use your own images instead of inbuilt ones, you also need to create a folder called ‘images’ in the theme name section.
Now save the changes. It is very important to precisely follow all rules of a theme location and hierarchy because, if you violate the order, the template linked to the standard path will not work.
HOT TIP: we have recommended that you create the theme in app/design/frontend/default/thetitleofthefuturetheme. It is a good variant, but the best one is to create a separate package: app/design/frontend/package_name/default/ and create the theme in it. And if you need to create a Christmas theme, for example, you should create a folder in the same package: app/design/frontend/package_name/cristmas_theme/
The same actions should be done with the styles: skin/design/frontend/package_name/default – a separate package.
To do so, go to System – Configuration – Design – Package in our description called “Installation and Activation”
Installation and activation
Copy the template of your new theme into local.xml file created previously. You can create the template yourself, copy it from a theme you like or buy it. If you decide to use the first or the second way, you should be prepared for the possibility that the theme may not work due to incorrect file paths. Here you may add or remove some blocks, functions, etc., e.g. erase a standard payment method block and insert your own, remove advertisement columns or extend them with additional blocks.
Save the changes and activate the theme. Go to the admin panel, then System – Configuration, access Design section. Now you need to verify that the standard theme is displayed by default, this is the one we need to change. You should change the parameter called Default in the Themes tab. Then you should save the changes and return back to the administrator’s panel.
Customization
Let’s say you do not like the styles, inscriptions, colors or images that are offered by the standard theme. In order to change that you will need to make a few code modifications in the template editor. Start with the site header. Open the editor and locate the string <div class=”header-container”>. This part is responsible for the header style. In order to change it open the file local.css created earlier, there you will add the necessary header style. For this create the following template:
.header-container { background: none (by default); border-width: set the value you need}
To set a white color for the header apply the color in hex-format, in rgb/rgba or use the keywords, etc.
You can create a logo according to your taste, both with a standard image and your own. For instance, if you wish to make it more transparent you need to add the following code: a.logo:file name { opacity: 0.6 }
Now you need to adjust the template to the necessary style. If general color scheme and background is fine for you, but you want to change some elements, then you need to right-click on that element on the main site page, choose ‘Show element code’, and you will see a part of CSS table that is responsible for that element. After you have seen it, go to the code editor and locate the necessary line using ctrl+f.
You can try different modifications to change color, style, width, etc. Before starting to edit the code, copy its standard part and save it in a .txt file just in case you have trouble. Also, GoMage specialists recommend checking the changes on the working copy of the store.
It is much more difficult to customize the page content area. The same principle that worked for the header modification will apply here, choose the block style .main-container. For example:
.main-container { background: selected color, enter the number beginning with # }.
The other blocks can be changed in the same way. The width is configured after the background is created, and the code is as follows:
.main-container {border-color: #selected color; border-style: dotted; border-width: data in px; padding-bottom: necessary number in pixels px}
Any custom theme adjustment should be performed by a specialist. If there is an error in the code (open brackets, incorrect spelling, misplaced lines), then the theme may become unusable until these errors are resolved. The worst case scenario may find it necessary to restore the original theme properties from your backup. GoMage experts are here to help with all of these associated issues.
