2013-03-07 4 views
-1

자기 테마 디자인으로 저의 첫 시도. 나는이 모양 (CSS 및 이미지 포함) HTML 템플릿이 있습니다!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> 

그래서이 지금은 이름이 "FLOWER_BULB"와 젠토에 대한 테마를 만들고 싶어, 나는 각각의 모든 단계를 알고 싶은, (하나의 부착 CSS와 일부 이미지) 내 HTML 코드입니다 우리가 만든이 테마를 선택하는 방법과 함께 나는 이것이 매우 멍청한 질문이라고 알고 있지만, 누군가가 나를 멘토처럼 묘사 할 수 있다면 그것은 매우 도움이 될 것입니다. 미리 감사드립니다. 친절하게 도와주세요.

+0

이 링크는 http://fishpig.co.uk/blog/create-a-custom-theme-in-magento.html에 도움이 될 수 있습니다. – mumair

답변

1

안녕하세요 pranshu,

주어진 테마를 사용하려면 우선 당신은 마 젠토의 파일 구조를 이해해야한다. 여기에 약간의 지식을 드릴 수 있습니다.

  1. 젠토에서 CSS의 경로는 /skin/frontend/default/default/css 당신이 eithe 편집 기존 CSS 또는 여기에 새로운 CSS 파일을 만들 수 있습니다.

  2. CSS에 포함 할 수있는 이미지의 경로는 /skin/frontend/default/default/images

  3. 당신이 머리 파일 사용 /app/design/frontend/base/default/template/page/html/head.phtml에서 CSS 나 JS를 포함하려면 경로 /app/design/frontend/base/default/template/

  4. 를 사용할 필요가 HTML을 편집하는 것입니다

  5. 은 당신이 개발자 모드를 사용할 수있는 파일의 경로를 알 수있는 시스템 -> configration-> 현상 제> 디버그 또는 템플릿 설정

여기에 여전히 의문이 있으시면