Разработка темы с magento

Это моя первая попытка с дизайном темы магнето. У меня есть шаблон HTML (включая CSS и изображения), который выглядит следующим образом:

! [Я хочу создать и выбрать тему 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 и несколькими изображениями), теперь я хочу создать тему для magento с именем "FLOWER_BULB", и я хочу знать каждый шаг этой разработки наряду с тем, как выбрать эту тему который мы сделали. я знаю, что это очень нубский вопрос, но для меня было бы очень полезно, если бы кто-нибудь мог описать его как наставника для меня, спасибо заранее. любезно помогите.

Источник

1 ответ

Привет праншу,

Чтобы использовать данную тему, прежде всего, вы должны понять структуру файла magento. Я могу дать вам немного знаний здесь.

  1. Путь CSS в Magento находится в /skin/frontend/default/default/css Вы можете редактировать существующий CSS или создать новый файл CSS здесь.

  2. Путь изображений, которые могут быть включены в CSS /skin/frontend/default/default/images

  3. Для редактирования HTML вы должны использовать путь /app/design/frontend/base/default/template/

  4. Чтобы включить css или js в заголовочный файл, используйте /app/design/frontend/base/default/template/page/html/head.phtml

  5. Чтобы узнать путь к файлу, вы можете использовать режим разработчика в system->config->developer->debug или настройке шаблона.

Если у вас есть какие-либо сомнения, прокомментируйте здесь..

Источник
Другие вопросы по тегам