Новая позиция для виджета и логотип в центре в дефолтном шаблоне. 2.X

 
Посетитель
small user social cms
Медаль
Сообщений: 212
Нужна помощь по стилям.
Была задача сделать новую позицию в дефолтном шаблоне слева от логотипа, логотип поместить в центр между позициями.

Новую позицию я вывел, все работает, лого по центру, виджеты слева и справа, хотя мой код css мне кажется не грамотным.

Но это половина решения. Теперь надо в мобильной версии, чтобы левый виджет был сверху, лого по середине ниже, правый виджет еще ниже лого. Мучаюсь второй день, не получается, css знаю на начальном уровне.
Может кто нибудь подскажет как это сделать?


Новая позиция:

/templates/default/main.tpl.php
Код PHP:
  1. <header>
  2. <div class="widget_ajax_wrap" id="widget_pos_header_left"><?php $this->widgets('header_left', false, 'wrapper_plain'); ?></div>
  3. <div id="logo">
  4. <?php if($core->uri) { ?>
  5. <a href="<?php echo href_to_home(); ?>"></a>
  6. <?php } else { ?>
  7. <span></span>
  8. <?php } ?>
  9. </div>
  10. <div class="widget_ajax_wrap" id="widget_pos_header"><?php $this->widgets('header', false, 'wrapper_plain'); ?></div>
  11. </header>
/templates/default/scheme.html
Код PHP:
  1. <table>
  2. <tr>
  3. <td>
  4. {position:header_left}
  5. </td>
  6. <td width="30%" class="filled">
  7. {cell:LANG_PAGE_LOGO}
  8. </td>
  9. <td>
  10. {position:header}
  11. </td>
  12. </tr>
  13. </table>

/templates/default/css/theme-layout.css
Код PHP:
  1.  
  2. #logo {
  3. width: 33%;
  4. display: inline-block;
  5. text-align: center;
  6. }
  7.  
  8. #widget_pos_header_left {
  9. width: 33%;
  10. display: inline-block;
  11. }
  12.  
  13. #widget_pos_header {
  14. width: 33%;
  15. display: inline-block;
  16. text-align: right;
  17. }
  18.  
Посетитель
small user social cms
Медаль
Сообщений: 346
почитайте это http://htmlbook.ru/css/value/media
и после чего добавить условие в css (/templates/default/css/theme-layout.css) для
Код PHP:
  1. @media screen and (max-width: 640px) {
  2. #logo { width: 100%; display: block;}
  3. #widget_pos_header_left { width: 100%; display:block; }
  4. #widget_pos_header { width: 100%; display: block; }
  5. }
Редактировалось: 3 раз (Последний: 24 июня 2019 в 21:13)
Реклама
cms
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2791
Код CSS:
  1.  
  2. @media screen and (max-width: 800px) {
  3. #layout header #logo,
  4. #layout header #widget_pos_header_left,
  5. #layout header #widget_pos_header {
  6. box-sizing: border-box;
  7. display: block;
  8. width: 100%;
  9. }
  10. }
  11. /*
  12. 800 - размер по горизонтали, когда нужно переключить в "мобильный" вид
  13. отступы добавьте по вкусу
  14. возможно, некоторым свойствам придётся назначить максимальный приоритет (!important)
  15. */
  16.  
Лучше подключить свой стилевой файл после всех остальных и изменения делать в нём (здоровее будете).
Редактировалось: 2 раз (Последний: 24 июня 2019 в 21:13)
Украинский для инстант
Посетитель
small user social cms
Медаль
Сообщений: 346
Олег Васильевич я:
Лучше подключить свой стилевой файл и изменения делать в нём (здоровее будете).
Это точно!
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.