Регистрация Забыли пароль?
Объекты Жители Библиотека Блоги
ade
Злой написало 22 ноября 2011 в 22:08 [изменен через 1 час] [ Назад ]

На светлой стороне силы

Может быть, кому-то как и мне не совсем нравится цветовая гамма этого сайта - темный текст на темном же фоне, его напряжно читать.

Может быть, это дело привычки, но RED подсказал в личке одно интересное решение - плагин Stylish.

Для Chrome или Firefox

Ставим, заходим в настройки и создаем новый стиль. Назвать можно как угодно.

В поле для кода вписываем следующее:


body {
background: none repeat scroll 0 0 #fafafa;
color: #333;
font-family: Tahoma,Arial,Verdana;
font-size: 11px;
min-width: 965px;
}

a {
color: #6DA3BD;
outline: medium none;
text-decoration: underline;
}

#title {
background: none repeat scroll 0 0 #f0f0f0;
overflow: hidden;
padding: 12px 25px 20px 28px;
position: relative;
}

div.highlight {
background: none repeat scroll 0 0 #ccc;
border-radius: 3px 3px 3px 3px;
margin-bottom: 6px;
padding: 3px 7px 5px;
position: relative;
}

#inblogs tr.highlight {
background: none repeat scroll 0 0 #ccc;
}

#inblogs td.author {
border-left: 2px solid #ccc;
border-right: 2px solid #ccc;
}

#inblogs.highlight.replies {
background: url("/img/db/rounding.gif") repeat-y scroll 100% 0 #ccc;
}

#menu {
background: none repeat scroll 0 0 #FAFAFA;
height: 60px;
min-width: 860px;
overflow: hidden;
padding: 9px 25px 0;
}

#blogList.blogBar {
background: none no-repeat scroll 0 0 #CCCCCC;
border-radius: 3px 3px 3px 3px;
clear: both;
font-size: 11px;
margin: 0 0 27px;
overflow: hidden;
padding: 5px 0;
position: relative;
}

#top {
background-attachment:initial;
background-clip:initial;
background-image:none;
background-color:#fafafa;
background-origin:initial;
background-position:initial initial;
background-repeat:initial initial;
font-size:12px;
min-width:860px;
position:fixed;
width:100%;
z-index:99;
}

.rounded {
background-color:#fafafa;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}

#teaser {
background-attachment:initial;
background-clip:initial;
background-color:#000000;
background-image:initial;
background-origin:initial;
background-position:initial initial;
background-repeat:initial initial;
overflow-x:hidden;
overflow-y:hidden;
padding-bottom:6px;
padding-left:0;
padding-right:0;
padding-top:0;
text-align:center;
white-space:nowrap;
height:95px;
}

#footer {
background-attachment:initial;
background-clip:initial;
background-color:#fafafa;
background-image:initial;
background-origin:initial;
background-position:initial initial;
background-repeat:initial initial;
font-size:12px;
min-width:965px;
padding-bottom:22px;
padding-left:0;
padding-right:0;
padding-top:0;
}

#teaser a img {
border: 0 none;
margin-top: -25px;
}

#tagCloud a {
color:#AAAAAA;
text-decoration:none;
}


Очень важно добавить опцию:

URLs on domain: urban3p.ru

Если это не сделать, шрифты на других сайты будут искажены.

По настройкам должно получиться примерно как у меня:

Image


Для чего вся это морока, спрсите вы.

В результате, на мой взгляд, сайт становится более читаемым, освобождается полезная площадь. Опять же дело привычки. Получается примерно так:

Главная

Image

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

Докидывайте кусочки светлого стиля в комментарии, как видите вы, вместе соберем что-то хорошее.


Блоги

Image

Отчет

Image
Korg
Уайт Спирит Korg написал 22 ноября 2011 в 22:17
Голубой и светло серый-то конечно выглядит и читается на белом намно-о-ого лучше :) И темные значки тоже смотрятся ой как хорошо
Выгляди голым. иначе и не сказать.
Image
+23
Ссылка | 1 отв.
ade
Злой ade написало 22 ноября 2011 в 22:20
Korg: каждому свое

про значки - да, тут только перерисовать
Hobot
Антон Hobot написал 22 ноября 2011 в 22:24 [исправлен через 1 минуту]
Мне по душе тёмный. Некоторые сайты ИМХО потеряли что-то при переходе на светлую сторону. (лол, одинаковая ассоциация. Бывает)
+3
Ссылка | 5 отв.
ade
Злой ade написало 22 ноября 2011 в 22:27
Hobot: по стилю и тематике темный ближе - подземелья и все такое, но для получения информации светлый фон удобнее

хотя консоль по привычке перенастроил на темный фон :)
0
Ссылка |  ↑ | 4 отв.
Korg
Уайт Спирит Korg написал 22 ноября 2011 в 22:31
ade: белый откровенно долбит по глазам. К тому же цвет шрифтов под него не адаптирован. Только глаза ломать.
+2
Ссылка |  ↑ | 3 отв.
ade
Злой ade написало 22 ноября 2011 в 22:35
Korg: цвет шрифтов как раз адаптирован, я же не только фон менял :)
0
Ссылка |  ↑ | 2 отв.
Korg
Уайт Спирит Korg написал 22 ноября 2011 в 22:37
ade: желтый на белом ок?
+9
Ссылка |  ↑ | 1 отв.
ade
Злой ade написало 22 ноября 2011 в 22:43
Korg: а желтый где? ссылки есть только темно-коричневые

если есть где-то желтый, можно его поменять
RED
Вячес Редкий RED написал 22 ноября 2011 в 22:43
Сокращенный вариант твоего стиля:
body {color: #333;}
a {color: #6DA3BD;}
#title {background:#f0f0f0;}
#teaser {height:15px}
#teaser img {position: relative;top: -170px;}
#teaser a:first-child img {top: -80px;}

#tagCloud a {color:#AAA;}
#inblogs tr .author {border-color:#fff;}

body,
#menu,
#top,
.rounded,
#footer {background:#fafafa;}

div.highlight,
#inblogs tr.highlight,
#inblogs .highlight .author,
#inblogs .highlight .replies,
#blogList .blogBar {background:#CCC;}
+3
Ссылка | 2 отв.
ade
Злой ade написало 22 ноября 2011 в 22:48
RED: да, тизер получился лучше
ade
Злой ade написало 22 ноября 2011 в 22:56
RED: еще

.bar {background:#CCC;}
.bar a {color:#333333;}
Brodyaga
ЧиполЛина Brodyaga написал 22 ноября 2011 в 22:45
Дожили... Иные варианты портят атмосферу. В смысле, не то уже будет...
+11
Ссылка | 7 отв.
ade
Злой ade написало 22 ноября 2011 в 22:49
Brodyaga: атмосферу портят вредные выбросы заводов и иные газы

новый стиль - всего лишь альтернатива для восприятия информации
0
Ссылка |  ↑ | 6 отв.
Brodyaga
ЧиполЛина Brodyaga написал 22 ноября 2011 в 22:58
ade: Ты плохо её воспринимаешь?
Как мне кажется, цветовая гамма сайта - одна из его особенностей, отличителная черта, индивидуальность, так сказать. И вполне гармонирует с тематикой сайта.
+11
Ссылка |  ↑ | 5 отв.
ade
Злой ade написало 22 ноября 2011 в 23:00
Brodyaga: никто и не спорит, но _мне удобнее_ читать сайт так, как я написал

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

вообще не вижу проблемы с твоей стороны
+6
Ссылка |  ↑ | 2 отв.
Brodyaga
ЧиполЛина Brodyaga написал 22 ноября 2011 в 23:02
ade: Проблемы нет. Я высказываю своё мнение, которое имеет право существовать. Верно?
0
Ссылка |  ↑ | 1 отв.
ade
Злой ade написало 22 ноября 2011 в 23:03
Brodyaga: да, все верно
Korg
Уайт Спирит Korg написал 22 ноября 2011 в 23:01
Brodyaga: сайт же не какой-нибудь Вася с укоза делал. А грамотный, шаряший в своем деле человек.
+1
Ссылка |  ↑ | 1 отв.
Brodyaga
ЧиполЛина Brodyaga написал 22 ноября 2011 в 23:01
Korg: Точняк!
RED
Вячес Редкий RED написал 22 ноября 2011 в 23:09
На самом деле Stylish очень полезная штука. Если вдруг на каком сайте вас какая-нибудь фигня раздражает, то, вооружившись поверхностными знаниями CSS, можно ее убрать или преобразить как вам угодно.

А к Урбану можно применить один стиль для стайлиша, для владельцев бооольших мониторов и развернутого браузера:
div.limitare {max-width:1800px;}
#blogList.postPage {width:auto;}
+11
Ссылка | 1 отв.
VVind
Антон Романов VVind написал 22 ноября 2011 в 23:27
RED: вот это полезно. Возможно сделать так чтобы при увеличении фотографии по клику появлялась нижняя полоса прокрутки? Получается так что часть фотографии выходит за границу экрана.
VVind
Антон Романов VVind написал 22 ноября 2011 в 23:18 [исправлен через 5 минут]
ссылка для хрома битая (исправлено)
Только жители сайта могут оставлять комментарии.