Применяя условные операторы можно манипулировать стилями по своему усмотрению.Разумеется подобную процедуру можно производить только в зоне действия самих операторов.То есть имеются в виду страницы модулей,например "Главная страница модуля","Страница материала и комментариев к нему".
Регулировки могут быть самыми разными,в зависимости от требуемого функционала затрагивающего изменение стилей.
Вот один из примеров задействованный мною на сайте "Русских шрифтов".
Были созданы стили управления визуальным показом шрифта на странице "Материала и комментариев" модуля "Блог":
Code
<style>
@font-face {
font-family:'$OTHER2$';
src: url('$OTHER1$');
}
table.vid {
border:1px solid transparent;
text-align:center;
}
table.vid td {
padding-top:5px;
padding-bottom:5px;
padding-right:10px;
padding-left:10px;
border:1px solid #559B36;
color:#000;
font-size:1em;
font-family:$OTHER2$;
}
#shrift:checked ~ .vid td {
font-size:1em;
}
#shrift1:checked ~ .vid td {
font-size:2em;
}
#shrift2:checked ~ .vid td {
font-size:3em;
}
#shrift3:checked ~ .vid td {
font-size:4em;
}
#shrift4:checked ~ .vid td {
font-size:5em;
}
#shrift5:checked ~ .vid td {
font-size:6em;
}
#colorshrift:checked ~ .vid td {
color:red;
}
#colorshrift1:checked ~ .vid td {
color:green;
}
#colorshrift2:checked ~ .vid td {
color:blue;
}
#colorshrift3:checked ~ .vid td {
color:orange;
}
#colorshrift4:checked ~ .vid td {
color:#5F9EA0;
}
#colorshrift5:checked ~ .vid td {
color:#00CED1;
}
#fonshrift:checked ~ .vid td {
background-color:red;
border:0;
}
#fonshrift1:checked ~ .vid td {
background-color:green;
border:0;
}
#fonshrift2:checked ~ .vid td {
background-color:blue;
border:0;
}
#fonshrift3:checked ~ .vid td {
background-color:orange;
border:0;
}
#fonshrift4:checked ~ .vid td {
background-color:#5F9EA0;
border:0;
}
#fonshrift5:checked ~ .vid td {
background-color:#00CED1;
border:0;
}
#rotateshrift:checked ~ .vid td {
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
border-radius:10%;
}
#rotateshrift1:checked ~ .vid td {
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-o-transform:rotate(30deg);
-ms-transform:rotate(30deg);
transform:rotate(30deg);
border-radius:30%;
}
#rotateshrift2:checked ~ .vid td {
-moz-transform:rotate(50deg);
-webkit-transform:rotate(50deg);
-o-transform:rotate(50deg);
-ms-transform:rotate(50deg);
transform:rotate(50deg);
border-radius:50%;
}
</style>
Как видите в коде,вместо значений названия и ссылки на шрифт применяются условные операторы дополнительных полей,это позволяет управлять шрифтом после его добавления на странице "Добавления новых материалов".Стили подстраиваются под значения добавленные в дополнительные поля изменяя индивидуальность каждой страницы "Материала и комментариев к нему".
Подобным образом можно вносить требуемые значения стилей в дополнительные поля,а условные операторы соответствующие полям вставлять в качестве значений стилей.
Это довольно удобная возможность так как дополнительных полей может быть до 5 штук,а значит стили и их значения могут подстраиваться в 5 местах кода.
Снижаются затраты времени на добавление стилей для каждой страницы,это весомое преимущество которым грех не воспользоваться.
Если у Вас есть идеи по поводу манипулирования функционалом стилей через условные операторы прошу поделиться с посетителями.
Если есть вопросы по применению значений в стилях задавайте их в этой теме.