2013-03-07 66 views
-1

它是我第一次尝试磁贴主题设计。我有一个看起来像这样一个HTML模板(包括CSS和图像):用magento开发主题

[我要创建和选择Magento的主题,像这样] [1]

我有这样的代码为这个主题: HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<title>Plant Bulbs direct</title> 
</head> 
<body> 
<div class="main_div"> 
<div class="inner_div"> 
<div class="header"> 
<div class="logo"><a href="#"><img src="images/logo.jpg" alt="" /></a></div> 
<div class="logo_left"> 
<div class="top_link"> 
<ul> 
<li><a href="#">Sign in</a></li> 
<li><a href="#">Sign up</a></li> 
<li><a href="#">Cookies</a></li> 
<li><a href="#">T & Cs</a></li> 
</ul> 
<div class="search_div"> 
<input name="" class="input" placeholder="search" type="text" /> 
<div class="cart_icon"><a href="#"><img src="images/cart_img.jpg" alt="" /></a></div>  
</div> 
<div class="nav"> 
<ul> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Store News</a></li> 
    <li><a href="#">Panting</a></li> 
    <li><a href="#">Informationh</a></li> 
    <li><a href="#">FAQS</a></li> 
    <li><a href="#">Conact</a></li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class="banner"> 
</div> 
<div class="main_div"> 
<div class="contant"> 
<div class="contant_left"> 
<div class="body_head">Welcome to plant Bulbs Direct</div> 
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those  
interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero  
are also reproduced in their exact original form, accompanied by English versions from 
the 1914 translation by H. Rackham. The standard chunk of Lorem Ipsum used since the 
1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de 
Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, 
accompanied by English versions from the 1914 translation . 
</p> 
<div class="product_part"> 
<div class="procuct_head">Specoal Offer:</div> 
<div class="product"> 
<img src="images/product1.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div 
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img 
src="images/add-cart.jpg" /> </div> 
</div> 
<div class="product"> 
<img src="images/product2.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div  
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img 
src="images/add-cart.jpg" /> 
</div> 
</div> 
<div class="product"> 
<img src="images/product3.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div 
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img  
src="images/add-cart.jpg" /> </div> 
</div> 
<div class="product" style="margin:0px"> 
<img src="images/product4.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div 
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img 
src="images/add-cart.jpg" /> </div> 
</div> 
<div class="procuct_head" style=" padding:0px 0 10px 0; border-top:1px solid #98d075; 
margin-top:10px">Top Sellers:</div> 
<div class="product"> 
<img src="images/product5.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div  
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img 
src="images/add-cart.jpg" /> </div> 
</div> 
<div class="product"> 
<img src="images/product6.jpg" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div  
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img 
src="images/add-cart.jpg" /> </div> 

</div> 
<div class="product"> 
<img src="images/product7.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div   
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img  
src="images/add-cart.jpg" /> </div> 

</div> 
<div class="product" style="margin:0px"> 
<img src="images/product8.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div  
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img  
src="images/add-cart.jpg" /> </div> 
</div> 
</div> 
</div> 
<div class="right_visit"> 
<div class="procuct_head" style="margin-left:0px; width:249px">Show products by:</div> 
<div class="stelec_optio">Planting Month<select class="select" name="">  
<option>1</option><option>2</option></select></div> 
<div class="stelec_optio">Flowering Month <select class="select" name=""> 
<option>1</option><option>2</option></select></div> 
<div class="stelec_optio">Flower Colour<select class="select" name=""> 
<option>1</option> 
<option>2</option></select></div> 
<div class="stelec_optio">Bulb Height<select class="select" name=""><option>1</option> 
<option>2</option></select></div> 
<div class="visit_img"><img src="images/visit_img.jpg" alt="" /></div> 
</div> 
</div> 
</div> 
<div class="footer"> 
<div class="main_div"> 
csf f 
</div> 
</div> 

</body> 
</html> 

所以这是我的HTML代码(有一个附加的CSS和一些图片),现在我想为名称为“FLOWER_BULB” Magento的主题,我想知道的每一步以及如何选择我们所做的这个主题。我知道这是一个很小的问题,但如果任何人都可以形容它像我的导师一样,那对我来说会非常有帮助,提前致谢。善意帮助。

+0

此链接可能会帮助您http://fishpig.co.uk/blog/create-a-custom-theme-in-magento.html – mumair 2013-03-07 07:20:33

回答

1

你好pranshu,

要使用给定的主题首先你要了解的Magento的文件结构。 我可以在这里给你一点知识。

  1. 在Magento的CSS的路径是在/skin/frontend/default/default/css可以eithe修改现有的CSS或在这里创建一个新的CSS文件。

  2. 可以包含在CSS中图片的路径是/skin/frontend/default/default/images

  3. 编辑,你必须使用路径/app/design/frontend/base/default/template/

  4. 要在头文件使用/app/design/frontend/base/default/template/page/html/head.phtml CSS或者JS的HTML

  5. 要知道你可以使用开发人员模式在文件的路径系统 - > configration->开发技术>调试或模板设置

如果您还有任何疑问,请点击此处。