по следам OCTOPUSa

 
Посетитель
small user social cms
Медаль
Сообщений: 434
В шаблоне Octopus понравилась возможность укзать префикс для заголовка модуля или для тела модуля.
Вот сижу ломаю голову как реализовать возможность указывать сразу два префикса и для заголовка модуля и для тела, была бы неплохая возможность для комбинироваия.
Есть у кого-нибудь идеи на этот счёт?
Редактировалось: 1 раз (Последний: 14 февраля 2013 в 22:53)
http://aksucity.net
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
Вагон и маленькая тележка. Почитайте мой блог.
Skype: pasha--g
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 434
Pasha, спаибо всё работает! Но в таком варианте неудобство в том что нужно знать какие префиксы прописывать
http://aksucity.net
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
Ваш изначальный вопрос был задан совершенно четко и недвусмысленно. Я вам на него и ответил. Как всем этим добром управлять в дальнейшем это уже дело десятое. Хотите скриптами динамически меняйте, кто мешает.......
Skype: pasha--g
Посетитель
small user social cms
Медаль
Сообщений: 434
Pasha, я к вам нисколько не с притензиями а наоборот с благодарностью.
http://aksucity.net
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
Так я и ничего, возможно просто немного неправильно выразился...... :)
Skype: pasha--g
Посетитель
small user social cms
Медаль
Сообщений: 434
Pasha, почитав ваш блог разобрался со стилями и префиксами. решил пойти немного дальше но опять тупик.
Решил сделать для модулей пиктограмму (также через стили подключается).

На скрине видно если применить обычные стили для модуля (по умолчанию) то нет ни пиктограммы и цвет заголовка не меняется.
на втором рисунке с помощью префиксов изменен цвет заголовка и так же с помощью префиксов я прикрутил пиктограмму для модуля.
Но вот проблема с заголовком - называние модуля не смещается относительно пиктограммы.
по следам OCTOPUSa

это в module.tpl:
Код PHP:
  1.  
  2. <div {if $mod.css_prefix!=''} class="module {$mod.css_prefix}" {else} class="module"{/if}>
  3. {if $mod.showtitle neq 0}
  4. <div {if $mod.css_prefix!=''} class="moduletitle {$mod.css_prefix}" {else} class="moduletitle"{/if}>
  5. <div {if $mod.css_prefix!=''} class="moduletitle_pic {$mod.css_prefix}" {else} class="moduletitle_pic"{/if}></div>
  6. {$mod.title}
  7. {if $cfglink}
  8. <span class="fast_cfg_link">
  9. <a href="javascript:moduleConfig({$mod.id})" title="Настроить модуль">
  10. <img src="/templates/{template}/images/icons/settings.png"/>
  11. </a>
  12. </span>
  13. {/if}
  14. </div>
  15. {/if}
  16. <div {if $mod.css_prefix!=''} class="modulebody {$mod.css_prefix}{if $mod.showtitle neq 0} padded{/if}" {else} class="modulebody {if $mod.showtitle neq 0} padded{/if}"{/if}>
  17. {$mod.body}
  18. </div>
  19. </div>
  20.  
это в css файле:
border сделал 1px для наглядности.
Код PHP:
  1.  
  2. /*-------------------Общий стиль для всех модулей------------------------------------*/
  3. /*Контейнер модуля*/
  4. .module{
  5. border:0px solid green;
  6. position:relative;
  7. padding:8px 5px 5px 5px;
  8. margin:0px 0px 12px 0px;
  9. }
  10. /*Заголовок модуля*/
  11. .moduletitle{
  12. border:1px solid red;
  13. position:relative;
  14. display:block;
  15. height:30px;
  16. color: #fff;
  17. font-size: 14pt;
  18. text-shadow: 0px 1px 2px #000;
  19. background:url(../images/t_mod_bg.png) repeat-x;
  20. background-color:#298fde;
  21. padding-left:8px;
  22. border-radius:4px;
  23. box-shadow:0px 1px 4px rgba(50, 50, 50, 0.55);
  24. margin:0px 5px 0px 5px;
  25. z-index:4;
  26. }
  27.  
  28. /*Иконка в заголовоке модуля*/
  29. .moduletitle_pic{
  30. border:1px solid #000;
  31. position:absolute;
  32. left:5px;
  33. top:-8px;
  34. height:48px;
  35. width:48px;
  36. z-index:5;
  37. }
  38. /*Контент модуля*/
  39. .modulebody{
  40. border:1px solid blue;
  41. position:relative;
  42. top:10px;
  43. padding:10px 10px 5px 10px;
  44. margin:-10px 0px 0px 0px;
  45. border-radius:5px 5px 5px 5px;
  46. background: #E0EAEF;
  47. box-shadow: 0 0 5px rgba(0,0,0,0.4);
  48. }
  49. .padded {
  50. position:relative;
  51. top:0px;
  52. padding-top:20px;
  53. }
  54.  
  55. /******************************* Дополнительные стили для модулей *********************************/
  56. /*Цветные заголовоки модулей*/
  57. .orange>.moduletitle{background-color:#FFA500;}
  58. .green>.moduletitle{background-color:#008000;}
  59. .lime>.moduletitle{background-color:#00FF00;}
  60.  
  61. /*Пиктограммы в заголовках модулей*/
  62. /* опрос */
  63. .question>.moduletitle_pic{background:url(../images/mpic/question.png) no-repeat left top;}
  64. /* Форум */
  65. .comments>.moduletitle_pic { background:url(../images/mpic/comments.png) no-repeat left top;}
  66.  
Как сделать чтоб если есть пиктограмма, то название модуля смещалось в право относительно пиктограммы?
Редактировалось: 1 раз (Последний: 16 февраля 2013 в 15:26)
http://aksucity.net
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
Что-то вы перемудрили слишком. Для начала в шаблоне вывода все вот эти выкрутасы
Код PHP:
  1. {if $mod.css_prefix!=''} class="moduletitle {$mod.css_prefix}" {else} class="module"{/if}
просто замените на
Код PHP:
  1. class="moduletitle{if $mod.css_prefix} {$mod.css_prefix}{/if}"
Теперь в упрощенном варианте, но думаю разберетесь. В css прописываете общий стиль для всех (в даном случае заголовков):
Код CSS:
  1. .moduletitle{
  2. // Какие-то общие стили для всех заголовков модулей
  3. }
А потом начинайте плодить вариации:
Код CSS:
  1. .style_red{
  2. padding-left:25px;
  3. background:red url(иконка для этого типа);
  4. color:blue;
  5. }
  6. .style_green{
  7. padding-left:25px;
  8. background:green url(иконка для этого типа);
  9. color:#fff;
  10. }
  11. // ну и так далее...
Skype: pasha--g
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
К одному и тому же селектору можно применять много классов. То есть в качестве префикса вы можете через пробел дописывать вообще все что хотите. Отдельно цвет, отдельно иконку, отдельно шрифт.... На что хватит фантазии.
Skype: pasha--g
Посетитель
small user social cms
Медаль
Сообщений: 434
Так я думал в начале сделать - padding-left, а если мне нужен модуль с цветным заголовком НО без пиктограммы?
http://aksucity.net
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
К одному и тому же селектору можно применять много классов. То есть в качестве префикса вы можете через пробел дописывать вообще все что хотите. Отдельно цвет, отдельно иконку, отдельно шрифт.... На что хватит фантазии.

в css пропишите отдельно классы для цветов и иконок. Есть иконка, значит и отступ должен быть. В настройках потом просто суффиксы писать нужно двойные.
Skype: pasha--g
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.