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

[Davinel]

Подправил тут немного скин для АФ. В первую очередь это для аддона stylish для файрфокса. С ним проще всего - нужно просто создать новый стиль и скопировать туда скрипт из спойлера.

Для оперы - убрать первые две строчки и последнюю(со знаком "}"), сохранить в файл с разрешением css. Потом зайти на АФ, нажать ф12, выбрать "настройки для сайта", зайти в "вид" и там выбрать этот файлик. Но для оперы я не тестировал, фиг знает, может где то не совсем так отображаться, как мне хотелось, так что пишите о таких вещах - постараюсь исправить.

Для хрома - установить аддон 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

 

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

 

 

Выглядит сейчас все примерно вот так(скрин может немного отставать от текущей версии):

http://storage1.static.itmages.ru/i/11/0203/s_1296758875_e391501d18.png

Изменения есть и на других страницах, но там их меньше и мне лениво все скринить )

 

 

@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 */
}

 

 

 

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

 

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

 

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

 

В ближайших планах:

1) привести к общему знаменателю цвета текста и некоторых других элементов(разные цвета кнопок и прочего). частично, пока не завершатся изменения базового скина.

2) Убрать уродливый белый фон у некоторых элементов в профиле пользователя. done

3) Подумать над цветом цитат.

 

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

 

http://userscripts.org/scripts/show/96292 <<< перемещает кнопку с цитатой выделенного текста

Изменено 7 февраля, 2011 пользователем Davinel (смотреть историю редактирования)

[Az.]

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

[Maeghgorre]

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

[Tоri]

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

[Sovent]

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

[Stas21]

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

[Davinel]

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

 

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

 

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

 

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

 

 

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

[Tоri]

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

 

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

 

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

 

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

За это вам нужно пожать руку.

[Davinel]

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

вот так?

http://storage5.static.itmages.ru/i/11/0204/s_1296777924_b8c6905f0b.png

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

Ух, я тоже не понимаю. Кстати мне облачка больше чем письмо нравяться ) Но вообще не знаю, получится ли, там какой то не очень понятный принцип. Посмотрю.

 

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

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

[suiri otaku]

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

[Davinel]

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

 

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

 

 

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

[shiоri]

Дав, как насчёт:

- разных цветовых гамм

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

[Davinel]

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

Получается как то уж чересчур синее все.. А вообще на userstyles есть такая штука, как опции для скина, так что я наверное сделаю просто несколько вариантов и можно будет выбирать.

 

- разных цветовых гамм

Ну я сначала с этой разберусь, потом уже другие ) А вообще там есть некоторые проблемы в том, что это ж картинки менять надо. А некоторые картинки прибиты гвоздями(задаются не через css, а через тег img) - например Осаки так сделаны. Таких, впрочем, не так уж много...

[GodSlayer]

Я вот хочу поменять цвет нижней границы поста, и убрать надписи "Жалоба", "В блог", и "Наверх" с кнопок, но оно почему-то меня не слушается, хотя вроде пишу всё так же, как в скрипте. :(

И как-то уменьшить ширину у "Статистика" и "Последнее сообщение" на главной.

Плюс, поменять местами действия кнопок "Цитата" в посте, и "Цитировать" из инфы о пользователе (это которая ). В идеале, конечно, убрать бы её из инфы вообще, и продублировать рядом со "Цитатой" такой же второй кнопкой.

 

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

 

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

Это самим можно же делать.

[Fei-FW]

хочу поменять цвет нижней границы поста, и убрать надписи "Жалоба", "В блог", и "Наверх" с кнопок

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;
}

 

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

[GodSlayer]

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

[ъыь]

моар теней

.post_block{box-shadow: inset 6px -5px 9px #99a3c3;}
.post_block h3{box-shadow: 0 6px 9px #99a3c3;}

http://pikucha.ru/i47Pp/thumbnail/af_user_css_als_patch_1.jpeg

[Davinel]

убрать надписи "Жалоба", "В блог", и "Наверх" с кнопок

Да это хорошо, так и сделаю.

И как-то уменьшить ширину у "Статистика" и "Последнее сообщение" на главной.

Это которые в самом низу? А зачем?..

 

Плюс, поменять местами действия кнопок "Цитата" в посте, и "Цитировать" из инфы о пользователе (это которая ). В идеале, конечно, убрать бы её из инфы вообще, и продублировать рядом со "Цитатой" такой же второй кнопкой.

 

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

[Davinel]

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

 

http://userscripts.org/scripts/show/96292 <<< перемещает кнопку с цитатой выделенного текста

Изменено 7 февраля, 2011 пользователем Davinel (смотреть историю редактирования)

[trnorep]

А можно попросить убрать очередную лишнюю деталь, пока этого не стало слишком много и чтобы не успело намозолить глаза?

 

[GodSlayer]

Yamori

 

Скопируйте это в скрипт. =)

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

 

Это которые в самом низу? А зачем?..

Не, это:

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

Уже запоздало (благодаря одной няшке с админскими правами и шилом в), но... А разве нельзя дублировать код кнопки "цитата", но вместо её ссылки подставить ту, что в инфе? Просто интересно.

 

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

[Davinel]

А разве нельзя дублировать код кнопки "цитата", но вместо её ссылки подставить ту, что в инфе? Просто интересно.

 

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

У каждого объекта есть куча атрибутов, у ссылки, например, .href, в js можно их изменять как угодно, например приравнять к .href другого объекта.

[GodSlayer]

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

[Davinel]

Хм, так я ж так и сделал в скрипте, который выше.

http://storage8.static.itmages.ru/i/11/0207/s_1297112118_e5ce95ebb0.png

 

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

[GodSlayer]

Хм, так я ж так и сделал в скрипте, который выше.

Угу, ей и пользуюсь.) Но чисто теоретически :rolleyes: хотелось узнать, можно ли было скопипастить с помощью css кнопку цитаты таким вот образом, и при этом поменять свойства.