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

InstantCMS 2.X
#1 24 июня 2019 в 19:35
Нужна помощь по стилям.
Была задача сделать новую позицию в дефолтном шаблоне слева от логотипа, логотип поместить в центр между позициями.

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

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


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

/templates/default/main.tpl.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
  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
  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.  
#2 24 июня 2019 в 21:08
почитайте это htmlbook.ru/css/value/media
и после чего добавить условие в css (/templates/default/css/theme-layout.css) для
  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:09
  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.  
Лучше подключить свой стилевой файл после всех остальных и изменения делать в нём (здоровее будете).
#4 24 июня 2019 в 21:14

Лучше подключить свой стилевой файл и изменения делать в нём (здоровее будете).

Олег Васильевич я
Это точно!
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.