1

Тема: Как добавить сайтбар справа в теме Inspire?

Скачал с форума тему Inspire  и установил на сайт: http://med-spravki.com.ua/
Подскажите как сделать, чтобы на всех страницах справа выводился сайтбар, пример, как на этой странице: http://inspire.tnerb.net/index.php?id=about

Поделиться

2 (2014-08-15 10:26:10 отредактировано Аркадий)

Re: Как добавить сайтбар справа в теме Inspire?

Если совсем по простому, без деталей

Контент, который нужно вывести на экран в сайдбаре сохраняем в новом компоненте, присваивая ему соответствующее имя, например, my_sidebar



В шаблоне, где хотите вывести на экран сайдбар прописываем


<?php get_component( 'my_sidebar' ); ?>


и в вашу страницу попадет все содержимое компонента my_sidebar


Посмотрите исходник стандартного шаблона GS, идущего вместе с системой по умолчанию, там это есть.
Посмотрите, что у вас содержится в компонентах GS, сразу все станет ясно

Подписи нет

Поделиться

3 (2014-08-15 14:03:37 отредактировано vetall2007)

Re: Как добавить сайтбар справа в теме Inspire?

Я не могу разобраться куда правильно в шаблоне вставить код: <?php get_component('sidebarright'); ?> и какие еще делать настройки.

Вставляю код в шаблон и он появляется или сверху или снизу основного текста, или он появляется сбоку но его оптекает основной текст. А как сделать чтобы было в две колонки, как на этой странице http://inspire.tnerb.net/index.php?id=about незнаю.....

Код шаблона:

?>
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>
<?php get_page_clean_title(); ?>
-
<?php get_site_name(); ?>
</title>
<meta name="robots" content="index, follow">

<!-- CSS -->
<link href="<?php get_theme_url(); ?>/style.css?v=<?php echo get_site_version(); ?>" rel="stylesheet">
<link href="<?php get_theme_url(); ?>/assets/css/main.css?v=<?php echo get_site_version(); ?>" rel="stylesheet">
<link href="<?php get_theme_url(); ?>/assets/css/responsive.css?v=<?php echo get_site_version(); ?>" rel="stylesheet">
<link href="<?php get_theme_url(); ?>/assets/css/sidr.css?v=<?php echo get_site_version(); ?>" rel="stylesheet">
<link href="<?php get_theme_url(); ?>/assets/css/font-awesome.css?v=<?php echo get_site_version(); ?>" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
<?php get_header(); ?>
</head>

<body id="<?php get_page_slug(); ?>" >

<!-- Hero -->

<div class="heroHolder">
  <div class="heroWrap" style="background:   url(<?php get_theme_url(); ?>/assets/images/pattern.png), url(<?php get_theme_url(); ?>/assets/images/homebanner.jpg); background-position: top center,  top center; background-repeat:repeat,  no-repeat ; background-size:auto, cover ">
    <div class="hero">
      <h1>
        <?php get_site_name(); ?>
      </h1>
      <p>
        <?php get_component('tagline'); ?>
      </p>
      <p><a href="#Get">Узнать подробнее...</a></p>
    </div>
  </div>
</div>

<!-- Header -->

<div class="headerWrap" id="Get">
  <div class="headerTop"> </div>
  <div class="header"> 
    
    <!-- Logo -->
    
    <div class="logo">
      <h1><a href="<?php get_site_url(); ?>" >
        <?php get_site_name(); ?>
        </a></h1>
    </div>
    
    <!-- Mobile -->
   <!-- <div id="mobile-header"> <a id="responsive-menu-button" href="#sidr-main"><img src="<?php get_theme_url(); ?>/assets/images/menu.png" alt="Menu"></a> </div> -->
    
    <!-- Main Menu -->
    
   <!-- <div class="menuWrap">
      <nav class="mainMenu">
        <ul>
          <?php get_navigation(get_page_slug(FALSE)); ?>
        </ul>
      </nav>
    </div> -->
    
    <!-- socialMedia -->
    
    <nav class="socialMedia">
      <?php get_component('socialmedia'); ?>
    </nav>
  </div>
</div>    
<div class="contentArea" >
  <div class="mainContentArea">
    <div class="threeColumn">
      <div class="threeColumnLeft">
        <?php get_component('homeleft'); ?>
      </div>
      <div class="threeColumnMiddle">
        <?php get_component('homemiddle'); ?>
      </div>
      <div class="threeColumnRight">       
        <?php get_component('homeright'); ?>          
      </div>
    </div>
  </div>
</div>
<div class="contentArea">
  <div class="mainContentArea"> 
      <?php get_component('sidebarright'); ?>
    <!-- page content -->
    <?php get_page_content(); ?>      
  </div>
  
  <!-- page footer -->
  
</div>
<?php get_footer(); ?>
<!-- <div id="twitterWrap"> 
  <div class="fa fa-twitter"></div>
    <div id="twitterHolder">
    <div id="twitterFeed"></div>
  </div> 
</div> 

<!-- Footer -->

<div class="footerWrap">
  <div class="footer">
   <!-- <div class="footerLogo"> 
      <h2><a href="<?php get_site_url(); ?>" >
        <?php get_site_name(); ?>
        </a></h2>
    </div> -->
  <!--  <div class="footermenu">
      <ul> 
        <?php get_navigation(get_page_slug(FALSE)); ?>
      </ul>
    </div> -->
    <div class="copyright">
      <p>
        <?php get_component('footercontact'); ?>
        <br />
        <a href="<?php get_site_url(); ?>">Медсправки для бассейна в Киеве</a> &copy; <?php echo date('Y'); ?></p>
        
        
    </div>
    
    <!-- To Top -->
    <div class="toTop"><a href="#toTop"></a>Top</div>
  </div>
  
  
  
</div>

Поделиться

4

Re: Как добавить сайтбар справа в теме Inspire?

Такое впечатление, что шаблон делал MODx - фанат (папка assets присутствует в путях)

Кстати, у вас косяк с комментами. В исходнике незакрытый комментарий - у моего браузера крышу сорвало, страницу он вообще косячно отображает. Приблизительно 121 строка С этим надо что-то делать

<!-- <div id="twitterWrap">
  <div class="fa fa-twitter"></div>
    <div id="twitterHolder">
    <div id="twitterFeed"></div>
  </div>
</div>

<!-- Footer -->

Я стесняюсь спросить - вы о верстке имеете представление?
Способов куча, надо правильно разметить HTML в шаблоне
Вообще, надо правильную разметку страницы сделать.
У вас шаблон явно адаптивный, т.е. responsive
С библиотекой, которой вы пользуетесь, я не знаком, с шаблоном - тоже.
Но думаю, что у авторов responsive-библиотеки должно быть какое-то описание блоков, как их корректно размещать

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

Подписи нет

Поделиться

5 (2014-08-15 15:42:28 отредактировано Аркадий)

Re: Как добавить сайтбар справа в теме Inspire?

В общем этта - на работе у меня нет гетсимпла, а поэтому ковырялся сразу в коде html страницы. Удалите нах лишние коменты и неиспользуемые пустые divы, некоторые из них разваливают макет на экране

Там, где я приложил свою трясущуюся руку - отмечено в коментах.

Как изменить для этой страницы шаблон - надеюсь, догадаетесь сами
Удачи вам в ваших темных делах

Я сохранил этот файл как index.html на локале - в FF у меня все отлично работает
Код получился типа валидный Ну да, еще h1 я поменял на h3 в блоке logo, но это ничего не дало, мне не нравятся оба решения. Ну как сделать чтобы заголовок не разъезжался на 2 строки - сами сообразите

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>
Оформить и купить справку в бассейн-
Медсправки для бассейна в Киеве</title>
<meta name="robots" content="index, follow">

<!-- CSS -->
<link href="http://med-spravki.com.ua/theme/inspire/style.css?v=3.3.2" rel="stylesheet">
<link href="http://med-spravki.com.ua/theme/inspire/assets/css/main.css?v=3.3.2" rel="stylesheet">
<link href="http://med-spravki.com.ua/theme/inspire/assets/css/responsive.css?v=3.3.2" rel="stylesheet">
<link href="http://med-spravki.com.ua/theme/inspire/assets/css/sidr.css?v=3.3.2" rel="stylesheet">
<link href="http://med-spravki.com.ua/theme/inspire/assets/css/font-awesome.css?v=3.3.2" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
<meta name="keywords" content="getsimple, easy, content management system" />
<link rel="canonical" href="http://med-spravki.com.ua/" />
</head>

<body id="index" >

<!-- Hero -->

<div class="heroHolder">
  <div class="heroWrap" style="background:   url(http://med-spravki.com.ua/theme/inspire/assets/images/pattern.png), url(http://med-spravki.com.ua/theme/inspire/assets/images/homebanner.jpg); background-position: top center,  top center; background-repeat:repeat,  no-repeat ; background-size:auto, cover ">
    <div class="hero">
      <h1>Медсправки для бассейна в Киеве</h1>
      <p>Оформление за 30 минут</p>
      <p><a href="#Get">Узнать подробнее...</a></p>
    </div>
  </div>
</div>

<!-- Header -->

<div class="headerWrap" id="Get">
  <div class="headerTop"> </div>
  <div class="header"> 
    
    <!-- Logo -->
    
    <div class="logo">
      <h3><a href="http://med-spravki.com.ua/" >Медсправки для бассейна в Киеве</a></h3>
    </div>
    
    <!-- Mobile -->
   <!-- <div id="mobile-header"> <a id="responsive-menu-button" href="#sidr-main"><img src="http://med-spravki.com.ua/theme/inspire/assets/images/menu.png" alt="Menu"></a> </div> -->
    
    <!-- Main Menu -->
    
   <!-- <div class="menuWrap">
      <nav class="mainMenu">
        <ul>
          <li class="index current active"><a href="http://med-spravki.com.ua/" title="Оформить и купить справку в бассейн">Главная</a></li>
        </ul>
      </nav>
    </div> -->
    
    <!-- socialMedia -->
    
      <nav class="socialMedia">
          </nav>
  </div>
</div>    


<!-- здесь я начал ворочать 

******************************************************


Добавил в разметку блоки с классами sidebar, sidebarLeft и sidebarRight

-->



<div class="contentArea">
  <div class="mainContentArea"> 
  <div class="sidebar">
  
 <div class="sidebarLeft">
  
         <!-- page content -->
    <h3>Стоимость справки для&nbsp;бассейна — &nbsp;100 грн</h3>

<p>Прекрасно, что&nbsp;в сегодняшние&nbsp;времена многие люди тянутся&nbsp;к спорту.&nbsp;Притом&nbsp;не просто&nbsp;так для формальности,&nbsp;а для&nbsp;поддержания здорового духа, как говорится.&nbsp;И не удивительно,&nbsp;что большинство&nbsp;из них&nbsp;предпочитают плавание. Потому что такие занятия приносят&nbsp;не только&nbsp;пользу для организма, а&nbsp;и огромноеудовольствие.</p>

<p>Занятия плаванием расслабляют организм, снимают стресс,&nbsp;и что&nbsp;главное, прорабатывают все группы мышц.&nbsp;В водной&nbsp;среде нормализуется кожное дыханиеи улучшается&nbsp;легочное.&nbsp;Но чтобы&nbsp;достичь максимальных результатов, нужно заниматься систематически. Идеально подходит для этого бассейн.</p>

<p>Для его посещения необходимо приобрести специальную экипировку (костюм, шапочку),&nbsp;а чтобы&nbsp;получить допуск нужно предъявить медицинскую справку, которая подтвердит хорошее состояние здоровья. Медсправка для бассейна является специальным бланком&nbsp;со штампами&nbsp;и считается&nbsp;медицинским документом.</p>

<p>Чтобы получить этот заветный документ, нужно пройти обследование&nbsp;у некоторых&nbsp;врачей: дерматолога, который оценит состояние кожных покровов, гинеколога (проходят женщины)&nbsp;и терапевта,&nbsp;который посмотрит общее состояние здоровья. Обязательно&nbsp;к терапевту&nbsp;нужно идти&nbsp;с результатом&nbsp;флюорографии&nbsp;и общимианализами крови&nbsp;и мочи.</p>

<p>Как правило, эти процедуры&nbsp;в районной&nbsp;поликлинике занимают немало драгоценного времени (до&nbsp;3–4 дней)&nbsp;с учетом&nbsp;простаивания&nbsp;в очередях.&nbsp;Но зачем&nbsp;терять свое время&nbsp;и спокойствие,&nbsp;когда можно легко оформить справку&nbsp;в бассейн&nbsp;за полчаса&nbsp;без простаивания&nbsp;в очереди.&nbsp;В нашей&nbsp;клинике это возможно. Просто позвоните&nbsp;и попросите&nbsp;записать вас&nbsp;на удобное&nbsp;время, даже можно&nbsp;на выходной день.</p>

<p>Как правило, эти процедуры&nbsp;в районной&nbsp;поликлинике занимают немало драгоценного времени (до&nbsp;3–4 дней)&nbsp;с учетом&nbsp;простаивания&nbsp;в очередях.&nbsp;Но зачем&nbsp;терять свое время&nbsp;и спокойствие,&nbsp;когда можно легко оформить справку&nbsp;в бассейн&nbsp;за полчаса&nbsp;без простаивания&nbsp;в очереди.&nbsp;В нашей&nbsp;клинике это возможно. Просто позвоните&nbsp;и попросите&nbsp;записать вас&nbsp;на удобное&nbsp;время, даже можно&nbsp;на выходной день.</p>

<p>Как правило, эти процедуры&nbsp;в районной&nbsp;поликлинике занимают немало драгоценного времени (до&nbsp;3–4 дней)&nbsp;с учетом&nbsp;простаивания&nbsp;в очередях.&nbsp;Но зачем&nbsp;терять свое время&nbsp;и спокойствие,&nbsp;когда можно легко оформить справку&nbsp;в бассейн&nbsp;за полчаса&nbsp;без простаивания&nbsp;в очереди.&nbsp;В нашей&nbsp;клинике это возможно. Просто позвоните&nbsp;и попросите&nbsp;записать вас&nbsp;на удобное&nbsp;время, даже можно&nbsp;на выходной день.</p>

<p>Как правило, эти процедуры&nbsp;в районной&nbsp;поликлинике занимают немало драгоценного времени (до&nbsp;3–4 дней)&nbsp;с учетом&nbsp;простаивания&nbsp;в очередях.&nbsp;Но зачем&nbsp;терять свое время&nbsp;и спокойствие,&nbsp;когда можно легко оформить справку&nbsp;в бассейн&nbsp;за полчаса&nbsp;без простаивания&nbsp;в очереди.&nbsp;В нашей&nbsp;клинике это возможно. Просто позвоните&nbsp;и попросите&nbsp;записать вас&nbsp;на удобное&nbsp;время, даже можно&nbsp;на выходной день.</p>

<p>Теперь купить справку&nbsp;в бассейн&nbsp;стало&nbsp;значительно проще!</p>
      </div>

<div class="sidebarRight">
<h3>My fucking sidebar</h3>
<p>А сюда лепим get_component</p>
</div>


</div>
</div>
 
<!-- здесь я ворочать закончил 

******************************************************************************************




--> 
 
  
  <!-- page footer -->
  
</div>
<!-- <div id="twitterWrap"> 
  <div class="fa fa-twitter"></div>
    <div id="twitterHolder">
    <div id="twitterFeed"></div>
  </div> 
</div> -->

<!-- Footer -->

<div class="footerWrap">
  <div class="footer">
   <!-- <div class="footerLogo"> 
      <h2><a href="http://med-spravki.com.ua/" >
        Медсправки для бассейна в Киеве        </a></h2>
    </div> -->
  <!--  <div class="footermenu">
      <ul> 
        <li class="index current active"><a href="http://med-spravki.com.ua/" title="Оформить и купить справку в бассейн">Главная</a></li>
      </ul>
    </div> -->
    <div class="copyright">
      <p>
                <br />
        <a href="http://med-spravki.com.ua/">Медсправки для бассейна в Киеве</a> &copy; 2014</p>
        
        
    </div>
    
    <!-- To Top -->
    <div class="toTop"><a href="#toTop"></a>Top</div>
  </div>
  
  
  
</div>

<!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 

<!--[if lt IE 9]>

            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]--> 

<!-- Javascript --> 
<script src="http://med-spravki.com.ua/theme/inspire/assets/js/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="http://med-spravki.com.ua/theme/inspire/assets/js/twitterFetcher.js"></script> 
<script>
      
      twitterFetcher.fetch('', '', 3, true, true, true, '', false, handleTweets);

      function handleTweets(tweets){
          var x = tweets.length;
          var n = 0;
          var element = document.getElementById('twitterFeed');
          var html = '<ul>';
          while(n < x) {
            html += '<li>' + tweets[n] + '</li>';
            n++;
          }
          html += '</ul>';
          element.innerHTML = html;
      }

function autoScroll() {
    var itemHeight = $('#twitterFeed li').outerHeight();
    var moveFactor = parseInt($('#twitterFeed').css('top')) + itemHeight;
    $('#twitterFeed').animate({
        'top' : moveFactor
    }, 'slow', 'linear', function(){
        $("#twitterFeed li:first").before($("#twitterFeed li:last"));
        $('#twitterFeed').css({'top' : '-6em'});
    });
};
var moveScroll = setInterval(autoScroll, 6000);
</script> 
<script src="http://med-spravki.com.ua/theme/inspire/assets/js/sidr.js"></script> 
<script src="http://med-spravki.com.ua/theme/inspire/assets/js/waypoints.js"></script> 
<script src="http://med-spravki.com.ua/theme/inspire/assets/js/waypoints-sticky.js"></script> 
<script>jQuery(document).ready(function($){ $('img').removeAttr('width height'); });</script> 
<script> jQuery('#responsive-menu-button').sidr({ name: 'sidr-main', source: '.mainMenu' }); </script> 
<script src="http://med-spravki.com.ua/theme/inspire/assets/js/scripts.js"></script>
</body>
</html>
Подписи нет

Поделиться

6

Re: Как добавить сайтбар справа в теме Inspire?

С версткой знаком поверхностно, сайт переделываю методом тыка.

Пробовал интегрировать ваш код в дизайн, выдает ошибку.

Вам в личку сбросил данные для входа в админку тестового сайта, можете на живом сайте внести ваши правки?

Поделиться

7 (2014-08-15 19:33:15 отредактировано Аркадий)

Re: Как добавить сайтбар справа в теме Inspire?

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

Подписи нет

Поделиться

8

Re: Как добавить сайтбар справа в теме Inspire?

Ан нет - ура дорогам России! Родственники застряли в пробке на федералке часа на 4


Вроде сделал я сайдбар на странице, ошибок никаких не вижу. В бэкапе у тебя создал резервную копию сайта до моих изменений, подбери ее там. Пароль и логин смени.

Удачи

Подписи нет

Поделиться

9

Re: Как добавить сайтбар справа в теме Inspire?

И еще ...

Мне кажется, в стандартной теме сайдбар несколько узковат
Его ширину можно изменить, поигравшись с css-свойством width блоков sidebarRight и sidebarLeft

Они прописаны ориентировочно в строках 336 и 337 файла main.css

сейчас там как-то так:
sidebarRight {
.......
width:20%;
}


sidebarLeft {
.......
width:76%;
}

Поиграй с этими цифрами, например, сделай width 56% и 40%, короче, увидишь, что происходит, только сумма width этих блоков должна быть равна 96%, чтобы макет не разъехался, и трогать можно только эти значения width, там в файле есть и другие (например, 100%), но они касаются отображения этих блоков на экранах мобильных устройств, их менять не нужно.

Подписи нет

Поделиться

10

Re: Как добавить сайтбар справа в теме Inspire?

Аркадий, большое спасибо за помощь! Очень выручил.

Поделиться