Devils Night
15-11-2011, 00:07
Не знаю, было ли или не было такого вопроса, по поиску тоже ничего путного не нашёл, в общем интересует оформление или стиль данного сайта, то есть как бы тема для oszone.net (http://oszone.net/), хотя я думаю не редкий вопрос, (да и подразумеваю что эта тема будет полезна, дабы не занудствовать и не переспрашивать админов и модеров о добавлении темы, стиля и.т.д, и.т.п, т.к пользователь может сам изменить стиль), в гугле что-то было, почитал, рассказывалось о том что типа некоторые сайты, форумы это не поддерживают, а где-то и вовсе, основателю сайта ради этого придётся весь движок переписывать, ну и ещё с пол тонны инфы перелистал, в итоге нашёл что-то, но не совсем то, проще говоря как бы решение есть, сделать это в оффлайн режиме, т.е стиль будет грузится с диска, а не с сайта, но тут есть одно но, коды CSS стиля не совсем такие как у сайта и/или сайтов, если бы грузился обычный CSS сайта, то отредактировать его не составило бы и труда, да и найти стиль хотя бы этого форума (http://forum.oszone.net/clientscript/vbulletin_css/style-428edb68-00006.css) так же не составило особого труда, да и думаю никому не секрет. Но там и там, отличия значительные, и очень отличается.
Так вот, интересуют технические детали для CSS в оффлайн, всякие там картиночки, рюшечки и.т.д, в общем всё чтобы до оформить нормально, проще говоря код, но не код этого сайта, а оффлайн, потому как всё сильно отличается.
CSS стиль нуждается в обработке, так что кому интересно, пожалуйста присоединяемся.
Вот набросал такой не затейливый CSS-стиль
body {Font-Family: LIBERATION SANS, MICROSOFT SANS SERIF,LUCIDA SANS,VERDANA,ARIAL!IMPORTANT; BACKGROUND:#111111 NO-REPEAT FIXED CENTER TOP!IMPORTANT;BACKGROUND-SIZE:COVER!IMPORTANT}
div {background-color:#333333!important}
div {color:#999999!important}
/*Ссылка*/
a {color:#cccccc!important}
/*Подсвечивание текста*/
/*a:hover {text-shadow: 1px 1px 11px!important;}*/
td {background: transparent/*url(http://i1.imageban.ru/out/2011/11/14/632762d0fc5e5f4e953f226e871b1822.png) top repeat-x*/ !important}
h1 {background: rgb(0, 0, 0) url(http://i1.imageban.ru/out/2011/11/14/632762d0fc5e5f4e953f226e871b1822.png) top repeat-x! important}
h2 {background:transparent!important}
h3 {background:transparent!important}
h4 {background:transparent!important}
h5 {background:transparent!important}
h6 {background:transparent!important}
hr {color:#00FF00!important}
input[type="search"] {border-color:#FF0000!important}
input[type~="search"] {border-color:#FF0000!important}
input[type="text"] {border-color:#0000FF!important}
input[type~="text"] {border-color:#FFFFFF!important}
input[type="password"] {border-color:#0000FF!important}
input[type~="password"] {border-color:#FFFFFF!important}
h1 {border-color:#0000FF!important}
h2 {border-color:#0000FF!important}
h3 {border-color:#0000FF!important}
h6 {border-color:#0000FF!important}
/*Фон таблица*/
table {background:#333333!important}
/*Бордюр*/
table {border-color:#777777!important}
/*Название темы:*/
span {color:#FF0000!important}
/*Окно навигации*/
TD {border-color:#999999!important}
/*Кнопки*/
input {border-color:#999999!important}
/*input {background:#555555!important}*/
/*Окно ввода текста*/
textarea {background:#222222!important}
/*Текст в форуме*/
td {color:#dddddd!important}
/*Окно навигации*/
select {color:#fefefe!important}
.s_title {color:#fefefe!important}
/*Не известно*/
#edit_activity_select {border-color:#0000FF!important}
textarea {border-color:#0000FF!important}
div {background: none! important; border-color: transparent! important}
button,input {background: rgb(0, 0, 0) url(http://i1.imageban.ru/out/2011/11/14/632762d0fc5e5f4e953f226e871b1822.png) top repeat-x! important; border-color: rgb(0,202,255)! important}
a:hover, a:hover span, h4, .author, .label, td, #header b, .header_bottom, .notes_note_title a {color: rgb(0,202,255)! important}
html .nav_razdel {font-size:12px; color:#ee0000; font-weight:bold;background:url(http://i1.imageban.ru/out/2011/11/14/632762d0fc5e5f4e953f226e871b1822.png) repeat-x bottom; padding-bottom:4px; margin-bottom:2px; padding-top:10px;}
html a {color:#5c8599 !important; text-decoration:underline !important}
html a:visited, html a:active {color:#525f66 !important}
html a:hover {color:#cef !important; background:#023 !important;}
html button:focus {background:#5c5b3e !important; color:#fff !important; border-color: #474100 #665d00 #7a7849 !important; outline: 2px solid #041d29 !important;}
html input:focus, html select:focus, html option:focus, html textarea:focus {background:#555555 !important; color:#fff !important; border-color: #474100 #665d00 #7a7849 !important; outline: 2px solid #041d29 !important;}Хотя, этот стиль работает и на других сайтах, проверял лично.
Стиль в основном работает в Опере, на других браузерах не тестировал.
Установка:
Распаковываем css.forum.oszone.rar в какую нибудь папку, ну например в папку опера.
Заходим на любой сайт, т.е на тот где вы хотите что бы стиль изменился, например http://forum.oszone.net/.
После, в любом пустом месте где нет ссылок, кликаем правой кнопкой мыши.
Дальше выбираем Настройки для сайта, откроется диалоговое окно.
Выбираем Вид, видим Моя таблица стилей рядом с полем жмём кнопку обзор, выбираем стиль, т.е файл css.forum.oszone.css, потом открыть и жмём ок.
Перезагружаем сайт (Обновляем страницу в браузере, обычно по кнопке F5), и вуаля, оформление сайта изменилось.
http://i3.imageban.ru/thumbs/2011.11.15/ac2bb7ae5b4340bc8cbab520060457e5.png (http://i3.imageban.ru/out/2011/11/15/ac2bb7ae5b4340bc8cbab520060457e5.png) http://i1.imageban.ru/thumbs/2011.11.15/c9f6bfabb4113f1f08ded0e98dba5cdf.png (http://i1.imageban.ru/out/2011/11/15/c9f6bfabb4113f1f08ded0e98dba5cdf.png) http://i3.imageban.ru/thumbs/2011.11.15/435f593f1e8c98b23e1dafbf78c49684.png (http://i3.imageban.ru/out/2011/11/15/435f593f1e8c98b23e1dafbf78c49684.png)
При не активном окне так (хочу заметить, что при не активном окне, цвет текста, берётся у системы, а цвет поля берётся из стиля):
http://i1.imageban.ru/thumbs/2011.11.15/d522a20668ab3af2a26a43d62cd9d6d5.png (http://i1.imageban.ru/out/2011/11/15/d522a20668ab3af2a26a43d62cd9d6d5.png)
При активном окне (цвет текста и цвет поля берётся из стиля):
http://i1.imageban.ru/thumbs/2011.11.15/1bfe7b04110330616a5fc5d147742828.png (http://i1.imageban.ru/out/2011/11/15/1bfe7b04110330616a5fc5d147742828.png)
Выделенное красным, это то что я пока не нашёл решения какой код вставить, что бы изменить цвет поля и текста.
http://i2.imageban.ru/thumbs/2011.11.15/eecba2552c6379c80583bada8a6f1c00.png (http://i2.imageban.ru/out/2011/11/15/eecba2552c6379c80583bada8a6f1c00.png)
Ну, а этот тест в довесок, работа стиля на зайцах.
http://i2.imageban.ru/thumbs/2011.11.15/9ba411ec9afa706bdcc3c11c77fc2011.png (http://i2.imageban.ru/out/2011/11/15/9ba411ec9afa706bdcc3c11c77fc2011.png)
Добавил для примера зелёный стиль forum.oszone.net_green.css
http://i3.imageban.ru/thumbs/2011.11.15/cffca3a19b1ea207a79ddfedbe61ffd1.png (http://i3.imageban.ru/out/2011/11/15/cffca3a19b1ea207a79ddfedbe61ffd1.png)
и программу Colors Builder для работы над цветом.
http://i4.imageban.ru/thumbs/2011.11.15/e8b1e9abe6cfd98d9208d6cc2336b9f2.png (http://i4.imageban.ru/out/2011/11/15/e8b1e9abe6cfd98d9208d6cc2336b9f2.png)
И ещё раз повторюсь, стиль доработан частично, потому как я не силён в оффлайновском CSS.
Да кстати, если заметите подобное, типа /*Код или текст*/, текст лучше не трогать, потому оно как бы не мешает, создано для лёгкости понятия от куда и для чего оно нужно, а в коде, "/*" "*/" можете просто убрать, или добавить, "/*" "*/" является для закоментирования текста/кода.
Так вот, интересуют технические детали для CSS в оффлайн, всякие там картиночки, рюшечки и.т.д, в общем всё чтобы до оформить нормально, проще говоря код, но не код этого сайта, а оффлайн, потому как всё сильно отличается.
CSS стиль нуждается в обработке, так что кому интересно, пожалуйста присоединяемся.
Вот набросал такой не затейливый CSS-стиль
body {Font-Family: LIBERATION SANS, MICROSOFT SANS SERIF,LUCIDA SANS,VERDANA,ARIAL!IMPORTANT; BACKGROUND:#111111 NO-REPEAT FIXED CENTER TOP!IMPORTANT;BACKGROUND-SIZE:COVER!IMPORTANT}
div {background-color:#333333!important}
div {color:#999999!important}
/*Ссылка*/
a {color:#cccccc!important}
/*Подсвечивание текста*/
/*a:hover {text-shadow: 1px 1px 11px!important;}*/
td {background: transparent/*url(http://i1.imageban.ru/out/2011/11/14/632762d0fc5e5f4e953f226e871b1822.png) top repeat-x*/ !important}
h1 {background: rgb(0, 0, 0) url(http://i1.imageban.ru/out/2011/11/14/632762d0fc5e5f4e953f226e871b1822.png) top repeat-x! important}
h2 {background:transparent!important}
h3 {background:transparent!important}
h4 {background:transparent!important}
h5 {background:transparent!important}
h6 {background:transparent!important}
hr {color:#00FF00!important}
input[type="search"] {border-color:#FF0000!important}
input[type~="search"] {border-color:#FF0000!important}
input[type="text"] {border-color:#0000FF!important}
input[type~="text"] {border-color:#FFFFFF!important}
input[type="password"] {border-color:#0000FF!important}
input[type~="password"] {border-color:#FFFFFF!important}
h1 {border-color:#0000FF!important}
h2 {border-color:#0000FF!important}
h3 {border-color:#0000FF!important}
h6 {border-color:#0000FF!important}
/*Фон таблица*/
table {background:#333333!important}
/*Бордюр*/
table {border-color:#777777!important}
/*Название темы:*/
span {color:#FF0000!important}
/*Окно навигации*/
TD {border-color:#999999!important}
/*Кнопки*/
input {border-color:#999999!important}
/*input {background:#555555!important}*/
/*Окно ввода текста*/
textarea {background:#222222!important}
/*Текст в форуме*/
td {color:#dddddd!important}
/*Окно навигации*/
select {color:#fefefe!important}
.s_title {color:#fefefe!important}
/*Не известно*/
#edit_activity_select {border-color:#0000FF!important}
textarea {border-color:#0000FF!important}
div {background: none! important; border-color: transparent! important}
button,input {background: rgb(0, 0, 0) url(http://i1.imageban.ru/out/2011/11/14/632762d0fc5e5f4e953f226e871b1822.png) top repeat-x! important; border-color: rgb(0,202,255)! important}
a:hover, a:hover span, h4, .author, .label, td, #header b, .header_bottom, .notes_note_title a {color: rgb(0,202,255)! important}
html .nav_razdel {font-size:12px; color:#ee0000; font-weight:bold;background:url(http://i1.imageban.ru/out/2011/11/14/632762d0fc5e5f4e953f226e871b1822.png) repeat-x bottom; padding-bottom:4px; margin-bottom:2px; padding-top:10px;}
html a {color:#5c8599 !important; text-decoration:underline !important}
html a:visited, html a:active {color:#525f66 !important}
html a:hover {color:#cef !important; background:#023 !important;}
html button:focus {background:#5c5b3e !important; color:#fff !important; border-color: #474100 #665d00 #7a7849 !important; outline: 2px solid #041d29 !important;}
html input:focus, html select:focus, html option:focus, html textarea:focus {background:#555555 !important; color:#fff !important; border-color: #474100 #665d00 #7a7849 !important; outline: 2px solid #041d29 !important;}Хотя, этот стиль работает и на других сайтах, проверял лично.
Стиль в основном работает в Опере, на других браузерах не тестировал.
Установка:
Распаковываем css.forum.oszone.rar в какую нибудь папку, ну например в папку опера.
Заходим на любой сайт, т.е на тот где вы хотите что бы стиль изменился, например http://forum.oszone.net/.
После, в любом пустом месте где нет ссылок, кликаем правой кнопкой мыши.
Дальше выбираем Настройки для сайта, откроется диалоговое окно.
Выбираем Вид, видим Моя таблица стилей рядом с полем жмём кнопку обзор, выбираем стиль, т.е файл css.forum.oszone.css, потом открыть и жмём ок.
Перезагружаем сайт (Обновляем страницу в браузере, обычно по кнопке F5), и вуаля, оформление сайта изменилось.
http://i3.imageban.ru/thumbs/2011.11.15/ac2bb7ae5b4340bc8cbab520060457e5.png (http://i3.imageban.ru/out/2011/11/15/ac2bb7ae5b4340bc8cbab520060457e5.png) http://i1.imageban.ru/thumbs/2011.11.15/c9f6bfabb4113f1f08ded0e98dba5cdf.png (http://i1.imageban.ru/out/2011/11/15/c9f6bfabb4113f1f08ded0e98dba5cdf.png) http://i3.imageban.ru/thumbs/2011.11.15/435f593f1e8c98b23e1dafbf78c49684.png (http://i3.imageban.ru/out/2011/11/15/435f593f1e8c98b23e1dafbf78c49684.png)
При не активном окне так (хочу заметить, что при не активном окне, цвет текста, берётся у системы, а цвет поля берётся из стиля):
http://i1.imageban.ru/thumbs/2011.11.15/d522a20668ab3af2a26a43d62cd9d6d5.png (http://i1.imageban.ru/out/2011/11/15/d522a20668ab3af2a26a43d62cd9d6d5.png)
При активном окне (цвет текста и цвет поля берётся из стиля):
http://i1.imageban.ru/thumbs/2011.11.15/1bfe7b04110330616a5fc5d147742828.png (http://i1.imageban.ru/out/2011/11/15/1bfe7b04110330616a5fc5d147742828.png)
Выделенное красным, это то что я пока не нашёл решения какой код вставить, что бы изменить цвет поля и текста.
http://i2.imageban.ru/thumbs/2011.11.15/eecba2552c6379c80583bada8a6f1c00.png (http://i2.imageban.ru/out/2011/11/15/eecba2552c6379c80583bada8a6f1c00.png)
Ну, а этот тест в довесок, работа стиля на зайцах.
http://i2.imageban.ru/thumbs/2011.11.15/9ba411ec9afa706bdcc3c11c77fc2011.png (http://i2.imageban.ru/out/2011/11/15/9ba411ec9afa706bdcc3c11c77fc2011.png)
Добавил для примера зелёный стиль forum.oszone.net_green.css
http://i3.imageban.ru/thumbs/2011.11.15/cffca3a19b1ea207a79ddfedbe61ffd1.png (http://i3.imageban.ru/out/2011/11/15/cffca3a19b1ea207a79ddfedbe61ffd1.png)
и программу Colors Builder для работы над цветом.
http://i4.imageban.ru/thumbs/2011.11.15/e8b1e9abe6cfd98d9208d6cc2336b9f2.png (http://i4.imageban.ru/out/2011/11/15/e8b1e9abe6cfd98d9208d6cc2336b9f2.png)
И ещё раз повторюсь, стиль доработан частично, потому как я не силён в оффлайновском CSS.
Да кстати, если заметите подобное, типа /*Код или текст*/, текст лучше не трогать, потому оно как бы не мешает, создано для лёгкости понятия от куда и для чего оно нужно, а в коде, "/*" "*/" можете просто убрать, или добавить, "/*" "*/" является для закоментирования текста/кода.