Need help buying now? +48-22-219-5163 +1-917-720-3250
My Cart

Your Cart is Empty

Need help buying now?
+48-22-219-5163 +1-917-720-3250

Custom Theme Adjustment

All Magento themes are divided into base (standard), and custom (non-standard). Let us review how to perform custom theme adjustment and configure the modules to work with it.

General 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 to use ‘space symbols’ in the name but to replace them with dashes or lower dashes. 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 file 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 in-built 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 Magento theme location and hierarchy because, if you violate the order, the template linked to the standard path will not work.

We want to provide you with the following tip: we have recommended you to 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.

If you use our tip, please pay attention that you should 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 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 methods block and insert your own one, 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 of the header you can do with the following CSS structure:

.header { background: #ffffff; }

You can set up 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 one. 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 it would be nice to change some elements, then you need to right-click on that element on the main site page, choose ‘Show element code’, 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. 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. There is the same principle that worked for the header modification, 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 line), then the theme may become completely broken and you will need to restore it from backup. We recommend you to use the help of Magento experts, you may visit our forum or leave a comment to this article.

Newsletter