Путешествуя по бесплатным форумам на движке punBB я нередеко замечал как у очень сильно навороченных, красивых и посещаемых форумов сильно тормозит загрузка страници, а заглянув в исходники странички быстренько разбирался в чем проблема многих админов - излишнее нагромождение скриптов.
Возьмем пример:
форум "клетка"
<div id="html-header">
<style type="text/css">
HTML, BODY {background-color: black; background-image: url("http://i017.radikal.ru/0801/b4/22f138b15197.gif"); background-repeat: repeat; background-attachment: fixed; background-position: top center;}
<style type="text/css">
.punbb .container {
border-style: dashed;
border-width: 2px;
border-color: #FF0000;
}
</style>
<style type="text/css">
html, body {margin-left: 20px; margin-right: 20px;}
</style>
<style type="text/css">
#pun-index #pun.section h2
#pun-index #pun.section h2 {text-align: center; }
#pun-index #pun-navlinks.section .container #navregister a span {color: red; font-weight: bold; }
#pun-index #pun-stats.section .statscon .container {color: #FF9900; }
</style>
<style type="text/css">
#pun #pun-index #pun-status.section .container {background-image: url("http://s41.radikal.ru/i093/0903/52/4902ed4edeed.jpg"); }
#pun #pun-index .section .container {background-image: url("http://s41.radikal.ru/i093/0903/52/4902ed4edeed.jpg"); }
</style>
<style type="text/css">
.punbb a:link, .punbb a:visited {color:#FFCC33;}
.punbb a:hover {color: red;}
</style>
<style type="text/css">
#pun-main h2 {
color : white;
background-color : transparent; background-image : url(http://s41.radikal.ru/i093/0903/52/4902ed4edeed.jpg);
}
</style>
<style type="text/css">#pun-stats .container {
color : #FFCC33;
background-image : url(http://s41.radikal.ru/i093/0903/52/4902ed4edeed.jpg);
}
</style>
<style type="text/css"> #pun-main h1 {
color : white;
background-color : #FF00FF; background-image : url(http://s41.radikal.ru/i093/0903/52/4902ed4edeed.jpg);
}
</style>
<style type="text/css"> #pun .tcl {
color : #ffffff;
background-color : transparent; background-image : url(http://s51.radikal.ru/i131/0903/e1/4bd376dc0b95.jpg);
}
</style>
<style type="text/css"> #pun .tcr {
color : #ffffff;
background-color : transparent; background-image : url(http://s51.radikal.ru/i131/0903/e1/4bd376dc0b95.jpg );
}
</style>
<style type="text/css">#pun .tc2 { color: #ffffff;
background-color : transparent; background-image : url(http://s51.radikal.ru/i131/0903/e1/4bd376dc0b95.jpg);
}
</style>
<style type="text/css">#pun .tc3 { color: #ffffff;
background-color : transparent; background-image : url(http://s51.radikal.ru/i131/0903/e1/4bd376dc0b95.jpg);
}
</style>
<style type="text/css">
.punbb .container {
border-style: dotted;
border-width: 2px;
border-color: #FF0000;
}
</style>
</div>и форум Академия "Каваи"
<div id="html-header">
<style type="text/css">
a:hover {border: 2px dashed #FF9999;}
</style>
<style type="text/css">
.punbb .container {border: dashed 1px #FF9999;}
</style>
<style type="text/css">
#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 1em}
</style>
</div>Это куски кода из HTML-Верха форумов, прописанные в исходном коде странички. Оба форума хорошо оформленны. Но в первом случае форум, при одиноковом размере, будет весить больше, чем во втором. А все потому, что в первом случае помимо этих скриптов вида форума, загружаются еще и скрипты установленной по умолчанию темы:
Форум "клетка"
<link rel="stylesheet" type="text/css" href="http://ФОРУМ1/style/nevblack/nevblack.css" />
тогда как во втором случае эти скрипты были перенесены в собственный стиль:
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/styles/0005/7a/a7/style.0.css" />
Вывод:
Если вы набрали довольно приличное кол-во скриптов в в тегах <style type="text/css"> и <style> перенесите их и создайте свой стиль.
Как это делается:
Если вы просто перенесете эти скрипты в раздел "стиль" то вы просто убьете форум. А что бы этого не произошло нужно сделать следующее (на примере форума "клетка"):
1. Загрузить к себе на компьютер 2 файла, с названиями текущего стиля отображения форума. Посмотреть названия можно, открыв исходный код странички и найдя там вверху строчку вида
<link rel="stylesheet" type="text/css" href="http://ФОРУМ/style/НАЗВАНИЕ_СТИЛЯ/НАЗВАНИЕ_СТИЛЯ.css" />
(в нашем случае это <link rel="stylesheet" type="text/css" href="http://ФОРУМ1/style/nevblack/nevblack.css" />)
это будет первый фаил, второй же мы должны прописать простым добовлением к "НАЗВАНИЕ_СТИЛЯ.css" записи "_cs", что бы в итоге получилось "НАЗВАНИЕ_СТИЛЯ_cs.css" и загружаем этот новый фаил с новым адресом
2. Открываем ваши загруженные стили в текстовом редакторе (любом, поддерживающем поиск и замену) и ищем строки из вашего HTML-верха, начинающиеся с # или .
Пример:
у нас есть скрипт в HTML-верх, делающий форум по центру изменяющий цвет ссылок и текста
<style type="text/css">
#pun-index #pun.section h2
#pun-index #pun.section h2 {text-align: center; }
#pun-index #pun-navlinks.section .container #navregister a span {color: red; font-weight: bold; }
#pun-index #pun-stats.section .statscon .container {color: #FF9900; }
</style>ищем в одном из ".css" строчки перед фигурными скобками:
#pun-index #pun.section h2
#pun-index #pun-navlinks.section .container #navregister a span
#pun-index #pun-stats.section .statscon .container
и добовляем или заменяем там параметры, заключенные в фигурных скобках, на парамеры из фигурных скобок HTML-верха
#pun-index #pun.section h2 {
ДРУГИЕ_ПАРАМЕТРЫ;
text-align: center;
}
#pun-index #pun-navlinks.section .container #navregister a span {
color: red;
font-weight: bold;
ДРУГИЕ_ПАРАМЕТРЫ;
}
#pun-index #pun-stats.section .statscon .container {
color: #FF9900;
}
Если вы не нашли похожих строчек ни в одном файле можно их добавить самим, но только в один (я вставляю, обычно, в самый низ, но это не имеет значения)
После установки своих настроек дизайна, нужно восстановить ссылки изначального стиля:
3. Находим в "НАЗВАНИЕ_СТИЛЯ_cs.css" ссылки вида url(../../img/nevblack/cellpic3.gif) и заменяете ../.. на название вашего форума. Проще использовать для этого поиск и замену (ищем ../.. заменяем все на НАЗВАНИЕ_ФОРУМА)
4. Открываете раздел настройки стиля в администрировании вашего форума и заменяете в первом окне текст после строчки
/* A2 Deal with browser defaults and wonkiness -------------------------------------------------------------*/
на текст после строчки
/* A2 Deal with browser defaults and wonkiness -------------------------------------------------------------*/
из вашего файла НАЗВАНИЕ_СТИЛЯ.css, а во втором окне заменяете ВЕСЬ текст на текст из вашего НАЗВАНИЕ_СТИЛЯ_cs.css
Ставим галочку (радио кнопка, там) «Свой стиль "• Да" »
Сохраняем
Ну а теперь самое страшное - нужно проверить вашу работу:
заходим в настройки и убираем (желательно скопировать куда нить) из HTML-верха все, что заключено в теги <style>...</style> и <style type="text/css">...</style>.
Сохраняем
Выходим на главную страничку и смотрим...... Если все сделано правельно, то ничего на форуме изменится не должно, в противном случае возвращаетесь в админку, отключаете использование вашего стиля и возвращаем на место (HTML-верх) все, что заключено в теги <style>...</style> и <style type="text/css">...</style>
Если что непонятно - отпишитесь сдесь и вам попробуют помоч