по следам OCTOPUSa

#1 14 февраля 2013 в 22:13

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

http://aksucity.net

#2 15 февраля 2013 в 01:15

Вагон и маленькая тележка. Почитайте мой блог.

Skype: pasha--g

#3 15 февраля 2013 в 20:51

Pasha, спаибо всё работает! Но в таком варианте неудобство в том что нужно знать какие префиксы прописывать

http://aksucity.net

Сегодня в 17:58

#4 15 февраля 2013 в 20:58

Ваш изначальный вопрос был задан совершенно четко и недвусмысленно. Я вам на него и ответил. Как всем этим добром управлять в дальнейшем это уже дело десятое. Хотите скриптами динамически меняйте, кто мешает…

Skype: pasha--g

#5 15 февраля 2013 в 20:59

Pasha, я к вам нисколько не с притензиями а наоборот с благодарностью.

http://aksucity.net

#6 15 февраля 2013 в 21:09

Так я и ничего, возможно просто немного неправильно выразился… :)

Skype: pasha--g

#7 16 февраля 2013 в 15:16

Pasha, почитав ваш блог разобрался со стилями и префиксами. решил пойти немного дальше но опять тупик.
Решил сделать для модулей пиктограмму (также через стили подключается).

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

это в module.tpl:

 
<div {if $mod.css_prefix!=''} class="module {$mod.css_prefix}" {else} class="module"{/if}>
    {if $mod.showtitle neq 0}
        <div {if $mod.css_prefix!=''} class="moduletitle {$mod.css_prefix}" {else} class="moduletitle"{/if}>
		<div {if $mod.css_prefix!=''} class="moduletitle_pic {$mod.css_prefix}" {else} class="moduletitle_pic"{/if}></div>
            {$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 {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}>
         {$mod.body}
      </div>
</div>

это в css файле:
border сделал 1px для наглядности.

 
/*-------------------Общий стиль для всех модулей------------------------------------*/
/*Контейнер модуля*/
.module{
   border:0px solid green;
   position:relative;
   padding:8px 5px 5px 5px; 
   margin:0px 0px 12px 0px;
 }
 /*Заголовок модуля*/
.moduletitle{ 
    border:1px solid red;
    position:relative;
    display:block;
    height:30px;
    color: #fff;
    font-size: 14pt;
    text-shadow: 0px 1px 2px #000;
    background:url(../images/t_mod_bg.png) repeat-x;
    background-color:#298fde;	
    padding-left:8px;
    border-radius:4px;
    box-shadow:0px 1px 4px rgba(50, 50, 50, 0.55);
    margin:0px 5px 0px 5px;    
    z-index:4;
} 
 
/*Иконка в заголовоке модуля*/
.moduletitle_pic{
    border:1px solid #000;
    position:absolute;
    left:5px;
    top:-8px;
    height:48px;
    width:48px;
    z-index:5; 
}
 /*Контент модуля*/
.modulebody{
    border:1px solid blue;
    position:relative;
    top:10px;
    padding:10px 10px 5px 10px;
    margin:-10px 0px 0px 0px;	
    border-radius:5px 5px 5px 5px;
    background: #E0EAEF;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
.padded {
    position:relative;
    top:0px;
    padding-top:20px;
}
 
/******************************* Дополнительные стили для модулей *********************************/
 /*Цветные заголовоки модулей*/
.orange>.moduletitle{background-color:#FFA500;}
.green>.moduletitle{background-color:#008000;}
.lime>.moduletitle{background-color:#00FF00;}
 
/*Пиктограммы в заголовках модулей*/
/* опрос */
.question>.moduletitle_pic{background:url(../images/mpic/question.png) no-repeat left top;}
/* Форум */
.comments>.moduletitle_pic { background:url(../images/mpic/comments.png) no-repeat left top;}

Как сделать чтоб если есть пиктограмма, то название модуля смещалось в право относительно пиктограммы?

http://aksucity.net

#8 16 февраля 2013 в 16:04

Что-то вы перемудрили слишком. Для начала в шаблоне вывода все вот эти выкрутасы

{if $mod.css_prefix!=''} class="moduletitle {$mod.css_prefix}" {else} class="module"{/if}

просто замените на

class="moduletitle{if $mod.css_prefix} {$mod.css_prefix}{/if}"

Теперь в упрощенном варианте, но думаю разберетесь. В css прописываете общий стиль для всех (в даном случае заголовков):

.moduletitle{
    // Какие-то общие стили для всех заголовков модулей
}

А потом начинайте плодить вариации:

.style_red{
    padding-left:25px;
    background:red url(иконка для этого типа);
    color:blue;
}
.style_green{
    padding-left:25px;
    background:green url(иконка для этого типа);
    color:#fff;
}
// ну и так далее...

Skype: pasha--g

#9 16 февраля 2013 в 16:09

К одному и тому же селектору можно применять много классов. То есть в качестве префикса вы можете через пробел дописывать вообще все что хотите. Отдельно цвет, отдельно иконку, отдельно шрифт… На что хватит фантазии.

Skype: pasha--g

#10 16 февраля 2013 в 16:14

Так я думал в начале сделать — padding-left, а если мне нужен модуль с цветным заголовком НО без пиктограммы?

http://aksucity.net

#11 16 февраля 2013 в 16:18

К одному и тому же селектору можно применять много классов. То есть в качестве префикса вы можете через пробел дописывать вообще все что хотите. Отдельно цвет, отдельно иконку, отдельно шрифт… На что хватит фантазии.

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

Skype: pasha--g

Помогите с шириной полей

Instantcms 2.0 шаблоны

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

по следам OCTOPUSa

InstantCMS Team

О проекте

Поддержка

Дополнения