Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

Перестроение расположения модулей

Захожу иногда
mars18
Сообщений: 37
104 дня назад
Доброго времени суток!
Схематично нарисовал как будет выглядеть сайт, вернее расположение его модулей
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Понимаю, что средствами artisteer это не реализовать. А именно что нужно:
1) Чтобы левый сайт бар был до конца низа сайта, а футер снизу сбоку;
2) блоки модулей (1, 2, 3, 4 и навигация (position-2) см. рис) были над правым сайт баром;
3) Правый сайт бар просто уписался в футер, а футер был снизу.
Может кто то сталкивался с чем то подобным? Если да то подскажите куда идти и что нужно прописать в index.php и css.
Заранее спс!
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 916
2 дня назад
Проще такие выкрутасы делать в Themler, там можно штатными средствами такое сделать.
Но можно конечно и в ручную шаблон артистира поправить.

Для начала надо в программе сделать обычный трехколоночный шаблон.
Потом выбрать правильный макет страницы, я взял такой:



Экспортировать и установить как обычно.
Дальше самой хитрое, исправить в index.php... Попробую написать подробно, очень много зависит от правильности.

Находим в нем такие строки:

Код PHP:
  1.  
  2. <div class="art-layout-cell art-sidebar1">
  3. <?php echo $view->position('position-7', 'art-block'); ?>
  4. <?php echo $view->position('position-4', 'art-block'); ?>
  5. <?php echo $view->position('position-5', 'art-block'); ?>
  6.  
  7.  
  8.  
  9.  
  10. </div>
  11.  
Вырезаем это, и переносим сразу под закрывающий </header>
После этого надо сделать контейнер в котором будет находиться все что справа от левого сайдбара.

Сразу после той вставки что делали выше вставляем новый див <div class="wrapperright">
В итоге у меня получилось так:

Код PHP:
  1.  
  2.  
  3. .............
  4.  
  5. </header>
  6. <div class="art-layout-cell art-sidebar1">
  7. <?php echo $view->position('position-7', 'art-block'); ?>
  8. <?php echo $view->position('position-4', 'art-block'); ?>
  9. <?php echo $view->position('position-5', 'art-block'); ?>
  10.  
  11.  
  12.  
  13.  
  14. </div>
  15. <div class="wrapperright">
  16.  
  17. .......
  18.  
  19.  
Теперь этот <div class="wrapperright"> надо закрыть закрывающим </div>
Я закрыл его в конце страницы перед <?php echo $view->position('debug'); ?>

Теперь в стили template.css добаляем для этого нового контейнера стили:

Код PHP:
  1.  
  2.  
  3. .wrapperright {
  4. box-sizing: border-box;
  5. display: table-cell;
  6. position: relative;
  7. vertical-align: top;
  8. width: 800px;
  9. z-index: auto !important;
  10. }
  11.  
  12.  
Ну, и если с адаптивным дизайном, тогда в template.responsive.css добавить что то типа

Код PHP:
  1.  
  2. @media (min-width: 768px) and (max-width: 979px)
  3. {
  4. .wrapperright {
  5.  
  6. width: 100% !important;
  7.  
  8. }
  9. }
  10.  
  11. @media (min-width: 480px) and (max-width: 767px)
  12. {
  13. .wrapperright {
  14.  
  15. width: 100% !important;
  16.  
  17. }
  18. }
  19.  
  20. @media (max-width: 479px)
  21. {
  22. .wrapperright {
  23.  
  24. width: 100% !important;
  25.  
  26. }
  27. }
  28.  

Главное правильно расставить теги.
Захожу иногда
mars18
Сообщений: 37
104 дня назад
Доброго времени суток!
Проделал все как вы описали но получилась вот такая хрень
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

До этого было так
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Вот код моего index.php
Код PHP:
  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="<?php echo $document->language; ?>">
  3. <head>
  4. <jdoc:include type="head" />
  5. <link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/system.css" />
  6. <link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/general.css" />
  7.  
  8. <!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  9. <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.css" media="screen">
  10. <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/nepstyle.css" media="screen">
  11. <!--[if lte IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" media="screen" /><![endif]-->
  12. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto&amp;subset=latin,cyrillic">
  13.  
  14. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  15. <script>if ('undefined' != typeof jQuery) document._artxJQueryBackup = jQuery;</script>
  16. <script src="<?php echo $templateUrl; ?>/jquery.js"></script>
  17. <script>jQuery.noConflict();</script>
  18.  
  19. <script src="<?php echo $templateUrl; ?>/script.js"></script>
  20. <?php $view->includeInlineScripts() ?>
  21. <script>if (document._artxJQueryBackup) jQuery = document._artxJQueryBackup;</script>
  22. </head>
  23. <div class="nep-layout-cell nep-sidebar1">
  24. <?php echo $view->position('position-7', 'nep-block'); ?>
  25. <?php echo $view->position('position-4', 'nep-block'); ?>
  26. <?php echo $view->position('position-5', 'nep-block'); ?>
  27.  
  28. </div>
  29. <div class="wrapperright">
  30. <body>
  31.  
  32. <div id="nep-main">
  33. <?php if ($view->containsModules('position-1', 'position-28', 'position-29')) : ?>
  34. <nav class="nep-nav">
  35.  
  36. <?php if ($view->containsModules('position-28')) : ?>
  37. <div class="nep-hmenu-extra1"><?php echo $view->position('position-28'); ?></div>
  38. <?php endif; ?>
  39. <?php if ($view->containsModules('position-29')) : ?>
  40. <div class="nep-hmenu-extra2"><?php echo $view->position('position-29'); ?></div>
  41. <?php endif; ?>
  42. <?php echo $view->position('position-1'); ?>
  43.  
  44. </nav>
  45. <?php endif; ?>
  46. <div class="nep-sheet clearfix">
  47. <?php echo $view->position('position-15', 'nep-nostyle'); ?>
  48. <?php echo $view->positions(array('position-16' => 33, 'position-17' => 33, 'position-18' => 34), 'nep-block'); ?>
  49. <div class="nep-layout-wrapper">
  50. <div class="nep-content-layout">
  51. <div class="nep-content-layout-row">
  52. <?php if ($view->containsModules('position-7', 'position-4', 'position-5')) : ?>
  53.  
  54. <?php endif; ?>
  55.  
  56. <div class="nep-layout-cell nep-content">
  57. <?php
  58. echo $view->position('position-19', 'nep-nostyle');
  59. if ($view->containsModules('position-2'))
  60. echo artxPost($view->position('position-2'));
  61. echo $view->positions(array('position-20' => 50, 'position-21' => 50), 'nep-article');
  62. echo $view->position('position-12', 'nep-nostyle');
  63. echo artxPost(array('content' => '<jdoc:include type="message" />', 'classes' => ' nep-messages'));
  64. echo '<jdoc:include type="component" />';
  65. echo $view->position('position-22', 'nep-nostyle');
  66. echo $view->positions(array('position-23' => 50, 'position-24' => 50), 'nep-article');
  67. echo $view->position('position-25', 'nep-nostyle');
  68. ?>
  69. </div>
  70. <?php if ($view->containsModules('position-6', 'position-8', 'position-3')) : ?>
  71. <div class="nep-layout-cell nep-sidebar2">
  72. <?php echo $view->position('position-6', 'nep-block'); ?>
  73. <?php echo $view->position('position-8', 'nep-block'); ?>
  74. <?php echo $view->position('position-3', 'nep-block'); ?>
  75. </div>
  76. <?php endif; ?>
  77. </div>
  78. </div>
  79. </div>
  80. <?php echo $view->positions(array('position-9' => 33, 'position-10' => 33, 'position-11' => 34), 'nep-block'); ?>
  81. <?php echo $view->position('position-26', 'nep-nostyle'); ?>
  82.  
  83. <footer class="nep-footer">
  84. <?php if ($view->containsModules('position-27')) : ?>
  85. <?php echo $view->position('position-27', 'nep-nostyle'); ?>
  86. <?php else: ?>
  87. <p><a href="#">Link1</a> | <a href="#">Link2</a> | <a href="#">Link3</a></p>
  88. <p>Copyright © 2016. All Rights Reserved.</p>
  89. <?php endif; ?>
  90. </footer>
  91.  
  92. </div>
  93. </div>
  94. </div>
  95. <?php echo $view->position('debug'); ?>
  96. </body>
  97. </html>
и как дальше с (1, 2, 3, 4 и навигация (position-2) см. рис)
Ширина шаблона должна быть 1100 px под мобильные не нужно только мониторы. Макет был выбран вот этот
Постоянный участник
Handi
Медаль
Сообщений: 717
4 дня назад
mars18:
Проделал все как вы описали но получилась вот такая хрень

Насколько я понял по вашему коду, сделано с ошибками.
samson:
и переносим сразу под закрывающий </header>
а не </head> как у вас.

В этом макете нет header.

По вашему коду при таком макете надо может быть это:

Код PHP:
  1.  
  2. <div class="nep-layout-cell nep-sidebar1">
  3. <?php echo $view->position('position-7', 'nep-block'); ?>
  4. <?php echo $view->position('position-4', 'nep-block'); ?>
  5. <?php echo $view->position('position-5', 'nep-block'); ?>
  6.  
  7. </div>
  8. <div class="wrapperright">
  9.  
перенести ниже под <div id="nep-main"> и посмотреть. music
Редактировалось: 1 раз (Последний: 29 июля 2016 в 10:08)
качественное продвижение и раскрутка сайтов в сеопульте
Постоянный участник
Еремей
Медаль
Сообщений: 225
1 день назад
mars18:
2) блоки модулей (1, 2, 3, 4 и навигация (position-2) см. рис) были над правым сайт баром;

Из тех что есть можно сделать, где то тема была на форуме.
|
Перейти на форум:
Быстрый ответ
У вас нет прав, чтобы писать на форуме.