Theme creation
Setting up package and theme
Description: Creating our custom Package and Theme to avoid overriding our
customization by the Magento update.
Steps:
1. Go to your Magento folder and app/design/frontend/ . Create a new folder there by any name,
which will be your package name.
2.
3.
4.
5.
For example: app/design/frontend/your-package
Go inside the folder you just created and make a new folder. Name your folder, which will be
your theme folder. All the templates we customize will reside here. For
example: app/design/frontend/your-package/your-theme
Now go back to the root of your Magento folder and then go inside theskin/frontend and
create the same folder structure as above.
For example: skin/frontend/your-package/your-theme
Once the folder structure is created, log in to your admin section, which should be your local
URL /admin or simply add /admin to the end of your Magento URL in the browser.
Once you are logged in, look for “System” in the top menu, mouse over and click on
“Configuration” located on the bottom of the menu. Now click “Design” from the left menu
and it should open the page below.
Type your package and theme name into the appropriate fields and click “Save Config”
on the top right.
Our package and theme structure is now setup and we are ready to start customizing
the themes!
Lesson 3: Theme customization
Description: Editing the template files
Steps:
1. Go to your root folder of Magento and then go to
theapp/design/frontend/base/default/template and copy the page folder and paste it into your
theme folder. In my case, it’s app/design/frontend/your-package/your-theme . Now you
should see multiple .phtml files which are basically template files that open up the 2columns-right.phtml.Refresh the home page and you should see your changes. Remember,
page folder contains layout templates which mean any change you make will apply to all
pages to which this template is assigned.In case you want to make changes in the header,
open up the page /html/header.phtml or if you want to customize product page or checkout,
follow the same way you copied the folder and files fromdefault/template : paste it into yourtheme/template and customize it as per your needs.
Lesson 4: Layout Customization
Description: Removing the Poll Survey from the “right sidebar”
Steps
1. Go to the app/design/frontend/your-package/your-theme and create a folder for layout. This
folder will store all the XML files, so the final URL will be app/design/frontend/yourpackage/your-theme/layout .
2. Now we need to copy the poll.xml fromapp/design/frontend/base/default/layout and paste it in
the layout folder that you just created in your theme folder.
3. Open up the poll.xml and type <remove name=”right.poll” /> . This will remove the whole
poll block.
4. Refresh your home page and you should see that the poll is removed.
Lesson 5: Styles Customization
Description: Creating your new stylesheet to declare new styles
Steps:
1. Go to the root folder of your Magento folder and from there, go to
theskin/frontend/default/default/ and copy all folders and files to skin/frontend/mypackage/my-theme, which you created in Lesson 2.
2. Open styles.css, make CSS changes, and view the results!
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////
/////////////
Step 1: Create folders for new theme
We will create few files & folders for our new theme, let’s give some
suitable name to our new theme -magento-new-theme.
New folders:
/app/design/frontend/default/ magento-new-theme / – our new theme
/app/design/frontend/default/ magento-new-theme /layout
/app/design/frontend/default/ magento-new-theme /templates
/skin/frontend/default/ magento-new-theme / – our new skins folder
/skin/frontend/default/ magento-new-theme /css/
/skin/frontend/default/ magento-new-theme /images/
New Files:
/app/design/frontend/default/ magento-new-theme /layout/local.xml
/skin/frontend/default/ magento-new-theme /css/local.css
Step 2: Setting up new theme in admin area:
Go to System > Configuration > Design via the top navigation bar
Under “Themes” and in the “Default” text field, type: magento-newtheme
Press the “Save Config” button in the upper right corner
Step 3: Adding custom stylesheets and JS libraries
Your new CSS and JS files must be copied in proper folders
1) CSS
Copy your CSS files in
to /skin/frontend/default/magento_new_theme/css/ folder.
To link these files in, you can either modify local.xml to add the new file, or
add an import in local.css, like this:
@import URL (‘my_new.css’);
2) Javascript
Create a new folder under /js/ named magento_new_theme and copy
your files to it. If you are using javascript libraries then this is also a good
place to put the library files.
The Javascript files can be added to your theme by adding the following
to local.xml:
Step 4: Appending basic changes to our templates
All files that are used for skin template is placed in template/page folder.
Here we’ll see below files:
1column.phtml, 2columns-left.phtml, 2columnsright.phtml, 3columns.phtml, one-column.phtml,dashboard.phtml.
These are essentially the HTML skeleton files for our pages. By changing
those files we can set up a new look of the page structure. There is also an
html subfolder placed under template/page in which we can change footer,
header and links blocks of our template.
Every one of them uses simple function calls (ex. getChildHtml() ) so we
can also identify the block by searching in layout XML files .
For example when we’ll see
This tells us that the page will use 3columns.phtml as a skeleton for our
page.
Step 5: Calling layout blocks using Magento functions
As it was discussed above, there are two ways of calling blocks.
by using the block alias “as” from the XML file we
can display a block on our page providing that it was defined already in the
corresponding XML file
by using the block name from the
XML file, we can call any block whether or not it was already defined in
corresponding XML file.
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////
/////
How to add slideshow on magento homepage
How to add slideshow on magento homepage
Step 1: Login magento admin panel goto pages under CMS
Click on content and enter below code
<!--Image Slider Start-->
<div id="slide" align="center">
<script type="text/javascript">// <![CDATA[
var image1=new Image()
image1.src="{{skin url=images/media/slideshow/1.jpg}}"
var image2=new Image()
image2.src="{{skin url=images/media/slideshow/2.jpg}}"
var image3=new Image()
image3.src="{{skin url=images/media/slideshow/3.jpg}}"
var image4=new Image()
image4.src="{{skin url=images/media/slideshow/4.jpg}}"
var image5=new Image()
image5.src="{{skin url=images/media/slideshow/5.jpg}}"
// ]]></script>
<a href="http://www.myhomendeco.com/index.php/bed-rooms.html"> <img src="{{skin
url=images/1.jpg}}" alt="" name="slide" width="900" height="277" border="2" /></a>
<script type="text/javascript">// <![CDATA[
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",5000)
}
slideit()
// ]]></script>
</div>
<!--Image Slider End-->
Step 2: Go to below folder
skin/frontend/default/Your_theme/images/media/
create a folder(name:slideshow)
put 5 image files(give name 1.jpg,2.jpg,3.jpg,4.jpg,5.jpg)
and reload
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////