Помогите с версткой под Joomla!

Aidos_astana · March 27, 2014

Добрый вечер! Нуждаюсь в помощи. Не могу понять суть работы на Joomla. Сверстал(HTML+ CSS(свой стиль + Bootstrap) + JS) с нуля главную страницу сайта.

Теперь нужно внедрить/изменить/"посадить" эту верстку под/на Joomla. За два дня перечитал кучу информации, пересмотрел видео, но сути не понял). Я понимаю что надо было сразу использовать на Joomla, но как я как понял и такой вариант никто не отменял.

Что было проделано:

Xml файл я создал, index.html изменил на index.php, затем закинул в папку templates.Итог: Сайт виден и открывается в шаблонах Joomla. Но я не понял куда вставлять свой HTML-код, если в index.php заменить на PHP-код.

Пример: Между строчками 66-68 (как я понял) я вставил PHP код для подключения и определения позиции модуля меню в шаблоне Joomla.

Но куда девать HTML- код который закомментирован и находится между 73-95 строчками?

P.S 1. Нумерация строк не появилась, поэтому строчки 66-68 в коде указал как , строчки 66-68 в коде указал как ,

2.Заранее извиняюсь за такую вставку кода HTML, другого подходящего способа не нашлось быстро.

Вот HTMLкод:

<?php defined('_JEXEC') or die('Restricted access'); ?><!doctype html><html lang="en"><head>    <jdoc:include type="head" />    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/reset.css" />    <link  rel="stylesheet" media="screen" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/bootstrap.css"/>    <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css" />    <link rel="shortcut icon" type="image/x-icon" href="?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico">    <!-- Google Translate -->    <meta name="google-translate-customization" content="274cd9665a76fc7a-edbbc9d92fae9e13-g5a8209ad3143145f-c"></meta>    <!-- //Google Translate -->    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->    <!--[if lt IE 9]>      <script src="../../assets/js/html5shiv.js"></script>       <script src="../../assets/js/respond.min.js"></script>    <![endif]--></head><body>    <!-- Wrapper -->    <div class="wrapper">      <!-- Panel -->        <div class="panel">          <!-- Share-buttons -->           <div class="wrapper_share_buttons">                       <script type="text/javascript">(function() {                        if (window.pluso)if (typeof window.pluso.start == "function") return;                          if (window.ifpluso==undefined) { window.ifpluso = 1;                            var d = document, s = d.createElement('script'), g = 'getElementsByTagName';                            s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;                            s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';                            var h=d[g]('body')[0];                            h.appendChild(s);                          }})();                        </script>                        <div class="pluso share_buttons" data-background="transparent" data-options="big,round,line,vertical,counter,theme=04" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email"></div>            </div>             <!-- //Share-buttons -->        </div>          <a class="trigger button_feedback" href="#">F<br/>e<br/>e<br/>d<br/>b<br/>a<br/>c<br/>k</a>      <!-- //Panel -->      <div class="main_header">        <div class="container">          <!-- Google Translate -->          <div id="google_translate_element" class="pull-right"></div>          <script type="text/javascript">                function googleTranslateElementInit() {                  new google.translate.TranslateElement({pageLanguage: 'ru', includedLanguages: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');                }          </script>          <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>            <!-- //Google Translate -->              <!-- Header -->              <div class="header">                <!-- Row for Header -->                  <div class="row">                      <div class="col-md-4 logo">                          <!-- Код для отображения Названия сайта -->                          <!-- <a href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/header_logo.png" alt="logotype"></a> -->                      </div>                      <div class="col-md-8">                                            <!-- МЕНЮ-->                        <div class="navigation_pos">                          <jdoc:include type="modules" name="topmenu" /> <!-- Код для отображения меню-->                        </div> <!-- navigation_pos -->                      <!-- //МЕНЮ-->                      <!-- ЗАКОММЕНТИРОВАННОЕ МЕНЮ-->                          <!-- <ul class="nav nav-pills navbar-right">                          <li class="active">                            <a href="">Главная</a>                          </li>                          <li class="dropdown">                            <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="">О компании<b class="caret"></b>                            </a>                                                          <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">                                  <li class="dropdown"><a href="">Дата основания</a></li>                                  <li class="dropdown"><a href="">Достижения</a></li>                                  <li class="dropdown"><a href="">Цели</a></li>                              </ul>                           </li>                          <li class="dropdown">                            <a class="dropdown-toggle" id="dLabel1" role="button" data-toggle="dropdown" data-target="#" href="">Услуги<b class="caret"></b>                            </a>                                                           <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">                                  <li class="dropdown"><a href="">Путевки</a></li>                                  <li class="dropdown"><a href="">Шопинг-туры</a></li>                              </ul>                          </li>                          <li class="dropdown"><a href="">Цены</a></li>                          <li class="dropdown"><a href="">Контакты</a></li>                        </ul>  -->                        <!-- ЗАКОММЕНТИРОВАННОЕ МЕНЮ-->                                              </div>                  </div><!-- //Row for Header -->              </div><!-- //Header -->          </div><!-- //Container for header -->        </div><!-- //Main header -->        <!-- Container -->        <div class="container">            <!-- Main -->            <div class="main">                <!-- Carousel -->                <div id="carousel-example-generic" class="carousel slide carousel_sizes" data-ride="carousel">                  <!-- Wrapper for slides -->                  <div class="carousel-inner">                    <div class="item active">                      <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/banner_img1.jpg" alt="...">                    </div>                    <div class="item">                      <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/banner_img1.jpg" alt="...">                      </div>                    <div class="item">                      <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/banner_img1.jpg" alt="...">                      </div>                  </div>                  <!-- Controls -->                  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">                    <span class="previous_button"></span>                  </a>                  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">                    <span class="next_button"></span>                  </a><!-- Controls -->                 </div><!-- //Carousel -->                  <h2 class="content_text_center">                  <span>Lorem ipsum dolor sit amet,</span> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et                   dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo                   consequat.                  </h2>                  <!-- News -->                  <div class="row news">                       <ul class="thumbnails">                        <li class="col-md-4">                          <div class="thumbnail">                            <h3 class="lead"><a href="#">Summer Holidays</a></h3>                            <img src="http://placehold.it/300x200" alt="">                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper mi in lacus pulvinar sagittis. Nulla placerat laoreet fermentum.</p>                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper mi in lacus pulvinar sagittis. Nulla placerat laoreet fermentum.</p>                                                       <button class="btn btn-primary">Узнать больше</button>                          </div>                        </li>                        <li class="col-md-4">                          <div class="thumbnail">                            <h3 class="lead"><a href="#">Air Spa Centers</a></h3>                            <img src="http://placehold.it/300x200" alt="">                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper mi in lacus pulvinar sagittis. Nulla placerat laoreet fermentum.</p>                            <button class="btn btn-primary">Узнать больше</button>                          </div>                        </li>                        <li class="col-md-4">                          <div class="thumbnail">                            <h3 class="lead"><a href="#">Transportation</a></h3>                            <img src="http://placehold.it/300x200" alt="">                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper mi in lacus pulvinar sagittis. Nulla placerat laoreet fermentum.</p>                            <button class="btn btn-primary">Узнать больше</button>                          </div>                        </li>                      </ul>                  </div><!-- News -->                <div class="row center_lorem">                  <div class="col-md-4"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/content_circle.png" alt="Content image"></div>                  <div class="col-md-8">                    <div class="content_text">                      <h2>Lorem ipsum dolor sit amet</h2>                      <p>                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,                         eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam                         voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione                         voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,                         sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.                       </p>                      <div class="read_more">                        <a href="#"><span>Read more<span></span></span></a>                        <span class="read_more_arrow"><span></span></span>                      </div>                    </div>                  </div>                </div>            </div><!-- //Main -->        </div><!-- //Container -->        <div class="footer_guarantor"></div>        <!-- Footer wrapper -->        <div class="footer_wrapper">          <!-- Footer-->          <div class="footer">            <!-- Footer row -->            <div class="row">              <div class="col-md-4"><p class="copy">© Copyright 2014 - All rights reserved</p></div>              <div class="col-md-8">                <!--footer_nav -->                <div class="footer_nav">                  <ul>                    <li><a href="#">Главная</a></li>                    <li><a href="#">О компании</a></li>                    <li> <a href="#">Услуги</a></li>                    <li><a href="#">Цены</a></li>                    <li><a href="#">Контакты</a></li>                  </ul>              </div>               </div> <!--//footer_nav -->            </div> <!-- //Footer row -->          </div><!-- //Footer-->        </div><!-- //Footer wrapper -->    </div><!-- //Wrapper -->    <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery-2.1.0.min.js"></script>    <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap.js"></script>    <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-dropdown.js"></script>    <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/myScript.js"></script>    <script type="text/javascript">      $(function() {          $('.dropdown-toggle').dropdown();          $(".trigger").click(function(){          $(".panel").toggle("fast");          $(this).toggleClass("active");          return false;        });      });    </script></body></html>

Edited March 27, 2014 by Aidos_astana

Great Rash · March 27, 2014

Вы бы для начала версию джумлы указали, под Joomla 2 и Joomla 3 шаблоны очень сильно различаются.

Aidos_astana · March 27, 2014

Вы бы для начала версию джумлы указали, под Joomla 2 и Joomla 3 шаблоны очень сильно различаются.

Версия Joomla 2.5

Great Rash · March 27, 2014

Я не уверен, что в 2.5 так, но в тройке нужно рулить модулями. Т.е. чтобы наполнить страницу вам не надо вписывать туда HTML-код, вместо этого нужно зайти в админку, создать там модуль, а в шаблоне уже подключить его. Например для основного меню вот так:

<jdoc:include type="module" name="menu" title="Main Menu" />

как я уже написал выше, сам код внутри модуля редактируется в админке.

Aidos_astana · March 27, 2014

Я не уверен, что в 2.5 так, но в тройке нужно рулить модулями. Т.е. чтобы наполнить страницу вам не надо вписывать туда HTML-код, вместо этого нужно зайти в админку, создать там модуль, а в шаблоне уже подключить его. Например для основного меню вот так:
<jdoc:include type="module" name="menu" title="Main Menu" />
как я уже написал выше, сам код внутри модуля редактируется в админке.

Т.е как я понял, код который у меня закомментирован, я должен уже вписывать прямо в Joomla, в настройках модуля меню?

Sign In

Помогите с версткой под Joomla!

Question

Aidos_astana

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Aidos_astana

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Aidos_astana

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information