Представляю вашему вниманию стиль, разработанный мной на основе стиля subsilver2.
картинки носят информационный характер:
"в живую" стиль можно посмотреть здесь. выберите из списка в верху страницы belkstyle.
Информация по стилю
1. Родительский стиль - subsilver2
2. Стиль не "резиновый" - для основной страницы задана жёсткая ширина - 1000px. Блок размещён по центру.
Для фона сайта выбрана картинка, заменить или переделать можно в файле stylesheet.css в коде
// картинка, само-собой, не моя - нашёл в сети.
3. большое количество кнопок-ссылок на форуме сделано на чистом css (в отличии от применения изображений по умолчанию).
В стиле прописаны как синего цвета (основные) кнопки, так и зелёного и красного.
Чтобы сделать синюю кнопку - код class="button button-blue"
Чтобы сделать красную кнопку - код class="button button-red"
Чтобы сделать зелёную - код class="button button-green"
3. В стиле, для уменьшения количества кода и удобства использования, применены внутренние переменные,
которые прописаны в файле belk_config.html
4. Для уменьшения занимаемого места (визуально) применены 2 скрипта: спойлер (+ Информация) и перебор блоков (Статистика, Дополнительные возможности т.д.).
в перебор блоков очень легко добавить новые модули, которые могут пригодиться при расширении функций форума.
(прописывается новая переменная в файле belk_config.html и добавляется html-код соответственно шаблону).
5. При создании стиля были использованы материалы с сайтов http://hello-vitebsk.ru/index.php, http://daneden.github.io/animate.css/
6. В стиле заменены на "свои" не все изображения. Я не работаю с fotoshop или иными редакт-программами, поэтому для меня это представляет проблему.
Основные изображения заменены кнопками на css, поэтому мне лень переделывать все. В этом смысле стиль недоделан. Предупреждаю сразу.
2. Стиль не "резиновый" - для основной страницы задана жёсткая ширина - 1000px. Блок размещён по центру.
Для фона сайта выбрана картинка, заменить или переделать можно в файле stylesheet.css в коде
Код: Выделить всё
html {
font-size: 100%;
background: url(images/fon_belk_2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
// картинка, само-собой, не моя - нашёл в сети.
3. большое количество кнопок-ссылок на форуме сделано на чистом css (в отличии от применения изображений по умолчанию).
В стиле прописаны как синего цвета (основные) кнопки, так и зелёного и красного.
Чтобы сделать синюю кнопку - код class="button button-blue"
Чтобы сделать красную кнопку - код class="button button-red"
Чтобы сделать зелёную - код class="button button-green"
3. В стиле, для уменьшения количества кода и удобства использования, применены внутренние переменные,
которые прописаны в файле belk_config.html
Код: Выделить всё
$BELK_BLOK
4. Для уменьшения занимаемого места (визуально) применены 2 скрипта: спойлер (+ Информация) и перебор блоков (Статистика, Дополнительные возможности т.д.).
в перебор блоков очень легко добавить новые модули, которые могут пригодиться при расширении функций форума.
(прописывается новая переменная в файле belk_config.html и добавляется html-код соответственно шаблону).
5. При создании стиля были использованы материалы с сайтов http://hello-vitebsk.ru/index.php, http://daneden.github.io/animate.css/
6. В стиле заменены на "свои" не все изображения. Я не работаю с fotoshop или иными редакт-программами, поэтому для меня это представляет проблему.
Основные изображения заменены кнопками на css, поэтому мне лень переделывать все. В этом смысле стиль недоделан. Предупреждаю сразу.
Кого заинтересовал данный стиль, можно скачать здесь:
Скачать из файлового архива сайта
Доработка 1. Профиль справа на странице темы
Сделать сие очень просто - скачайте файл из архива сайта:
распакуйте и замените этот файл в папке belkstyle/template/
очистите кэш шаблонов стиля и всё. можно пользоваться.
Вложение:
распакуйте и замените этот файл в папке belkstyle/template/
очистите кэш шаблонов стиля и всё. можно пользоваться.
Доработка 2. Превращение стиля в резиновый и удаление смещения сверху
Открыть belkstyle/theme/stylesheet.css
Найти
Заменить найденное на
Код: Выделить всё
#main {
width: 1000px;
background: url(images/fon_body.png);
padding: 10px;
margin-top: 50px;
margin-bottom: 50px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 1.0; /* Mozilla 1.6 и ниже */
-khtml-opacity: 1.0; /* Konqueror 3.1, Safari 1.1 */
opacity: 1.0; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}
Заменить найденное на
Код: Выделить всё
#main {
width: 100%;
background: url(images/fon_body.png);
padding: 10px;
margin-top: 0px;
margin-bottom: 50px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 1.0; /* Mozilla 1.6 и ниже */
-khtml-opacity: 1.0; /* Konqueror 3.1, Safari 1.1 */
opacity: 1.0; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}
всё. ничего чистить не надо. можно пользоваться сразу.
здесь можно почитать, как сделать переключатель (фиксированный размер/размер во весь экран) в личном разделе.
проблема со спойлерами. сейчас не актуально
!! "благодаря" обновлениям браузеров перестали работать java-script спойлеров, установленных на форуме.
это "личное дело" в минипрофиле пользователя в теме сообщения и "информация" внизу страницы там же.
Стоит просто удалить обработку спойлеров:
в файле belk_config.html это строки (примерно), то есть все, где есть DEFINE $BEL_SPOILER
в viewtopic_body.html вывод - это {BEL_SPOILER_***}
В стиле (stylesheet.css) - это строки
вряд ли их (спойлеров) работа восстановится. блокировка идёт со стороны браузеров.
это "личное дело" в минипрофиле пользователя в теме сообщения и "информация" внизу страницы там же.
Стоит просто удалить обработку спойлеров:
в файле belk_config.html это строки (примерно), то есть все, где есть DEFINE $BEL_SPOILER
Код: Выделить всё
<!-- DEFINE $BEL_SPOILER_START = '' -->
<!-- DEFINE $BEL_SPOILER2_START = '<div><div class="spoiler_links2"><span>' -->
<!-- DEFINE $BEL_SPOILER_BODY = '' -->
<!-- DEFINE $BEL_SPOILER_END = '</div></div>' -->
в viewtopic_body.html вывод - это {BEL_SPOILER_***}
В стиле (stylesheet.css) - это строки
Код: Выделить всё
.spoiler_links{background-image:url('images/block_fon.png');width:100%;height:20px;cursor:pointer;}
.spoiler_links2{font-size:1.2em;font-weight:bold;text-decoration:underline;width:100%;height:20px;cursor:pointer;}
.spoiler_links span{float:left;color:#FFFFFF;font-size:1.2em;font-weight:normal;padding:2px 0 0 10px;}
.spoiler_body{display:none;cursor:pointer;background:#F5F5F5;border-top:1px solid #C3CBD1;padding:6px;}
вряд ли их (спойлеров) работа восстановится. блокировка идёт со стороны браузеров.