Mastering Theme

Andrea Saccà:
After his studies in Graphic and Web Design in Rome, he worked for a few renowned web agencies as a web designer, and in 2012, he started his freelance career. After two years of freelancing, he started his own web agency, 1604lab (www.1604lab.com) in Rome.

Mastering Idea:
1.It is absolutely important to know that you must not create a theme under the base package. you should create a custom package and place the  themes inside it.

2.Directory 1 – app
This directory contains the layout, translation, and template files. Various page types and blocks within each page type are defined in respective XML files. Using XML, you can also incorporate CSS files or JavaScript either to be loaded throughout the site or for specific pages.

3.The layout sub-directory
Each page, part, and block of the theme is defined by an XML file. Every page is defined by a handle. For the layout, there is no need to duplicate every single XML file to change appearance of a block; just insert a JavaScript file or CSS file. In fact, with the exception of template files, we can create a single XML file where we can declare all the information that will add or override information of the basic theme.

4.Locales
The folder that contains translation files of the theme is app/design/frontend/base/locale. To find the default Magento localizations lines of text, you can explore the files at app/locale/en_US. If you open this folder, you can see that the translations are organized in various CSV files. Each of them represents a specific section of the site. For example, the Mage_Catalog.csv file includes all the text about the catalog pages of the site.

en_US is the name of the folder that indicates the language of the localization (en) and the country or region of the language (US).

For example, if we want to create an Italian version of the theme, we have to duplicate the translate.csv file from app/design/frontend/base/locale/en_US/ to app/design/frontend/base/locale/it_IT/.

5.Magento variables:
By doing so, custom text and design can be created once and applied to multiple areas to save the merchant time. Magento comes with some system variables such as {{store url=””}}
(stores thewebsite address), {{var logo_url}} (URL of the store logo), To variable create In the backend, navigate to System | Custom Variable

6.Widgets
Magento widgets are frontend blocks with a predefined set of configuration options. Magento widgets allow users with no technical knowledge to easily add dynamic content.

7.Creating the theme
Once you understand the hierarchy of themes and know the basic information, you are ready to create your own custom theme. But, before you put your hands on the code, I will always recommend that you already have a mock-up to be developed, rather than designing as you go.

Starting with the app folders:
Now let’s see how to begin the creation of our new theme, starting from one of the main folders, the app folder .
1. Create the bookstore package folder at app/design/frontend/, so you will have app/design/frontend/bookstore.
2. Create the child theme folder default at app/design/frontend/, so you will have app/design/frontend/bookstore/default.
3. Create all the necessary subfolders inside the default theme:
-> app/design/frontend/bookstore/default/template
-> app/design/frontend/bookstore/default/layout
-> app/design/frontend/bookstore/default/locale

Creating the skin folders:
Once we have created the app, let’s create the skin folder. This folder contains the static files of the theme such as images, JSS, and CSS files.
1. Create the bookstore package folder at skin/frontend/, so you will have skin/frontend/bookstore.
2. Create the default theme folder at skin/frontend/, so you will have skin/frontend/bookstore/default.
3. Create all the necessary subfolders inside the default theme:
-> skin/frontend/bookstore/default/images
-> skin/frontend/bookstore/default/css
-> skin/frontend/bookstore/default/js

To sum up, we will have the structure as shown in the following screenshot:
structure

Creating the necessary files:
Now that our theme structure is ready, we have to create the main files we need. As I said before, we can create empty files or copy the files from the base theme.I recommend that you copy the files from the base theme, so you already have blocks and blocks of code that we can keep and edit as you wish.

We start by creating the main files in the app folder, by performing the following steps:
1.Copy the template files. Only copy the following ones, and not everything, and only use what needs to be changed; less is more! Copy the files from app/design/frontend/base/default/template/ and paste them to app/design/frontend/bookstore/default/template/:

2.Create the local.xml file at app/design/frontend/bookstore/default/layout/. Copy and past following code:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* local.xml
* Local layout modifications for our local theme
* @category design
* @package bookstore
* @copyright Copyright (c) 2013 Andrea Saccà.
*/
-->
<layout version="0.1.0">
     <default>
     </default>
</layout>

In the next chapter, we will see how to override specific positions, insert JavaScript, CSS files, and other cool stuff.

3.Copy where styles.css is the main stylesheet and print.css is the style sheet used for printing, then paste the template files present at skin/frontend/bookstore/default/css/

8.Activating the theme
Keep in mind that the scope of the default configuration is a single website/store view. You can check this configuration on the left-hand side of this page. If you are using a multistore, and you want to have different designs for different stores, you should define the design package or theme by switching first to the configuration scope on the left, selecting the appropriate store view.

Inside the Package box, insert the name of the package you created before in the Current Package Name option. In this case, we insert bookstore, and then click on the Save Confg button, as shown in the following screenshot:

activating

9.Disabling the WYSIWYG editor Another useful tip is to disable the WYSIWYG text editor. This will save you a lot of time when you have to write the HTML code inside the CMS pages or blocks, and you can prevent the editor from changing the code you’ve written.
To disable it, navigate to System | Confguration | Content Management
Here you have three options. You can choose to leave it as Enabled by Default (the default confguration), or you can choose to disable it completely, or to disable by default.
I recommend that you at least disable it completely in the development phase.

10.Summery
In this chapter, you learned the Magento theme design’s basic information, the difference between package and theme, and how to create and activate a custom package with the main folders and files.

11.Bootstrap
Bootstrap is the most popular frontend framework that is used to create mobile-first websites.

Downloading and including jQuery:
Bootstrap is dependent on jQuery, so we have to download and include it before including boostrap.min.js. So, download jQuery from http://jquery.com/download/.
Once you download jQuery, rename the file as jquery.min.js and copy it into the js skin folder at skin/frontend/bookstore/default/js/.In the same folder, also create the jquery.scripts.js file, where we will insert our custom scripts.
Magento uses Prototype as the main JavaScript library. To make jQuery work correctly without conflicts, you need to insert the no conflict code in the jquery.scripts.js file, as shown in the following code:

// This is important!
jQuery.noConflict();
jQuery(document).ready(function() {
// Insert your scripts here
});

The following is a quick recap of CSS and JS files:
rcape

12.The action to insert the JavaScript and CSS files must be placed inside the reference head block. So, open the local.xml file and first create the following block that will define the reference:
<reference name=”head”>
</reference>

13.Declaring the .js files in local.xml
The action tag used to declare a new .js file located in the skin folder is as follows:

/* Let's declare them as follows: */

<action method="addItem">
	<type>skin_js</type><name>js/jquery.min.js</name>
</action>
<action method="addItem">
	<type>skin_js</type><name>js/bootstrap.min.js</name>
</action>
<action method="addItem">
	<type>skin_js</type><name>js/jquery.scripts.js</name>
</action>

14.Declaring the CSS files in local.xml
The action tag used to declare a new CSS file located in the skin folder is as follows:

/* So let's declare these files as follows: */

<action method="addItem">
	<type>skin_css</type><name>css/bootstrap.min.css</name>
</action>
<action method="addItem">
	<type>skin_css</type><name>css/styles.css</name>
</action>
<action method="addItem">
	<type>skin_css</type><name>css/print.css</name>
</action>

15.Removing and adding the style.css file
By default, the base theme includes a CSS file called styles.css, which is hierarchically placed before the bootstrap.min.css. One of the best practices to overwrite the Bootstrap CSS classes in Magento is to remove the default CSS files declared by the base theme of Magento, and declare it after Bootstrap’s CSS files.

Thus, the styles.css file loads after Bootstrap, and all the classes defined in it will overwrite the boostrap.min.css file. To do this, we need to remove the styles.css file by adding the following action tag in the xml part, just before all the css declaration we have already made:

<action method="removeItem">
	<type>skin_css</type><name>css/styles.css</name>
</action>

Hence, we removed the styles.css file and added it again just after adding Bootstrap’s CSS file (bootstrap.min.css):

<action method="addItem">
	<type>skin_css</type>
	<stylesheet>css/styles.css</stylesheet>
</action>

If it seems a little confusing, the following is a quick view of the CSS declaration:

<!-- Removing the styles.css declared in the base theme -->
	<action method="removeItem">
		<type>skin_css</type>
		<name>css/styles.css</name>
	</action>
<!-- Adding Bootstrap Css -->
	<action method="addItem">
		<type>skin_css</type>
		<stylesheet>css/bootstrap.min.css</stylesheet>
	</action>
<!-- Adding the styles.css again -->
	<action method="addItem">
		<type>skin_css</type>
		<stylesheet>css/styles.css</stylesheet>
	</action>

16.Adding conditional JavaScript code
If you check the Bootstrap documentation, you can see that in the HTML5 boilerplate template, the following conditional JavaScript code is added to make Internet Explorer (IE) HTML 5 ompliant:

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

To integrate them into the theme, we can declare them in the same way as the other script tags, but with conditional parameters. To do this, we need to perform the following steps:

  1. Download the files at:
    ->html5shiv.js: https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
    ->respond.js: https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js
  2. Move the downloaded files into the js folder of the theme.
  3. Always integrate JavaScript through the .xml file, but with the conditional parameters as follows:
<action method="addItem">
	<type>skin_js</type><name>js/html5shiv.js</name>
	<params/><if>lt IE 9</if>
</action>
<action method="addItem">
	<type>skin_js</type><name>js/respond.min.js</name>
	<params/><if>lt IE 9</if>
</action>

A quick recap of our local.xml file:
Now, after we insert all the JavaScript and CSS files in the .xml file, the final local. xml file should look as follows:


<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
	<default translate="label" module="page">
		<reference name="head">
			<!-- Adding Javascripts -->
			<action method="addItem">
				<type>skin_js</type><name>js/jquery.min.js</name>
			</action>
			<action method="addItem">
				<type>skin_js</type><name>js/bootstrap.min.js</name>
			</action>
			<action method="addItem">
				<type>skin_js</type><name>js/jquery.scripts.js</name>
			</action>
			<action method="addItem">
				<type>skin_js</type><name>js/html5shiv.js</name> <params/><if>lt IE 9</if>
			</action>
			<action method="addItem">
				<type>skin_js</type><name>js/respond.min.js</name><params/><if>lt IE 9</if>
			</action>
			
			<!-- Removing the styles.css -->
			<action method="removeItem">
				<type>skin_css</type><name>css/styles.css</name>
			</action>
			<!-- Adding Bootstrap Css -->
			<action method="addItem">
				<type>skin_css</type><stylesheet>css/bootstrap.min.css</stylesheet>
			</action>
			<!-- Adding the styles.css -->
			<action method="addItem">
				<type>skin_css</type><stylesheet>css/styles.css</stylesheet>
			</action>
		</reference>
	</default>
</layout>

17.However, please keep in mind that it can be a big drawback on the loading time of the page. Following these techniques by adding the JavaScript and CSS classes via XML, you can allow Magento to minify them to speed up the loading time of the site.

18.Removing the default blocks from the sidebar
Let’s suppose that you want to remove the left tags block and the default callouts block; you can do this with the following lines:

	<remove name="left.permanent.callout"/>
	<remove name="tags_popular"/>

19.Product Category
In order to use the handle, the category must have the setting Is Anchor set on Yes. This option is available on the admin area, under the Display Settings tab of the Manage Categories section of the category

20.Integrating prettyPhoto JS and CSS
Now open the local.xml file and add the JS and the CSS. In order to load prettyPhoto only on the product view page, you can place addItem in the action method to declare the JS and addCss to declare the CSS in the handle as follows:

<catalog_product_view>
	<reference name="root">
		<action method="setTemplate">
			<template>page/1column.phtml</template>
		</action>
	</reference>
	<reference name="head">
		<action method="addItem">
			<type>skin_js</type>
			<name>js/jquery.prettyPhoto.js</name>
		</action>
		<!-- Adding the prettyphoto.css -->
		<action method="addCss">
			<stylesheet>css/prettyPhoto.css</stylesheet>
		</action>
	</reference>
</catalog_product_view>

21.Integrating a Google font in our theme (page 112)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s