В колонках играет - СД - Потерянные страницы
Сегодня занимался оптимизацией css файла дефолтного шаблона. Что было проделано:
1. Изменена структура файла.
В исходном файле все селекторы располагались на отдельной строке, причем свойства и их значения были прописаны на той же строке, что и селектор. В качестве разделителей были использованы пробелы, причем в порядочном количестве. Я же переписал, используя табуляцию для разметки, и размещая по одному свойству/селектору на строку.
2. Нижний регистр.
Возможно это покажется незначительным, но все же переписал код в нижнем регистре.
3. Упорядочивание свойств.
Внутри одного селектора все свойства теперь идут в алфавитном порядке. Кстати это позволило обнаружить некоторые некорректные места в коде.
4. Сокращение кодов цвета.
Css позволяет записывать код цвета #rrggbb в сокращенном варианте #rgb. Это было использовано мною, позволив еще немного уменьшить размер файла стилей.
5. Сокращенный вариант записи.
Кроме цветов, были сокращены и другие значения свойств. Например, padding: 2px 2px; можно записать как padding: 2px; а padding: 0px; можно записать как padding: 0; Опять же, это дало небольшое сокращение размера файла.

Некоторые неточности в исходном файле:

code:
.formtext { padding-left:10px; padding: 5px;

Здесь указывает отступ слева в 10пикселей, который затем переопределяется следующим свойством, которое задает отступ в 5пикселей со всех сторон.

code:
	border-top: 1px solid #C6C6C6;

	border-right: 1px solid #C6C6C6;

	border-bottom: 3px solid #C6C6C6;

	border-left: 1px solid #C6C6C6;

Здесь цвет и тип рамки одинаков для всех 4 сторон, однако задается 4 раза. Толщина в 1пиксель одинакова для трех сторон. Данную запись можно сократить до записи в две строки.

code:
	background: #2D82B6 url(../images/topugol.gif) no-repeat top left;

	background-color: #2D82B6;

Здесь второе свойство лишнее, так как не несет смысла, ибо дублирует часть первого свойства.

code:
	border-left-width: 120px;

	border-left-style: solid;

	border-left-color: #f1f1f1;

Здесь можно все значения прописать, используя лишь один параметр border-left. Экономим 2 строчки кода.


Промежуточные результаты:
temp/default/css/style.css
исходный css файл: 24 893 б
css файл после оптимизации: 16 904 б
Оба файла идентичны, не считая исправления небольших неточностей, описанных выше.
temp/default/css/simple.style.css
исходный css файл: 5 253 б
css файл после оптимизации: 3 382 б
Оба файла идентичны, не считая исправления небольших неточностей, описанных выше.

В колонках играет - Scang - Ни жив ни мёртв
Как я намучался с этим недобраузером... Вечно что-нибудь именно в нем не работает. Один из самых популярных косяков - некорректное отображение полупрозрачности в картинках формата png в 6 версии недобраузера.
Запишу решение данной проблемы, так как мне еще часто оно понадобится.
1. Итак, создаем файл png.htc
Редактируем его текстовым редактором, вставляем следующий код:

code:
<public:component>

<public:attach event="onpropertychange" onevent="propertyChanged()" />

<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";

var realSrc;

var blankSrc = "blank.gif";



if (supported) fixImage();



function propertyChanged() {

   if (!supported) return;

   

   var pName = event.propertyName;

   if (pName != "src") return;

   // if not set to blank

   if ( ! new RegExp(blankSrc).test(src))

      fixImage();

};



function fixImage() {

   // get src

   var src = element.src;



   // check for real change

   if (src == realSrc) {

      element.src = blankSrc;

      return;

   }



   if ( ! new RegExp(blankSrc).test(src)) {

      // backup old src

      realSrc = src;

   }

   

   // test for png

   if ( /\.png$/.test( realSrc.toLowerCase() ) ) {

      // set blank image

      element.src = blankSrc;

      // set filter

      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +

                                     src + "',sizingMethod='scale')";

   }

   else {

      // remove filter

      element.runtimeStyle.filter = "";

   }

}



</script>

</public:component>

2. Далее - закачиваем этот файл в корень сайта. И туда же закачиваем пустой прозрачный gif-файл с именем blank.gif.
3. В html вставляем следующую конструкцию:

code:
<style>

img {

behavior: url("png.htc");

}

</style>

4. Теперь заключительный этап - дописываем полный путь к файлам (абсолютный адрес). Для этого из пункта 1 заменяем строку

code:
var blankSrc = "blank.gif";

на строку вида

code:
var blankSrc = "http://site.ru/blank.gif";

В пункте 3 заменяем строку

code:
behavior: url("png.htc");

на строку вида

code:
behavior: url("http://site.ru/png.htc");

где http://site.ru - адрес вашего сайта. Кстати именно это было моей ошибкой - я не указывал полный адрес файлов.

В колонках играет - Слёзы - Сойти с Ума
Вчера, делая новый стиль на основе prosilver, заметил одну неточность в коде.
styles/prosilver/theme/colours.css
строка 885

code:
pmlist li.pm_foe_colour, .pm_foe_colour {

неверно задан класс, должно быть так:

code:
.pmlist li.pm_foe_colour, .pm_foe_colour {

то есть пропущена точка в начале строки.
Не стал сразу сообщать в баг-репорт, решив уточнить сначала у русской поддержки. В итоге они сами создали тикет %)
Тикет на баг-репорте

В колонках играет - Indigo - Осень
В отличии от subsilver2, где все стили собраны в одном файле stylesheets.css, в prosilver они разделены на несколько файлов, лежащих в папке styles/prosilver/theme. Каждый из файлов отвечает за что-то определенное, поэтому могут возникать ситуации когда один и тот же класс описани в нескольких файлах, но в каждом из файлов какой-то определенный аттрибут. Попробую охарактеризовать все файлы css.
bidi.css - здесь описаны стили размещения и позиционирования, такие как padding, margin, text-align и float. Если нужно изменить отступы блоков, изменить направление или обтекание текста, то редактировать нужно прежде всего здесь.
buttons.css - описание стилей кнопок.
colours.css - все о цвете, используемом в дизайне. Цвет текста, фона и вообще цвет чего угодно настраивается именно здесь.
common.css - некие основные настройки.
content.css - вместе с предыдущим файлом, является одним из важнейних файлов css в просильвер. Хранятся настройки стилей содержимого (текст сообщений, заголовки тем, список форумов и прочее).
cp.css - настройки панели управления (Control Panel - cp).
forms.css - описание всех форм - текстовых полей, раскрывающихся списков, чекбоксов, переключателей и тому подобного.

P.S. Допишу попозже, так как сейчас срочный заказ появился=)

В колонках играет - Skinhate - Ordjo (Hardcore Mix)
Столкнулся с такой задачей - нужно было поменять цвета только тех ссылок, что находятся в панели навигации - Список форумов - Форум - Подфорум, так называемые "хлебные крошки". Отдельного параметра для них нету. Решение было найдено достаточно быстро.
Открываем styles/prosilver/theme/colours.css
Находим в районе 56-58 строки

code:
.navbar {

   background-color: #cadceb;

}

и добавляем после

code:
.navbar a:link {

}

.navbar a:visited {

}

navbar a:hover {

}

.navbar a:active {

}

Также можно добавить стили

code:
.linklist a:link {

}

.linklist a:visited {

}

.linklist a:hover {

}

.linklist a:active {

} 

для изменения цвета ссылок

code:
 * Сообщения без ответов • Новые сообщения • Активные темы

* Отметить все форумы как прочтённые