Про css-префиксы в настройках модулей

#1 26 августа 2013 в 23:13

Уважаемые мастера, пожалуйста, расскажите подробнее как пользоваться css-префиксами? Не нашел на форуме ничего про это, в документации тоже…
например, я хочу для отдельного модуля уникальный бакграунд. Я догадываюсь, что с помощью префиксов это можно сделать — но не понимаю подробностей.

Спасибо!

#2 26 августа 2013 в 23:54

Объясняю, при добавлении css-префикса к основному классу див блока приплюсуется ваш css-префикс и получается новый класс, к которому вы можете применить ваши всевозможные стили. Например у меня:

<div class="col-md-{$mod.css_prefix}">
<div class="module">
    {if $mod.showtitle neq 0}
        <div class="moduletitle">
            {$mod.title}
            {if $cfglink}
                <span class="fast_cfg_link">
                    <a href="javascript:moduleConfig({$mod.id})" title="Настроить модуль">
                        <i class="icon-wrench"></i>
                    </a>
                </span>
            {/if}
			<div class="separator"></div>
        </div>
    {/if}
    <div class="modulebody">{$mod.body}</div>
</div>
</div>

<div class="col-md-{$mod.css_prefix}"> модуль обернут в див блок с классом col-md- а рядом с ним код для вывода цсс префикса, в админке я например дал значение префиксу 3 и получается у меня новый класс col-md-3, каждый класс у меня имеет свои свойства

.col-md-1 {
    width: 8.33333%;
}
.col-md-2 {
    width: 16.6667%;
}
.col-md-3 {
    width: 25%;
}
.col-md-4 {
    width: 33.3333%;
}
.col-md-5 {
    width: 41.6667%;
}
.col-md-6 {
    width: 50%;
}
.col-md-7 {
    width: 58.3333%;
}
.col-md-8 {
    width: 66.6667%;
}
.col-md-9 {
    width: 75%;
}
.col-md-10 {
    width: 83.3333%;
}
.col-md-11 {
    width: 91.6667%;
}
.col-md-12 {
    width: 100%;
}

таким образом в моем примере добавляя цсс префикс я могу изменять ширину модуля, можно задать разные свойства стилям и получить необходимый вам результат

Чем меньше знаешь - тем Больше тупой. OneMinima шаблон ICMS2

#3 27 августа 2013 в 19:45

угу… спасибо большое!
Но все же… Таким образом меняется только глобальный div, в который обернут весь модуль. А то что внутри? moduletitle, modulebody? как они подхватывают это дополнение? Например у меня в стилях такие позиции:
div.user5 .module, div.user5 .moduletitle и т.д.?

Сегодня в 21:53

#4 27 августа 2013 в 20:06

А то что внутри? moduletitle, modulebody? как они подхватывают это дополнение?
ALreD

только если вы переопределите стили
.module_"префикс" .moduletitle{стили}
.module_"префикс" .modulebody{стили}

так же можно любому элементу (который находится внутри блока c class="module_'префикс'") задать стили

пример:
.module_"префикс" .modulebody p,
.module_"префикс" .modulebody span,
.module_"префикс" .modulebody a,{стили}

#5 27 августа 2013 в 20:32

Imran, простите мой тупизм… все равно не понимаю… вот у меня есть описание модульной позиции:

div.pageUserBlock
{
    overflow: hidden;
}
div.user5
{
    float: right;
}
div.user5 .module
{
    width: 268px;
    overflow: hidden;
    margin-bottom: 10px;
}
div.user5 .moduletitle
{
    border: 1px solid #767f89;
    border-bottom: none;
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: url("../images/it_user5title.png") top left repeat-x;
    padding: 0 14px;
    font-size: 20px;
    text-shadow: 0 -1px 2px #333333;
    font-family: 'Open Sans Condensed';
    color: #ffffff;
    font-weight: bold;
}
div.user5 .modulebody
{
    border: 1px solid #d8d9dc;
    padding: 10px;
    border-top: none;
    overflow: hidden;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #f4f6f9;
}

как тут переназначить стили, что бы с префиксом, например "qwert1" у меня выводилось иное оформление модуля в этой позиции?

#6 27 августа 2013 в 20:48

как тут переназначить стили, что бы с префиксом, например "qwert1" у меня выводилось иное оформление модуля в этой позиции?
ALreD

html код модулей если покажете было бы замечательно

#7 27 августа 2013 в 20:52

div.user5 .qwert1module
{
width: 268px;
overflow: hidden;
margin-bottom: 10px;
}
div.user5 .qwert1moduletitle
{
border: 1px solid #767f89;
border-bottom: none;
height: 32px;
line-height: 32px;
overflow: hidden;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: url("../images/it_user5title.png") top left repeat-x;
padding: 0 14px;
font-size: 20px;
text-shadow: 0 -1px 2px #333333;
font-family: 'Open Sans Condensed';
color: #ffffff;
font-weight: bold;
}
div.user5 .qwert1modulebody
{
border: 1px solid #d8d9dc;
padding: 10px;
border-top: none;
overflow: hidden;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: #f4f6f9;
}

#8 27 августа 2013 в 22:56

Imran, ВОТ! спасибо огромное, когда увидел конкретный пример — у меня все получилось! Очень благодарен)
P.S. Что и подтверждает статус в Вашем профиле (плюсанул!)))

#9 27 августа 2013 в 23:06

Я показал свой шаблон модуля, в дефолтном шаблоне другой шаблон, когда вы добавляете цсс префикс там префикс добавляется к див блоку с классом moduletitle и modulebody, тоесть получается moduletitle_my_preffix, moduletitle_my_preffix и вы задаете стили для полученных классов.

<div class="{$mod.css_prefix}module">
    {if $mod.showtitle neq 0}
        <div class="{$mod.css_prefix}moduletitle">
            {$mod.title}
            {if $cfglink}
                <span class="fast_cfg_link">
                    <a href="javascript:moduleConfig({$mod.id})" title="Настроить модуль">
                        <img src="/templates/{template}/images/icons/settings.png"/>
                    </a>
                </span>
            {/if}
        </div>
    {/if}
    <div class="{$mod.css_prefix}modulebody">{$mod.body}</div>
</div>

Вот дефолтный шаблон, вы можете создать какой угодно шаблон. {$mod.css_prefix}-данный код выводит префик который вы пишите в админке

Чем меньше знаешь - тем Больше тупой. OneMinima шаблон ICMS2

#10 28 августа 2013 в 09:43

Imran, ВОТ! спасибо огромное, когда увидел конкретный пример — у меня все получилось! Очень благодарен)
P.S. Что и подтверждает статус в Вашем профиле (плюсанул!)))

ALreD

Пожалуйста, делиться тем, что знаю всегда готов joke

#11 19 марта 2015 в 15:12

у меня вопрос мне нужно чтоб модуль не отражался в мобильном не могу добавить class=.mobileNoDisplay помогите куда вставить чтоб не отражался модуль или компонент в мобильном