Question

我对Magento很新。我使用HTML和CSS设计了一个主题。我想在magento中添加我的自定义标题。要遵循的程序是什么？

有人能告诉我在magento中整合页眉/页脚和主要内容的分步过程吗？

寻找富有成果的回复

由于

Teekeybee

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>TeeKeyBee | Demo Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/custom.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">

      <div class="row">
          <header class="header-container">
            <img src="img/logo.png"/>
            <div class="row top-links">
              <div class="span8"></div>
              <div class="span2 borderr">Register | Login</div>
              <div class="span2">Cart 0 &euro; 0.00</div>
            </div>
            <div class="row top-menu">
              <div class="span2"><img src="img/side_logo.png"/></div>
              <div class="span10">Home | About Us | Services | Gallery | Contact Us</div>
            </div>

          </header>


      </div>

    </div><!-- End Container -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS代码：

.header-container {
    width: 100%;
    height: auto;
    min-height: 50px;
    background: #000;
}

.top-links {
    width: 100%;
    height: 40px;
    background: #f8f8f8;
    margin: 0 auto;
}

.top-menu {
    width: 100%;
    height: 40px;
    background: #b6b6b6;
    margin: 0 auto;
}



.borderr {
    box-sizing: border-box;
    border-right: 1px solid #c9c9c9;
}

Answer 1

好像你想创建一个Boostraped Magento主题？为了保存你自己很多工作你应该覆盖页眉和页脚模板。由于我不知道你做了什么，这里是从一开始的步骤：

创建模板和皮肤文件夹：由于您使用CE，您希望将它们放入： app / design / frontend / default / your_theme and skin / frontend / default / your_theme
更改admin中的设置以指向您的新主题：这是在系统＆gt;中的管理员中完成的。配置＆gt;一般＆gt;设计＆gt;主题。将这些值更改为＆＃34; your_theme＆＃34;

通过布局xml将css文件添加到主题：在app / design / frontend / default / your_theme / layout / local.xml

<?xml version="1.0"?>

<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addItem">
                <type>skin_js</type>
                <script>js/jquery.js</script>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <script>js/bootstrap.min.js</script>
            </action>
            <action method="addItem">
                <type>skin_css</type>
                <name>css/bootstrap.css</name>
            </action>
            <action method="addItem">
                <type>skin_css</type>
                <name>css/custom.css</name>
            </action>
        </reference>
      </default>
</layout>

css文件进入skin / frontend / default / your_theme / css /

js文件进入skin / frontend / default / your_theme / js /

覆盖header.phtml：将app / design / frontend / default / default / template / page / html / header.phtml复制到app / design / frontend / default / your_theme / template / page / html /。您会注意到此模板看起来与您拥有的标题完全不同。再一次，你可以通过使用那里的东西并操纵它来保存你自己的很多工作。

对其他模板进行大量操作以执行您所要求的操作。但这至少可以让你开始。

Magento的自定义标题

1 个答案: