LINUX.ORG.RU

Нормальное оформление с «няшной» или другой цветовой схемой


0

2

По мотивам: За что вы любите стиль танго ЛОРа?

Как показал опрос, практически все использующие стиль tango используют его только из-за относительно «мягкого» сочетания цветов.

Но tango отвратителен во многом (в том тенде есть подробности), любой человек более-менее знакомый с композицией, дизайном/дизайнерской версткой, как и любой человек с хорошим вкусом с этим согласится.

То, что люди юзают такую страшную тему только из-за цветовой схемы меня огорчает. Ровно как и тот факт, что эта страшная тема - дефолтная. Изменить цветовую схему очень просто, для начала предлагаю код, чтобы сделать это локально:

*:not(.quote):not(.code) {
	font-family: Ubuntu !important; /* Кто не фанаты шрифта Ubuntu - убираем эту строчку */
	border-color: #555753 !important; /* Цвет всех границ */
}

body {
	background-color:#393333 !important; /* Цвет основного фон */
	color:#BABDB6 !important; /* Цвет основного текста */
}

:visited {color:#DDD !important;} /* Цвет посещенных ссылок */
a:hover {color:#BABDB6 !important;} /* Цвет ссылок при наведении */

.boxlet, .nav, .messages .msg, #bd tfoot {background-color:#292929 !important;} /* Цвет фона высокого приоритета (выделенные объекты) */
.boxlet h2, #head-main table td a, .head, .msg>.title, #bd thead {background-color:#553030 !important;} /* Цвет фона высшего приоритета (маленькие объекты - заголовки и т. п.) */

.forum tbody {background-color:#393333 !important;} /* Цвет фона списка тем */
.forum table tbody tr:hover{background-color:#5c3566 !important;} /* Фон строчки в списке тем при наведении */

.infoblock, iframe, body>a>img {display:none;} /* Убираем рекламу и картинку вверху (она с черным фоном тут не втему) */

/* Меняем хиадер */
#head-main table {border:none !important; margin-left:245px;}
#head-main td, #head-main tr {display:inline-block; border:none !important; padding-left:0px !important;}
#head-main td a, .head {border:solid #555753 1px; padding:2px;}
.head {left:715px !important; top:8px !important;}
#head-main a, .head a {text-decoration:underline !important;}
#head-main table td a{display:block; width:65px; text-align:center;}
#head-main {margin-left:0px !important; height:30px;}
.head td>a>img {display:none;}
.head tr:first-of-type {float:right;} .head tr:last-of-type {float:left;}
.column {margin-top:-29px;}
.nav {padding:3px !important; margin-top:10px !important; border:solid 1px #555753 !important;}


/* Непринципиальные изменения */
.boxlet h2 {padding: 3px 5px !important; border-bottom: solid 1px #555753 !important;}
.msg .title {padding: 1px;}
.code, .quote {margin-top:5px;}

Основная цветовая конфигурация - всего четыре цвета, а равно четыре значения в данном коде: цвет основного фона/текста, цвет фона высокого/высшего приоритета.
Вся цветовая конфигурация - девять цветов и, соответственно, девять значений.

Также данный код меняет некоторые вещи, чтобы, собственно, можно было менять цвет фона и др.

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

http://itmages.ru/image/view/242234/2ca90187
http://itmages.ru/image/view/242232/31106e12

Я старался подобрать цвета «по мягче», если не получилось - простите.

Значит, цвета меняются, а по сути остается тот же правильный блэк (кроме хиадера на главной).

Сохраняете код в файл, задав нужные вам цвета и прикрепляете к сайту через браузер.
В опере: настройки для сайта > вид > моя таблица стилей > F5
В файрфоксе есть плагин stylish. Для того, чтобы сабж применялся только к ЛОРу вот:

@-moz-document domain("linux.org.ru") {
<сабж сюда>
}
И гарантий по файрефоксу не даю (но если что не так - все-же пишите).

Ъ: Ставить на тему black (т. е. black в настройках д. б. задана).

Новые версии будут опубликованы ниже.

-----------------------
Теперь главное.

Я готов создать соответствующую тему на основе блека (в смысле, для движка). Но мне нужна гарантия того, что эта тема будет впилина в движок, причем не мной т. к. JSP я не знаю и поэтому почти совсем не понимаю структуру движка (как впилить новую тему - в частности). LORCode panel так и не впилили...

Конечно, хиадер я оставлю почти как в блеке, просто сделав картинки с прозрачным фоном (сейчас они с черным фоном - поэтому я их скрыл).

Я действительно сомневаюсь, что подобранное мной сочетание цветов устраивает большинство (мне самому-то оно не совсем нравится), поэтому предлагайте сюда свои сочетания цветов, а то, которое будем впиливать в движок выберем консенсуально (надеюсь, иначе же - приблизительным голосованием).

Но прежде всего в тенде я жду ответ от разработчиков движка.

-----------------------
Да, я знаю, что я му и член партии Справедливая Россия, потому что в сабже не осталось картинки на которую можно тыкнуть и попасть на главную (картинка с черным фоном), я постараюсь что-нибудь сделать в следующей версии (Ъ: внизу страницы есть ссылка).



Последнее исправление: moscwich (всего исправлений: 6)

Ответ на: комментарий от backbone

Да че в следующей версии, просто же все:

#wiki-page :visited {color:#AAAAAA !important;}

Это надо добавить.

В заголовках и меню, имхо, лучше чтобы оставался как для непосещённых.

:visited {color:#BABDB6 !important;} /* Цвет посещенных ссылок везде соответствует непосещенным */
.msg :visited {color:#DDD !important;} /* Цвет посещенных ссылок в постах */

Это надо вставить вместо той строчки...

А также ссылки на страницу темы(не видно - которая открыта, а которая - посещена), в идеале ещё на главную и до 2-го уровня вложенности вроде Форум->Development или Новости->OpenSource...

Вот это чет я не понял...

moscwich
() автор топика
Ответ на: комментарий от megabaks

Ты перекрашиваешь танго. Танго ужасен, причем не цветами.

Сабж - показать как перекрашивать блэк, потому что он не ужасен. Такие же цвета я предлагаю тебе задать в представленном коде.

moscwich
() автор топика
Ответ на: комментарий от ciiccii

для кода...

.code{background:#8f8f8f  !important; border: 1px solid !important;overflow: auto !important;max-height: 250px !important;}
цвет выбери сам
пока никуда не заливал (со скроллами у кода)

megabaks ★★★★
()
Ответ на: комментарий от megabaks

> man css!
overflow никто до тебя не задавал => !important не нужен.

ты не нужен!

Ну в танго все через ж... или это у тебя...

moscwich
() автор топика
Ответ на: комментарий от moscwich

понятно - аргументов нет
а "!important" - это не только вынужденная мера, но и хорошая привычка при рисовании собственного стиля только для себя
аргументы думаю не нужны!?

megabaks ★★★★
()
Ответ на: комментарий от moscwich

как можно что-то сказать если нет конечного результата? :-)
я со своей стороны могу предложить только помощь\консультацию по движку.
окончательное решение естественно остается за maxcom-омом, судя по последним сообщениям он не в восторге от количества тем. однако мнение общественности может повлиять на окончательное решение, я считаю ;-)

hizel ★★★★★
()
Ответ на: комментарий от megabaks

!important нужен тогда, когда он нужен т. е. тогда, когда кто-то задаст это значение после тебя (а локальные стили типа первые). overflow никто кроме тебя не задает.

moscwich
() автор топика
Ответ на: комментарий от hizel

> я со своей стороны могу предложить только помощь\консультацию по движку.

Если не затруднит - сейчас и здесь. Поциэнт (я) JSP не знает, но знает html/css и пхп... Как впилить тему? Как задать ее по дефолту (на это рассчитываю в идеале)? Можно (и лучше) коротко - я понятливый, но JSP не знаю.

moscwich
() автор топика
Ответ на: комментарий от hizel

Было предложение сделать прокрутку для code, но опционально...
Может сделать опционально - не сложно?

moscwich
() автор топика
Ответ на: комментарий от moscwich

> Вот это чет я не понял...

А, это я про эти

[страница ← 1 2 3 4 5 →] 
говорил...

#wiki-page :visited {color:#292929 !important;}
a {color:#bbbbbb !important;} /* Цвет ссылок */
:visited {color:#bbbbbb !important;} /* Цвет посещенных ссылок */
.msg :visited {color:#777777 !important;} /* Цвет посещенных ссылок в постах */
a:hover {color:#ffffff !important;} /* Цвет ссылок при наведении */
.msg a:hover {color:#ffffff !important;} /* Цвет ссылок в постах при наведении */

- спасибо, заработало!

Сейчас в трекере посещённые ссылки не подсвечиваются. Как их посветить?

backbone ★★★★★
()
Ответ на: комментарий от backbone

> a:hover {color:#ffffff !important;} /* Цвет ссылок при наведении */

.msg a:hover {color:#ffffff !important;} /* Цвет ссылок в постах при наведении */


А разница?

Сейчас в трекере посещённые ссылки не подсвечиваются. Как их посветить?


Тока вместе с посещёнными ссылками в списках тем.

Вместо

.msg :visited {color:#777777 !important;}

Вот:

.msg :visited, .forum :visited {color:#777777 !important;}

moscwich
() автор топика
Ответ на: комментарий от moscwich

> А разница?

Ну не знаком я с синтаксисом, просто первая строка значит. :)

> Вместо

.msg :visited {color:#777777 !important;}

Вот:

.msg :visited, .forum :visited {color:#777777 !important;}

Всё, cool! Остановился на таком, отличия только в цвете немного:

#wiki-page a {color:#7777ee !important;}
#wiki-page a:visited {color:#aaaaee !important;}
#wiki-page a:hover {color:#7777ff !important;}
a {color:#bbbbbb !important;} /* Цвет ссылок */
:visited {color:#bbbbbb !important;} /* Цвет посещенных ссылок */
.msg :visited, .forum :visited {color:#777777 !important;} /* Цвет посещенных ссылок в постах */
a:hover {color:#ffffff !important;} /* Цвет ссылок при наведении */
.dateinterval :visited {color:#ffffff !important;} /* Цвет ссылок в постах при наведении */

backbone ★★★★★
()
Ответ на: комментарий от moscwich

А, нет, есть разница: здесь если навести на «Сравнение производительности с SQLite и Kyoto Cabinet», то без .msg a:hover подсвечиваться не будет.

backbone ★★★★★
()
Ответ на: комментарий от backbone

> .dateinterval :visited {color:#ffffff !important;} /* Цвет ссылок в постах при наведении */

???

А, нет, есть разница: здесь если навести на «Сравнение производительности с SQLite и Kyoto Cabinet», то без .msg a:hover подсвечиваться не будет.


УМВР.

moscwich
() автор топика
Ответ на: комментарий от moscwich

> ???

ой, это не надо, я ж говорю, не знаком с css...

> УМВР

Проверил ещё раз. Убираю

.msg a:hover {color:#ffffff !important;} /* Цвет ссылок в постах при наведении */
, при наведении на ссылку «>>> Сравнение производительности с SQLite и Kyoto Cabinet» подсветка исчезает...
FF 5.0.1...

Юзеры:

.sign a {color:#ff4444 !important;}
.sign a:visited {color:#bb6666 !important;}
.sign a:hover {color:#ff0000 !important;}

backbone ★★★★★
()
Ответ на: комментарий от backbone

> ой, это не надо, я ж говорю, не знаком с css...

Да я просто не знаю о чем это. Что есть этот .dateinterval ?

moscwich
() автор топика
Ответ на: комментарий от moscwich

Да я думал, что так можно задать цвет посещённых ссылок в списке тем трекера. Просто в html увидел

<td class="dateinterval">
...

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

.title a {color:#00ff00 !important;}
, с ней одновременно задаётся цвет ссылки на предыдущий комментария в заголовке, кт. должен меняться, как нужно?

backbone ★★★★★
()

>   font-family: Ubuntu !important; /* Кто не фанаты шрифта Ubuntu - убираем эту строчку */

Может, тут мне объяснят, нафиг? Одно дело — когда используется несколько разных шрифтов либо дизайн чуть ли не попиксельный, тут несколько явных family более-менее оправданы. Другое — как тут. font-family: Sans !important; (либо выпилить нафиг) выглядит заметно логичнее, у нормальных людей давно в браузере установлен любимый шрифт глобально.

x3al ★★★★★
()
Ответ на: комментарий от moscwich
[#] Ответ на: комментарий от backbone 29.07.2011 0:42:48

Мелочь, конечно=)
Просто интересно, как можно выделить в css вот эту первую ссылку с «#» и отдельно ссылку «комментарий», чтобы стили разные задать...

backbone ★★★★★
()
Ответ на: комментарий от x3al

У оперы с этим проблемы. У меня на все Ubuntu установлен, он мне Ubuntu Light делает.

moscwich
() автор топика
Ответ на: комментарий от gentoo_root

Спасибо, польстило :3
И это я её ещё не допилил, со смартфоном новым наиграюсь и пойду дальше пилить...

TTRJN
()

А стиль - отстой, кстати.

TTRJN
()
Ответ на: комментарий от moscwich

о точно, был заблокирован googleapis.com. Зачем он вообще нужен?

ciiccii
()
Ответ на: комментарий от x3al

> > font-family: Ubuntu !important; /* Кто не фанаты шрифта Ubuntu - убираем эту строчку */

Может, тут мне объяснят, нафиг?

ОМГ. Б-же, покарай ТСа. «Специалист по дизайну и верстке», тьфу.

geekless ★★
()
Ответ на: комментарий от Freiheits-Sender

Какой он Артемий, так, козявка из его носа, не более.

TTRJN
()
Ответ на: комментарий от JFreeM

> красный - цвет агрессии - не нужен.

Оттенки красного - тёплые цвета :)

Кстати, щёлкните по первому сообщению в уведомлениях, какой цвет рамки у сообщения? =)

backbone ★★★★★
()
Ответ на: комментарий от backbone

> Кстати, щёлкните по первому сообщению в уведомлениях, какой цвет рамки у сообщения? =)

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

ТСу: почему ты думаешь, что твоё мнение в дизайне единственно правильное и так стремишься пропихнуть свой стиль как основной?

SoulThreads
()
Ответ на: комментарий от SoulThreads

почему ты думаешь, что твоё мнение в дизайне единственно правильное и так стремишься пропихнуть свой стиль как основной?

Я стремлюсь впихнуть как основной стиль блэк только в любой другой конфигурации цветов (сабж собственно и есть перекраска блэка), которая больше всего угодна большинству т. к. практически все использующие стиль tango используют его только из-за сочетания цветов.

Мне уже надоело повторять. Народ, вы вообще читаете сабж прежде чем писать в тенд?

moscwich
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.