Пользовательский дизайн форума.

[Davinel]

Подправил тут немного скин для АФ. В первую очередь это для аддона stylish для файрфокса. С ним проще всего - нужно просто создать новый стиль и скопировать туда скрипт из спойлера.
[u]Для оперы[/u] - убрать первые две строчки и последнюю(со знаком "}"), сохранить в файл с разрешением css. Потом зайти на АФ, нажать ф12, выбрать "настройки для сайта", зайти в "вид" и там выбрать этот файлик. Но для оперы я не тестировал, фиг знает, может где то не совсем так отображаться, как мне хотелось, так что пишите о таких вещах - постараюсь исправить.
[u]Для хрома[/u] - установить аддон stylish, зайти в настройки аддона, нажать add new style(добавить новый стиль), выбрать имя(любое), отметить галочкой Enabled.
Затем скопировать скрипт в поле Code и, как и в случае с оперой, убрать первые две строчки и последнюю(со знаком "}").
Затем в секции Applies to нажать Specify, выбрать URLs on the domain и ввести в поле www.animeforum.ru. Затем сохранить изменения(Save).

Дополнительный вариант - userstyles.org:
http://userstyles.org/styles/43678?r=1296768101

Там есть достаточно подробные инструкции по установке для разных браузеров, правда на английском.


Выглядит сейчас все примерно вот так(скрин может немного отставать от текущей версии):
[url=http://itmages.ru/image/view/116805/e391501d][img]http://storage1.static.itmages.ru/i/11/0203/s_1296758875_e391501d18.png[/img][/url]
Изменения есть и на других страницах, но там их меньше и мне лениво все скринить )
[spoiler]
[code]
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("animeforum.ru") {

/**** Режим просмотра темы ****/

/* убирается толстая плашка репутации */
div.reputation.zero.short { background: none !important;}
div.reputation.negative.short { background: none !important;}
div.reputation.positive.short { background: none !important;}
div.reputation.positive.short div { color: #464D50 !important;}
div.reputation.negative.short div { color: #464D50 !important;}
div.reputation.zero.short div { color: #464D50 !important;}
div.reputation.zero.short span { color: #464D50 !important;}
div.reputation.positive.short span { color: #464D50 !important;}
div.reputation.negative.short span { color: #464D50 !important;}
div.reputation { opacity: 1 !important; font-weight: normal !important;}

/* изменяется отобржение репутации поста */
span.reputation.negative.rep_show{ background: #CC0000 !important; color: white !important;}
span.reputation.positive.rep_show{ background: #009900 !important; color: white !important;}
span.reputation.zero.rep_show{ background: grey !important; color: white !important;}

/* убираются лишние тени и скругленности вокруг информации о пользователе */
div.author_info {
-moz-box-shadow: 0px 0px 0px !important;
-webkit-box-shadow: 0px 0px 0px !important;
-box-shadow: 0px 0px 0px !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
margin: 25px 0px 25px !important;
padding: 10px 0 0 !important;
width: 175px !important;
border: none !important;
border-right: 1px solid #CACBCC !important;
background: none !important;
}
div.post_body { margin-left: 195px !important;}

/* убираются скругленности и белый квадрат под аватаром */
li.avatar img {
border: 0px !important;
background: none !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
-moz-box-shadow: 0 1px 10px 0 #597DAB !important;
-webkit-box-shadow: 0 1px 10px 0 #597DAB !important;
box-shadow: 0 1px 10px 0 #597DAB !important;
}

/* исправление информации о пользователе */

.author_info ul.user_fields li span.ft, .author_info ul.user_fields li span.fc{
display: inline !important;
float: none !important;
padding: 0 4px !important;
text-align: left !important;
font-weight: normal !important;
color: #464D50 !important;
}
.user_fields li {
text-align: center;
}
.reputation span.title {
display: none;
}
/* убираем кнопку I */
ul.user_fields {
display: inline !important;
}
a.frq_info {
display: none !important;
}
/* выкидываем поле "дата регистрации", чтобы сделать раздел о пользователе уже */
.user_fields li:last-child {
display: none !important;
}
/* убираем дибильные тени при наведении на ник и номер поста */
span.author.vcard a, span.post_id a {
text-shadow: none !important;
}
/* сдвигаем ник вправо, дабы был по центру над аватаркой */
/*
span.author.vcard {
margin-left: 28px !important;
}
*/

/* изменяется цвет описания топика на более читабельный */
span.desc.main_topic_desc{
color: lightgray !important;
font-style: italic !important;
}

/* изменяется "Отправленно ..." */
p.posted_info{
color: grey !important;
margin-left: -12px !important;
}

/*нормальный цвет плашки цитаты */
p.citation {
background-color: #eeeebf !important;
}
div.blockquote {
background-color: #fffef1 !important;
}
/* убирается дурацкий жирный бордер слева от цитаты */
div.blockquote{
border-width: 1px !important;
}
p.citation{
border-width: 1px 1px 0 1px !important;
}
/* унификация цветов бордеров */
div.blockquote{
border-color: #CACBCC !important;
}
p.citation{
border-color: #CACBCC !important;
}
div.signature {
border-color: #CACBCC !important;
color: #464D50 !important;
}

/* цвет номера активной страницы */
div.topic_controls li.active {
color: black !important;
}

/* цвета кнопок "отправить", "открыть тему" и т.д. */
ul.topic_buttons a, input.input_submit {
background-color: #43698E !important;
}
ul.topic_buttons a:hover {
color: #ffffff !important;
text-decoration: none !important;
}
input.input_submit.alt{
background-color: #EEF3F8 !important;
}
.topic_buttons li {
text-shadow: none !important;
}


/* кнопки управления постом */
ul.post_controls li a{
padding: 3px 7px 4px 6px !important;
}
ul.post_controls li.top a,
ul.post_controls li.report a {
font-size:0px !important;
}


/* няшная рамочка */
div.post_wrap h3 {
border-bottom: 1px solid #CACBCC !important;
}

/*цвета обрамления форума */
body#ipboard_body {
background-color: #ACB8D8 !important;
}
div.post_block {
border-bottom-color: #ACB8D8 !important;
}

/* дурацкая плашка "лучший пост" */
p.rep_highlight {display: none !important;}


/**** Режим просмотра форумов ****/



/* замена жутких цветных звездочек */
ol.subforums li {
background: none !important;
list-style-type: circle !important;
list-style-position: inside !important;
padding: 0px 4px 0px 2px !important;
}

ol.subforums li.newposts {
list-style-type: disc !important;
}

/* убираем лишний отступ */
#content {
padding-left:0px !important;
padding-right: 0px !important;
}

/* Статистика форума, убираем бордер */
div#board_statistics {
border: none !important;
}

/* полоска "Статистика" */
h3#category_topxstats {
background: url("https://www.animeforum.ru/public/style_images/anime2/cat_repeat.png") repeat-x scroll 0 0 transparent !important;
-moz-border-radius: 5px 5px 0 0 !important;
-webkit-border-radius: 5px 5px 0 0 !important;
border-radius: 5px 5px 0 0 !important;
}

/* названия разделов пухлым */
div.table_wrap table.ipb_table tbody tr td h4 a {
font-weight: bold !important;
}

/* читабельный цвет надписи "Добро Пожаловать..." */
h3#category_board_panel {
color: black !important;
font-weight: normal !important;
}


/**** Форма расширенного ответа ****/

input.input_submit.emoticons {
color: #ffffff !important;
margin: 1px auto !important;
}




/**** Профиль ****/


/* убираем странный белый бордер вокруг раздела "комментарии" */
div#post_comment {
border: none !important;
}

/* странный белый бордер вокруг коментариев */
div.comment {
border: none !important;
}

/* белый фон в комментариях */
div.comment.off {
background: #F8F8FF !important;
}

/* заменяем белый фон в разделе Друзья стандартным */
ul.clearfix {
background-color: #E1E4F2 !important;
}

/* убираем белый фон вокруг раздела Обо мне */
div.recent_activity {
padding: 0 !important;
width: 100% !important;
background-color: transparent !important;
}
div#tab_content {
border: none !important;
}


/************ Панель управления **************/


/* убираем микропортрет */
div#user_navigation img.photo {
display: none !important;
}

/*убираем помощь */
li#help_link {
display: none !important;
}

/* уменьшаем панель с ником */
a#user_link {
min-width: 100px !important;
}
div#user_info {
width: auto !important;
}
/* убираем уведомления */
p#user_notifications {
display: none !important;
}

/*убираем выделение фоном при наведении */
ul#user_other a:hover {
background-color: transparent !important;
border-color: #556B85 !important;
}
/* выпадающее меню */
ul#user_link_menucontent li a:hover {
background-color: transparent !important;
border: 1px solid #556B85 !important;
padding: 4px 5px 5px 8px !important;
}


/********* Унификация и упрощение цветов **********/


/* цвет фона как на старом форуме */
div.post_wrap {
background-color: #F8F8FA !important;
}


/* полоска со ссылками "Активные темы" и т.д. */
ul#stat_links {
background: none !important;
background-color: #E1E4F2 !important;
}



/************* Ссылки **************/



/*** общее ***/
a {
color: #446B91;
text-decoration: none;
border: none;
font-weight: normal;
text-shadow: none !important;
}

a:hover {
color: #BD2026 !important;
text-decoration: underline !important;
border: none;
font-weight: normal;
text-shadow: none !important;
}

/*** пользовательские ссылки ***/
a.bbc_url {
font-weight: normal !important;
color: #446B91 !important;
text-decoration: underline !important;
border: none !important;
}
a:hover.bbc_url {
font-weight: normal !important;
color: #BD2026 !important;
text-decoration: underline !important;
}

/* ссылки переключения страниц в теме */
ul.pagination a:hover {
text-decoration: underline !important;
}

/* ссылки "пути" */
ul#breadcrumb a:hover {
color: #BD2026 !important;
text-decoration: underline !important;
text-shadow: none !important;
}
ul#breadcrumb a {
color: #446B91 !important;
text-shadow: none !important;
}

/* "Просмотр новых публикаций" */

ul#section_links li a {
color: #446B91 !important;
}
ul#section_links li a:hover {
text-shadow: none !important;
text-decoration: underline !important;
color: #BD2026 !important;
}

/* ссылки внизу ("Активные темы" и т.д.) */
ul#stat_links li a:hover {
color: #BD2026 !important;
text-shadow: none !important;
text-decoration: underline !important;
}
ul#stat_links li a {
color: #446B91 !important;
}

/* ссылки в самом самом низу )) */
ul#utility_links li a:hover {
color: #BD2026 !important;
text-shadow: none !important;
text-decoration: underline !important;
}
ul#utility_links li a {
color: #446B91 !important;
text-decoration: none !important;
}

/* исправление наведения на ссылку в профиле "обо мне" и т.д., когда она активна */
li.tab_toggle.active a:hover {
color: #ffffff !important;
text-decoration: none !important;
}

/* кнопки управления постом (убираю подчеркивание) */
ul.post_controls li a:hover {
text-decoration: none !important;
}

/* цвет ника как на старом форуме(контрастней) */
span.author.vcard a {
color: #22229c !important;
font-weight: bold;
}

/* выделение ника при наведении */
span.author.vcard a:hover {
color: #BD2026 !important;
}

/*** верхнее меню ***/
li#nav_discussion a, #primary_nav ul li a {
text-shadow: 0px 0px 0px !important;
}
li.active#nav_discussion a, #primary_nav ul li.active a {
background: none !important;
color: black !important;
}
li#nav_discussion a:hover, #primary_nav ul li a:hover {
background: none !important;
color: black !important;
text-decoration: underline !important;
}

/* Названия разделов */
h3.maintitle a:hover {
color: #ffffff !important;
}

/**** спорные варианты ****/

/* кнопки управления постом (отключено) */
/*
ul.post_controls li a{
background: url("https://www.animeforum.ru/public/style_images/anime2/topic_button.png") repeat-x scroll left center #43698E !important;
color: #ffffff !important;
padding: 3px 7px 4px 6px !important;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
font-size: 1.2em;
}
ul.post_controls li {
background: none !important;
}
ul.post_controls {
padding: 4px 10px 28px 6px !important;
}
*/

/* цвет посещенной ссылки */
/*
a:visited.topic_title {
color: #5F8AB4 !important;
}
*/


/* version 0.3.2 */
}
[/code][/spoiler]


Основные изменения - убраны тяжелые или слишком яркие элементы, немного улучшена читабельность, чуть темнее фон. Уже информация о пользователе. Вообще значительных изменений пока не делал, стилистика практически та же, но лично мне так комфортнее.

В коде есть коментарии, так что если какие то элементы вам не нужны - можете смело их выкинуть. Или поменять - там нет ничего сложного.

Скин в состоянии доработки, это никак не окончательный вариант, так что дополнения/пожелания/советы/замечания/критика/и т.д. и т.п. приветсвуются.

В ближайших планах:
1) [s]привести к общему знаменателю цвета текста и некоторых других элементов(разные цвета кнопок и прочего).[/s] частично, пока не завершатся изменения базового скина.
2) [s]Убрать уродливый белый фон у некоторых элементов в профиле пользователя. [/s] done
3) Подумать над цветом цитат.

http://userscripts.org/scripts/show/96284 <<< убирает розовые конверты у Осаки. Для ФФ нужен greasemonkey, для хрома ничего не надо, а в опере я хз как userjs тамошний использовать, но по идее работать везде должно.

http://userscripts.org/scripts/show/96292 <<< перемещает кнопку с цитатой выделенного текста Изменено 7 февраля, 2011 пользователем Davinel

[Az.]

Поставил, вроде бы поудобнее стало. Спасибо.

[Maeghgorre]

[member="Davinel"], вы просто ня как чудесны. Реально чувствуешь, насколько много было лишнего безобразия

[Tоri]

Все работает. Громадное спасибо.

[Sovent]

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

[Stas21]

Как доделаешь, нужно будет попросить добавить этот скин в качестве альтернативного.

[Davinel]

[quote name='Susaku' timestamp='1296772365' post='2626749']
Ну не знаю, лично мне обычный скин больше по душе, чем ваш. Но так или иначе, спасибо за проделанную работу.
[/quote]

Я его в первую очередь для себя делаю, так что не удивительно, что он кому то может не нравится

[quote name='Stas21' timestamp='1296772467' post='2626750']
Как доделаешь, нужно будет попросить добавить этот скин в качестве альтернативного.
[/quote]

хм, я о таком варианте и не думал как то О_о


пс: жестоко что то форум глючит..

[Tоri]

Если вы открыты для комментариев, то вставлю свои пять копеек:

- Что вы можете сделать с верхней панелью пользователя? Спрашиваю, т. к. не в курсе, что вы можете с ней (с)делать и не слишком много я попрошу. Так вот, можно ли ее как-нибудь изменить? Сократить (убрать микрофотографию, помощника, уведомления) к примеру?

- Можно ли на иконках с Осакой оставить одни иконки с письмом вместо еще и облачков? Не очень понимаю назначение этих облачек.

[quote]В коде есть коментарии, так что если какие то элементы вам не нужны - можете смело их выкинуть. Или поменять - там нет ничего сложного.[/quote]
За это вам нужно пожать руку.

[Davinel]

[quote name='Tyz-In' timestamp='1296776233' post='2626786']
- Что вы можете сделать с верхней панелью пользователя? Спрашиваю, т. к. не в курсе, что вы можете с ней (с)делать и не слишком много я попрошу. Так вот, можно ли ее как-нибудь изменить? Сократить (убрать микрофотографию, помощника, уведомления) к примеру?[/quote]
вот так?
[url=http://itmages.ru/image/view/117007/b8c6905f][img]http://storage5.static.itmages.ru/i/11/0204/s_1296777924_b8c6905f0b.png[/img][/url]
[quote name='Tyz-In' timestamp='1296776233' post='2626786']
- Можно ли на иконках с Осакой оставить одни иконки с письмом вместо еще и облачков? Не очень понимаю назначение этих облачек.
[/quote]
Ух, я тоже не понимаю. Кстати мне облачка больше чем письмо нравяться ) Но вообще не знаю, получится ли, там какой то не очень понятный принцип. Посмотрю.

С Осаками понял. Облачко это когда не прочитанные сообщения в разделе, а конверт - не прочитанные сообщения в подразделах.
Поменять к сожалению простым способом наверное не выйдет, т.к. меняется не через css, а скриптом.

[suiri otaku]

Поставила на оперу. Стало удобнее. Микрофотка, правда, лично мне не мешала, я к ней на других форумах с похожим фейсом привыкла, ну да фиг с ней. Спасибо.)

[Davinel]

[quote name='suiri otaku' timestamp='1296782497' post='2626796']
Поставила на оперу. Стало удобнее. Микрофотка, правда, лично мне не мешала, я к ней на других форумах с похожим фейсом привыкла, ну да фиг с ней. Спасибо.)
[/quote]

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


тем временем пофиксил кучу своих и чужих багов, типа темного текста на темном фоне и светлого на светлом, перекрасил ссылки и сделал большую их часть активными при наведении и еще чего то по мелочи.

[shiоri]

Дав, как насчёт:
- разных цветовых гамм
- цвет блока цитаты сделать аналогичным общей гамме, но бледнее и менее контрастным?

[Davinel]

[quote name='shiori' post='2627345']
- цвет блока цитаты сделать аналогичным общей гамме, но бледнее и менее контрастным? [/quote]
Получается как то уж чересчур синее все.. А вообще на userstyles есть такая штука, как опции для скина, так что я наверное сделаю просто несколько вариантов и можно будет выбирать.

[quote name='shiori' post='2627345']
- разных цветовых гамм
[/quote]
Ну я сначала с этой разберусь, потом уже другие ) А вообще там есть некоторые проблемы в том, что это ж картинки менять надо. А некоторые картинки прибиты гвоздями(задаются не через css, а через тег img) - например Осаки так сделаны. Таких, впрочем, не так уж много...

[GodSlayer]

Я вот хочу поменять цвет нижней границы поста, и убрать надписи "Жалоба", "В блог", и "Наверх" с кнопок, но оно почему-то меня не слушается, хотя вроде пишу всё так же, как в скрипте.
И как-то уменьшить ширину у "Статистика" и "Последнее сообщение" на главной.
Плюс, поменять местами действия кнопок "Цитата" в посте, и "Цитировать" из инфы о пользователе (это которая [url=https://www.animeforum.ru/topic/74448-пользовательский-дизайн-форума/#editor_fast-reply][img]https://www.animeforum.ru/public/style_images/anime2/pm_msg_new.png[/img][/url]). В идеале, конечно, убрать бы её из инфы вообще, и продублировать рядом со "Цитатой" такой же второй кнопкой.

Кстати, в случае с JS-скриптами можно и картинки менять.

[quote name='shiori' timestamp='1296902985' post='2627345']- цвет блока цитаты сделать аналогичным общей гамме, но бледнее и менее контрастным?[/quote]
Это самим можно же делать.

[Fei-FW]

[quote name='GodSlayer' post='2627420']хочу поменять цвет нижней границы поста, и убрать надписи "Жалоба", "В блог", и "Наверх" с кнопок[/quote]
[code]
ul.post_controls li.top a,
ul.post_controls li.report a {
font-size:0px !important;
}

ul.post_controls {
background-color: red !important;
}
.post_wrap .rep_bar {
background: red !important;
}[/code]

[img]http://i16.fastpic.ru/big/2011/0205/2c/c9e32710f1c45a26c9459f12d79a902c.png[/img]

[GodSlayer]

Мда. Всё же наличие головы при отсутствии базовых знаний, почти равно её отсутствию. Спасибо.

[ъыь]

моар теней
[code].post_block{box-shadow: inset 6px -5px 9px #99a3c3;}
.post_block h3{box-shadow: 0 6px 9px #99a3c3;}[/code]
[url=http://pikucha.ru/i47Pp][img]http://pikucha.ru/i47Pp/thumbnail/af_user_css_als_patch_1.jpeg[/img][/url]

[Davinel]

[quote name='GodSlayer' timestamp='1296914053' post='2627420'] убрать надписи "Жалоба", "В блог", и "Наверх" с кнопок[/quote]
Да это хорошо, так и сделаю.
[quote name='GodSlayer' timestamp='1296914053' post='2627420']
И как-то уменьшить ширину у "Статистика" и "Последнее сообщение" на главной.[/quote]
Это которые в самом низу? А зачем?..

[quote name='GodSlayer' timestamp='1296914053' post='2627420']
Плюс, поменять местами действия кнопок "Цитата" в посте, и "Цитировать" из инфы о пользователе (это которая [url=https://www.animeforum.ru/topic/74448-пользовательский-дизайн-форума/#editor_fast-reply][img]https://www.animeforum.ru/public/style_images/anime2/pm_msg_new.png[/img][/url]). В идеале, конечно, убрать бы её из инфы вообще, и продублировать рядом со "Цитатой" такой же второй кнопкой.[/quote]

Без js не выйдет, а я хотел бы пока от него воздержаться..

[Davinel]

http://userscripts.org/scripts/show/96284 <<< убирает розовые конверты у Осаки. Для ФФ нужен greasemonkey, для хрома ничего не надо, а в опере я хз как userjs тамошний использовать, но по идее работать везде должно.

http://userscripts.org/scripts/show/96292 <<< перемещает кнопку с цитатой выделенного текста Изменено 7 февраля, 2011 пользователем Davinel

[trnorep]

А можно попросить убрать очередную лишнюю деталь, пока этого не стало слишком много и чтобы не успело намозолить глаза?
[attachment=234525:wtf.jpg]

[GodSlayer]

Yamori

Скопируйте это в скрипт. =)
[code]/* дурацкая плашка "лучший пост" */
p.rep_highlight {display: none !important;}
[/code]

[quote name='Davinel' timestamp='1296946538' post='2627673']Это которые в самом низу? А зачем?..[/quote]
Не, это:
[attachment=234526:pr.jpg]
[quote]Без js не выйдет, а я хотел бы пока от него воздержаться..[/quote]
Уже запоздало (благодаря одной няшке с админскими правами и шилом в), но... А разве нельзя дублировать код кнопки "цитата", но вместо её ссылки подставить ту, что в инфе? Просто интересно.

з.ы. В опрере js работает на ура. Вставляется так же, как и css, только вместо "вид" - "скрипты".

[Davinel]

[quote name='GodSlayer' timestamp='1297107180' post='2628627']
А разве нельзя дублировать код кнопки "цитата", но вместо её ссылки подставить ту, что в инфе? Просто интересно.[/quote]

Ну, сейчас я просто переместил кнопку из инфы, чтобы не убирать старую кнопку "цитата"(мало ли, может кому то она нравится). А так да, можно было просто ссылки местами поменять.
У каждого объекта есть куча атрибутов, у ссылки, например, .href, в js можно их изменять как угодно, например приравнять к .href другого объекта.

[GodSlayer]

Не, не поменять, а добавть ещё одну такую же, но с другой функцией. Вот так:
[attachment=234530:qou.png]

[Davinel]

Хм, так я ж так и сделал в скрипте, который выше.
[url=http://itmages.ru/image/view/119948/e5ce95eb][img]http://storage8.static.itmages.ru/i/11/0207/s_1297112118_e5ce95ebb0.png[/img][/url]

А вообще, инсайдерская инфа: в скором времени так будет и без js.

[GodSlayer]

[quote name='Davinel' post='2628682']
Хм, так я ж так и сделал в скрипте, который выше.
[/quote]
Угу, ей и пользуюсь.) Но чисто теоретически хотелось узнать, можно ли было скопипастить с помощью css кнопку цитаты таким вот образом, и при этом поменять свойства.