Как модулю меню дать свое оформление??

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем ladyvalkyr, 20.09.2010.

  1. Offline

    ladyvalkyr Недавно здесь

    Регистрация:
    20.09.2010
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Женский
    Доброго времени суток!
    Есть понравившийся шаблон, в котором предусмотрен обычный вывод главного меню, т.е без боксов просто список. Но стиль модуля стоит style=«rounded». Я добавила следующий код в Цсс
    Код (CODE):
    1. div.module_menu {
    2.     background: url(../images/blue/mw_box_br.png) 100% 100% no-repeat;
    3. }
    4. div.module_menu div {
    5.     background: url(../images/blue/mw_box_bl.png) 0 100% no-repeat;
    6. }
    7. div.module_menu div div {
    8.     background: url(../images/blue/mw_box_tr.png) 100% 0 no-repeat;
    9. }
    10. div.module_menu div div div {
    11.     background: url(../images/blue/mw_box_tl.png) 0 0 no-repeat;
    12. }


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

    Примерно это выглядит как на прилагаемом рисунке во вложении
    Пробовала вставить конструкцию типа (как например в шаблоне bluewater)
    Код (CODE):
    1. <div class="art-Block">
    2.     <div class="art-Block-tl"></div>
    3.     <div class="art-Block-tr"></div>
    4.     <div class="art-Block-bl"></div>
    5.     <div class="art-Block-br"></div>
    6.     <div class="art-Block-tc"></div>
    7.     <div class="art-Block-bc"></div>
    8.     <div class="art-Block-cl"></div>
    9.     <div class="art-Block-cr"></div>
    10.     <div class="art-Block-cc"></div>
    11.     <div class="art-Block-body">

    Но видно в шаблонах с такой конструкцией как то хитро прописаны функции вывода оформления модуля

    Подскажите пожалуйста как сделать такое меню??
     

    Вложения:

    • 11.jpg
      11.jpg
      Размер файла:
      15.8 КБ
      Просмотров:
      2
  2.  
  3. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    в шаблонах такого типа все эти элементы помещены на Z-INDEX ниже чем контент который выводится внутри

    смысл в том что сначала выводится рамочка состоящая все из 3-х рисунков, а потом только контент, посмотри в CSS как это сделано
     
  4. Offline

    ladyvalkyr Недавно здесь

    Регистрация:
    20.09.2010
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Женский
    Вам спасибо за ответ!
    Вот тока не пойму: нужно ставить Z-INDEX мЕньший для дива содержащего рисунок который и вылазиет за границы?
    Код (CODE):
    1. div.module_menu {
    2.     background: url(../images/mw_box_tl.png) 0 0 no-repeat;
    3. }
    4. div.module_menu div {
    5.     background: url(../images/mw_box_bl.png) 0 100% no-repeat;background
    6. }
    7. div.module_menu div div {
    8.     background: url(../images/mw_box_br.png) 0 50% repeat-y;
    9.           z-index:-1;
    10. }

    Не работает почему-то(

    Или данной конструкцией я не добьюсь результатов и надо менять содержимое модуля меню, прописывать свою функцию function modChrome_Style($module, &$params, &$attribs)??
     
  5. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    я описывал как работает структура <div class="art-Block"> из первого поста

    описание структуры ROUNDED из какого-то CSS файла:
    Код (CODE):
    1. /* Round Conners example */
    2. .module {background: url(../../../auto-mag/images/bl_grey.gif) 0 100% no-repeat #dddddd; width: 20em; margin-bottom: 10px;}
    3. .module div {background: url(../../../auto-mag/images/br_grey.gif) 100% 100% no-repeat}
    4. .module div div {background: url(../../../auto-mag/images/tl_grey.gif) 0 0 no-repeat}
    5. .module div div div {background: url(../../../auto-mag/images/tr_grey.gif) 100% 0 no-repeat; padding:10px; padding-top: 0px; padding-bottom: 2px;}
    6. .module div div div div {background: none;}

    при этом в index.php пишется:
    Код (PHP):
    1. <jdoc:include type="modules" name="left" style="rounded" />


    у меня такое работает
     
  6. Offline

    ladyvalkyr Недавно здесь

    Регистрация:
    20.09.2010
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Женский
    Может я что-то не так делаю, почему эти вертикальные полосы вылазиют, прилагаю более точную картинку неполучающегося меню. Три рисунка: верх, низ и середина которая должна ратсягиваться по высоте.Я пробовала устанавливать поля, всеравно они равняются по первому диву, который div.module_menu.
    Вот как в коде
    Код (CODE):
    1. div.module_menu {
    2.     background: url(../images/mw_box_tl.png) 0 0 no-repeat;
    3. }
    4. div.module_menu div {
    5.     background: url(../images/mw_box_bl.png) 0 100% no-repeat;background
    6. }
    7. div.module_menu div div {
    8.     background: url(../images/mw_box_br.png) 0 50% repeat-y;
    9. }
    10. div.module_menu {
    11.     margin: 0;
    12.     padding: 0;
    13.    
    14.     padding-bottom: 0;
    15.     margin-bottom: 15px;
    16. }
    17. div.module_menu div div div {
    18.     padding: 10px;
    19.     padding-top: 30px;
    20.     padding-bottom: 15px;
    21.     width: auto;
    22. }
    23. div.module_menu div div div div {
    24.     background: none;
    25.     padding: 0;
     

    Вложения:

    • 66.jpg
      66.jpg
      Размер файла:
      27 КБ
      Просмотров:
      3
  7. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    странная какая то штука:
    а где в этих DIV'ах картинки?

    и мой вариант не подошёл?
     
  8. Offline

    ladyvalkyr Недавно здесь

    Регистрация:
    20.09.2010
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Женский
    Еще раз большое спасибо за ваш ответ!
    Я попробовала сделать так как вы сказали. Я поэкспериментировала со стилями меню в настройках самого модуля, остановилась на Legacy плоский список, и верх перестал вылазить (случайно обнаружила)!! вот лучшее что у меня получилось.
    Делать длинные и широкие части которые должны быть резиновыми нет смысла, картинки с тенями друг на друга накладываются, выходит нужно точно подмерять все стыки? и точно по ширине отмерять картинки в моем случае?
     

    Вложения:

    • 77.jpg
      77.jpg
      Размер файла:
      30 КБ
      Просмотров:
      2
  9. Offline

    ladyvalkyr Недавно здесь

    Регистрация:
    20.09.2010
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Женский
    Увы! никакого отношения стили не имеют(( убрала пару пунктов меню, оно сузилось по высоте и снова они вылазиют наверх(((
     

    Вложения:

    • 88.jpg
      88.jpg
      Размер файла:
      29.2 КБ
      Просмотров:
      1
  10. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    да возможно
    а вот
    можно сделать при помощи прибавления единички к репутации ;)
     
    ladyvalkyr нравится это.
  11. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    есть вариант сделать вертикальные линии высотой в 5-ть пикселей и просто размножить их по высоте, если почитать про background директиву используемую в этом случае, то там есть описание что такое размножение по вертикали и горизонтали

    или давай прикрепляй свой шаблон (только весь а не отдельные файлы) к посту после посмотрим что надо сделать
     
  12. Offline

    ladyvalkyr Недавно здесь

    Регистрация:
    20.09.2010
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Женский
    Без вариантов - пробовала, он их размножает до верхней границы, всеравно вылазиет.
    Прикрепила, описание неполучающегося меню в template_css
    4 файла нового оформления меню в images, в templateDetails не описаны
    Спасибо вам за помощь! +1;)
     

    Вложения:

    Последнее редактирование: 20.09.2010
  13. Offline

    ladyvalkyr Недавно здесь

    Регистрация:
    20.09.2010
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Женский
    Проблему решила!
    Путем выбора стиля «xhtml» и небольшими дополнениями функции function modChrome_xhtml
     

Поделиться этой страницей

Загрузка...