4234f03f6...0df.jpg, 90.11 KB, 471x700, exif ggl iq id3 |
Пришло время делиться медскилзами своих CSS для родной борды.
Дизайнер на связи, кидайте реквесты. И да, ваш скелет — говно, неужели нельзя было использовать няшный html5?
>>cK
Реквестирую нормальный (насколько это возможно) фотон. Сам являюсь криворуким хуйлом-самоучкой, но кое что постарался сделать http://rghost.ru/46605930
>>cK
> ваш скелет — говно
Принимаю реквесты на его улучшение. HTML5 не предлагать.
>>cZ
HTML5 это новая перспективная технология™, которая будет допилена года через 3. Но к тому времени уже придумают HTML6, поэтому смысла на HTML5 переходить никакого, лучше уж сразу с HTML4 на HTML6, а там глядишь и новая мода появится, все сайты рисовать в канвасе Javascript'a. В общем, это сейчас модно. На деле же, была нормальная идея разделения данных и представления, которая называлась XSLT - данные были (наконец-то!) в чистом XML, представление - отрисовывалось на клиенте через XSLT. Однако, мировая общественность™ ниасилила и вместо этого произвела на свет очередную моднявую штучку с названием HTML5. Это как я все это вижу. Возможно, я и не прав.
>>cM
Фотоно-альтерчан в первом приближении: http://rghost.net/46614969
3c72c12f5...028.png, 161.63 KB, 1235x641, ggl iq id3 |
>>dc
Браузер, размер окна, скриншот? Каким образом устанавливал?
>>df
Есть разница, нет разницы, - главное, что выглядит лучше, чем то, что сейчас по стоит по дефолту. Улучшеная версия с залипающей строкой тегов: http://rghost.ru/46623118 реализовано через жопу, потому что для нормальной реализации надо менять порядок элементов и убрать из html'а жестко прописаные опции.
>>di
> менять порядок элементов и убрать из html'а жестко прописаные опции
Если ты скажешь конкретнее, я поменяю.
>>do
> Поменяй лучше форму ответа.
Ты поменяй, лол. Все средства для этого имеются. Серьезно, всем не угодишь. Свою задачу я вижу в первую очередь в том, чтобы анонимусу удобно менять борду под себя. Поэтому предлагаю начать с конкретных предложений по улучшению html-каркаса. Если html-каркас формы неудобен по каким-либо причинам для моддинга, назови их и, думаю, мы найдем вместе решение, которое нас устроит.
>>dm
> Если ты скажешь конкретнее, я поменяю.
Посмотри, сколько раз в исходнике встречается "style". Их все надо убрать. Внутри треда зачем-то есть явная полоска: <hr style="clear:both"/>, не понимаю, зачем оно. Насчет смены порядка - если устраивает моя концепция из >>di , то можно поставить теги после формы. Сама форма в виде таблицы - это ужас, да.
>>dp
> Ты поменяй, лол.
Ты предлагаешь менять html жабоскриптом что-ли? Альзо, зачем нужны две формы ответа внизу и вверху? Нельзя ли это сделать опциональным через настройки? Как минимум они могли бы быть разных классов, сейчас ведь они неотличимы друг от друга.
>>dr
Я уже предлагал сделать кнопочку "развернуть форму ответа" на что получил несуразное "Пользователь заебеться кликать".
>>dq
> Посмотри, сколько раз в исходнике встречается "style". Их все надо убрать.
Убрал.
> Внутри треда зачем-то есть явная полоска: <hr style="clear:both"/>
Рудимент какой-то. Тоже убрал.
> Насчет смены порядка - если устраивает моя концепция из >>di , то можно поставить теги после формы.
Кого-то устроит, кого-то не устроит. Тут практически каждый посетитель - профессиональный дизайнер в седьмом поколении, поэтому отталкиваться от чьего-либо мнения в том случае, если от него можно не отталкиваться, считаю неправильным. К сожалению, невозможность серьезно влиять на порядок расположения элементов это (на мой взгляд) недостаток CSS, поэтому предлагю менять javascript'ом, либо через уже подключенный jquery (им это делать проще).
> Сама форма в виде таблицы - это ужас, да.
А в виде чего она должна быть?
>>dr
> Ты предлагаешь менять html жабоскриптом что-ли?
По возможности, CSS'ом, а при невозможности - javascript'ом.
> Альзо, зачем нужны две формы ответа внизу и вверху?
Для удобства.
> Нельзя ли это сделать опциональным через настройки?
Это губительный путь, поскольку тогда придется добавлять через настройки всё, что можно. Гораздо лучше будет потом добавлять в настройки уже устаканившиеся, проработанные модификации.
> Как минимум они могли бы быть разных классов, сейчас ведь они неотличимы друг от друга.
Это сейчас сделаю.
24a8fe6b9...8be.png, 1108.47 KB, 1280x720, ggl iq id3 |
http://rghost.ru/46641123
В меру своих способностей постарался перепилить neutron.
>>eH@CHARSET "UTF-8";
html, body {
background-color: #212121 !important;
color: #698CC0 !important;
font-family: "Trebuchet MS",Trebuchet,tahoma,serif !important;
}
a, .abbrev {
color: #C9BE89 !important;
text-shadow: #FFD200 0px 0px 12px !important;
}
a:hover, .abbrev:hover {
color: #EEFEBB !important;
text-shadow: #FFDE22 0px 0px 15px !important;
}
.omittedposts {
color:#999999 !important;
font-weight:normal !important;
font-style:normal !important;
font-size: 15px !important;
}
.markup_quote {
color:#789922 !important;
}
.markup_code {
border: none !important;
background: none !important;
color: #FFFFFF !important;
}
.markup_b {
font-weight:bold !important;
font-size: 0.9em !important;
}
.markup_spoiler, .markup_spoiler .markup_code {
color:#575757 !important;
background-color:#575757 !important;
}
.markup_spoiler:hover,.markup_spoiler .markup_code:hover{
color:#48B0FD !important;
}
.markup_spoiler a {
color:#575757 !important;
background-color:#575757 !important;
text-shadow: none !important;
}
.markup_spoiler a:hover {
color: #C9BE89 !important;
text-shadow: #FFD200 0px 0px 12px !important;
}
.subpost
{
border: solid 1px #575757 !important;
margin: 0px !important;
padding: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
border-radius: 5px !important;
max-width:70%;
color: #698CC0 !important;
background-color:#2C2C2C !important;
}
.post_title {
background:inherit !important;
font-size:16px !important;
color:#3941AC !important;
font-weight:bold !important;
}
.answers {
margin: .5em .5em 0em 1em !important;
}
.reflink, .id, .ref, .ref_id, .pagination {
background: none !important;
border: none !important;
}
.postform {
border-style:none;
}
.postform table td {
border:none !important;
}
input[type="text"], textarea, #path {
-moz-box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
-moz-appearance: none !important;
-webkit-appearance: none !important;
appearance: none !important;
background-color: #111111 !important;
color: #FFFFFF !important;
border: 2px solid #545454 !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
border-radius: 5px !important;
width:98% !important;
}
textarea:hover, textarea:focus, #path:hover, #path:focus {
background-color: #151515 !important;
color: #EEEEEE !important;
}
input[type="file"], input[type="image"], div form select {
background-color: #111111 !important;
color: #FFFFFF !important;
}
.postform table td.post_file {
-moz-box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
-moz-appearance: none !important;
-webkit-appearance: none !important;
appearance: none !important;
background-color: #111111 !important;
color: #FFFFFF !important;
border: 2px solid #545454 !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
border-radius: 5px !important;
}
table {
border-style: none !important;
}
th {
background:transparent !important;
color: #0061AA !important;
font-weight:bold !important;
text-shadow: black 0px 0px 8px !important;
}
pre {
font-family: "Consolas", "Lucida Console", monospace !important;
font-size: 0.81em !important;
}
.logo a {
background:#2C2C2C !important;
border: solid 1px #575757 !important;
}
.adminbar {
}
.adminbar input[type=submit]
{
height:1.5em;
border-left: solid 1px #575757 !important;
border-bottom: none !important;
background:#2C2C2C !important;
color: #698CC0 !important;
}
input[type=submit]
{
height:1.5em;
border:none;
background:#2C2C2C !important;
color: #698CC0 !important;
}
hr {
height:3px !important;
border-width: 0px !important;
background:url(http://rghost.ru/46641119/image.png) center no-repeat !important;
}
Добавил внешний вид обычных submit, если ты не против.
>>eQ
http://rghost.ru/46648825
Чуть доработал и добавил счетчик постов.
Главная проблема в том, что это стиль нельзя использовать как самостоятельный.
>>fc
>добавил счетчик постов.
Который неправильно работал в мозилле. Поправил.
http://rghost.ru/46649150
>>fe
Bad news, он все равно неправильно работает из-за "27 постов и 4 файла пропущено ".
>>ff
Внутри треда считает нормально, а на доске только те посты, которые видны. Такая проблема вроде и у оригинального нейтрона была.
Сейчас посмотрю, можно ли поправить.
d81436e4c...439.gif, 219.7 KB, 752x256, ggl iq id3 |
Я таки-думаю, как правильно сделать опции, ибо между ними будут зависимости. Например, для neutron-ac.css сейчас необходим alterchan.css. Можно, конечно, добавить neutron-ac.css в alterchan.css и называть это neutron.css, но потом при обнаружении бага в alterchan.css надо будет исправлять этот баг также и в нейтроне. Для работы всплывающих окошек необходим jquery. С другой стороны, возможно для кого-то jquery будет лишним. И всплывающие окошки конфликтуют с хисторибоксом. Можно отрезать от alterchan.css позиционирование, а цвета и прочее вынести в alterchan-ac. Но человеку, который захочет что-то в опциях поменять, нужно будет вручную эти зависимости разрешать. Т.о. либо мы копируем код и потом при каждом баге переписываем все, что этот баг может затронуть, либо пишем код для удовлетворения зависимостей. И то, и то несколько геммороидально.
>>gX
Можно добавить alterchan.css в нейтрон с помощью @import, но это несколько костыльно и может сказаться на скорости.
http://rghost.ru/46724783
Поправил отображение чекбокса «к треду» в хроме, иногда съезжающий счетчик в мозилле и прокрутку в поле ввода текста. Плюс вытащил код из alterchan_index.css постаравшись очистить от всего, что neutron заменяет и слегка подкорректировав, так что теперь стиль можно использовать даже отключив стандартный css в настройках.
Дубль два.
>>oa
Охуенно, но есть пара нюяансов- куда-то пропал фон вокруг названия тега и номера поста, в результате чего они стали слабо отличимы. Ссылка на номер поста так же покрасилась в оранжевый. И еще- как сделать бордер постов более остроугольным?
>>on
http://rghost.ru/46746347
>куда-то пропал фон вокруг названия тега и номера поста, в результате чего они стали слабо отличимы
Вернул.
>Ссылка на номер поста так же покрасилась в оранжевый.
Так было задумано, ну да ладно. Перекрасил.
>И еще- как сделать бордер постов более остроугольным?
Изменить -moz-border-radius/-webkit-border-radius/border-radius в .subpost. Но зачем?
>>oq
Теперь все заебись. Спасибо. Я думаю этот тоже можно в опциях оставлять.
>>ou
Не растягивается форма ответа, раньше она влево-вправо растягивалась, теперь никак. Печаль-беда. Если возможно исправить- исправь пожалуйста. Желательно, что бы в обе стороны можно было растягивать.
>>pj
Теперь растягивается, но поле ответа по умолчанию на 1 пиксель больше полей выше. Не эстетично. В какой строчке это подправить? Кстати вообще все строчки поля ответа растянулись в ширь, как в стандартном альтерчан-стиле. Это плата за возможность растягивать поле ответа? В предыдущем варианте они были узкие, не устраивала только невозможность растягивать.
>>pl
Короче говоря как сузить поля Имя, мыло, тема и немного поле для сообщения?
>>pq
Только все заработало в мозилле, как в опере вообще все отвалилось. Чуть попозже разберусь тогда.
4a73dcf8c...91a.png, 34.93 KB, 1255x350, ggl iq id3 |
>>pr
Посмотри тогда еще пожалуйста глюки с полем "файл". Черные полосы какие-то странные в Firefox.
d8dde745e...9d2.png, 115.63 KB, 1463x1800, ggl iq id3 |
>>oq
>Но зачем?
Потому что старый-добрый flat chested стайл. Ъ. Мое мнение, полностью совпадающее с >>on.
>>qJ
Пик релейтед. У кусабы заголовки постов шли ровнее+регулярнее. Глаз цепляется за белый чекбокс перед заголовком. Тут они идут не так ровно из-за разного визуального размера сеРыХ КвАдРатоВ с номером поста. Может, с моноширинным шрифтом будет чуть получше, даже не знаю. Раньше вообще было жирное No. и заебись. В общем, в заголовках постов всё гораздо сильнее рябит и сливается (может, из-за счетчика сообщений еще, фича хорошая, но как-то же жил всё это время без него). Посты сильнее сливаются между собой.
Алсо, в глаза не бросается, но у иконок светлые пиксели по углам. Сейчас хотел поправить — иконки оказались с прозрачностью. Так что дело, видимо, в css-ке. Или очередные альфаканалопроблемы?
>>wT
Только сейчас заметил, что пикчи не разворачиваются до 100% размера. Это тоже через css вроде бы делается?
>>wV
Сам пожаловался — сам сделал..answers:before {
content: "Ответы:" !important;
font-size: 90%;
font-style: italic;
}
АльтЕФГ, ты можешь отодвинуть ответы в тредах немного отодвинутыми от левого края экрана? Уж очень убого выглядит, когда все посты прилипли к одному их краёв, а на другом пустота. Не зря же сайтики пытаются пилить так, чтобы текст был по центру.
Ну или если не хочешь/неможешь, то дай метод, как можно сделать силами СЫЫ или ссылку на руководство по сдвиганию.
Кстати, если у кого есть идеи как улучшить дефолтный стиль борды не меняя особо цветовую гамму — выкладывайте, буду благодарен.
altEFG
36ddeff3c...a15.png, 3.02 KB, 389x30, ggl iq id3 |
Было бы неплохо подгружать фавикон сайта не только на главную, но и на открытый во вкладке тред.
>>zH
> >вообще
> Быдло.
Быдло в квадрате. http://ozhegov.info/slovar/?ex=Y&q=%D0%92%D0%...%9E%D0%91%D0%A9%D0%95
23930ca0c...53b.png, 9.36 KB, 609x241, ggl iq id3 |
Черт, а ведь черная полоса никуда не делась. Ума не приложу, в чем дело. Через stylish все ок, а если через опции включать — появляется.
>>B7
Ты так часто меняешь стили?
>>B5
Все дело в том, что какой-то мудак решил, что высота input[type=file] должна зависеть от font-size. Я хотел исправить это быстро, но потом подумал, что раз никто не протестует против черных полос, значит это что-то у меня не в порядке. Неправильный фикс, например:td.post_file input
{
font-size:1.3em !important;
}
.post_file_inner_container
{
top: -3px !important;
}
>>B8
Нет, та жопа, где они сейчас находятся слишком не очевидна для тех, кто тут впервые.
22fa8f06c...fdd.png, 462.73 KB, 1600x1200, ggl iq id3 |
Ладно, коли Альткун не отвечает мне через емейл и скайп, осмелюсь вбросить свой высер.
NB: панелька не обязательно вертикальная, горизонтальная сверху тоже допустима. Алсо, масштаб и размер элементов не учтены.
b89c5289f...c8c.gif, 976.34 KB, 1000x750, ggl iq id3 |
>>Bf
Еще раз, это просто такая фантазия, может какие элементы дизайна придутся по душе и их можно будет попытаться запилить в движок. Готов сотрудничать на уровне прорисовки, я совсем дебил и кода не знаю. Хотя давно мог бы.
>>Bn
Поясни, серьёзных отличий кроме сайдпанели я не вижу. Тебе именно она не по нраву?
>>Bp
Ну, меня в принципе раздражает хуйня сбоку. Когда она вверху, внимания вообще не привлекает, а тут нате!
>>Bu
Так она же потом автоматически скрываться при скролинге, оставляя чистый незамутненный ничем интерфейс. Плюс ко всему тут масштаб другой, она должна тоньше в реале выглядеть, занимает не более 7% пространства. Попробую переделать под реалии борды.
Да, еще это вроде как небольшой референс к самым истокам, в кусабе был похожий список борд. Алсо, сделаю вариант с горизонтальным расположением. В идеале, если вдруг идея понравится и её можно будет реализовать, эту панель можно было бы ставить как в вертикальное, так и в горизонтальное положения, как сейчас, например.
>>BA
Это вроде как набирающий популярность элемент навигации на сайтах. Но опять же, я бы оставил выбор пользователю, который ему удобнее.
Сайдпанель хайдится же при скроллинге, ничего не будет мешать. Да и посты наконец-то отлипнут от края экрана.
Здорово было бы, если бы анон смог выбирать, какой режит отображения ему больше нравится.
>>CK
Только я что-то не пойму как ее исправить, т.к. там с цветами проблема. Позже еще попробую.
160e3cf32...8ee.png, 12.58 KB, 545x89, ggl iq id3 |
>>J4
>>wT
Я за пример брал нульчановский photon, там как раз таки есть закругления. Могу, конечно, убрать, если надо.
>моноширинным шрифтом
С моноширинным они как-то сильно выбиваются из общего стиля, на мой взгляд. Пикрилейтед.
>>wV
Так >>wX уже сам.
Добавил в css'ку. Ответить тоже заменил.
http://rghost.ru/46993416
59e2c4fcc...f43.png, 7.35 KB, 285x44, ggl iq id3 |
Плюс сейчас это очень удачно помогло мне обнаружить очередной баг у нейтрона в лисе. У .header надо min-width еще где-то на 20 пикселей увеличить, а то так и будет съезжать.
>>JA
Увеличил, однако, у меня и до этого ничего не съезжало. В общем, выкатывай финальную версию, как-то так.
>>Ji
>нульчановский photon, там как раз таки есть закругления
Закругления рамок постов? Сейчас нет и не помню, чтобы когда-то были. Но не принципиально, конечно, оба варианта хороши. И легко меняются по инструкции >>oq.
>С моноширинным они как-то сильно выбиваются из общего стиля
Согласен. Просто не нравится, как заголовки вразнобой идут. В кусабе они немного ровнее/читабельнее были. Как поправить — не знаю. Может, если вернутьx _ >вправо, оно красивее будет - только удобнее ли?
>Так >>wX уже сам.
Это я и был :3
>Добавил в css'ку.
Спасибо! Особенно за фикс белых точек.
content: "[Ответ]" не работает.
>>JL
>content: "[Ответ]" не работает.
В мозилле, да. Надо будет разбираться. В опере работает.
633b3920e...31f.jpg, 60.68 KB, 998x640, exif ggl iq id3 |
>>JO
Так. Сейчас поискал тредшоты — на части скругление есть, на части — нет. В photon.css есть-moz-border-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
В отладчике лисы все подсвечены серым. И нет простого "border-radius:". В хромогиуме скругление есть. А я всё думал, чем Нульчан мне в нём не нравится.
>на части скругление есть, на части — нет.
Они были давно, но долгое время не отображались в Опере, например.
>>JO
А, все. Проблема решилась обновлением браузера.
Теперь надо подумать над формой ответа и «[ Ответить ]», если только последнее не заменит сам админ.
http://rghost.ru/46996734
Убрал полоску в нейтроне. Плюс сделал форму ответа в том же стиле, что и у фотона.
Криворукий долбоеб в треде. Попытался перенести Quantum, с горем пополам удалось кое-как скопировать. По необъяснимой причине не работает счетчик постов.
http://rghost.ru/47763267
>>1D4
В опере все ок. А в других браузерах не рабоатет, потому чтоcounter-reset: postcount !important;
убрал из hr.
Поправь, пожалуйста, цвет шрифта у чекбокса «к треду», он остался голубым, как в нейтроне, и обводку у кнопок на верхней панели, а то она как-то совсем не смотрится.
>>1Dh
>В опере все ок. А в других браузерах не рабоатет, потому что
Уже разобрался добавил в body
>Поправь, пожалуйста, цвет шрифта у чекбокса «к треду»
Странно, в огнелисе шрифт серого цвета. Исправлю.
>и обводку у кнопок на верхней панели, а то она как-то совсем не смотрится.
Я так понимаю NSFW, Опции и тд?
6e9444def...2ed.png, 1.36 KB, 245x31, ggl iq id3 |
>>1Dj
>Странно, в огнелисе шрифт серого цвета. Исправлю.
<--
Я об этом цвете, если что.
>Я так понимаю NSFW, Опции и тд?
Они самые.
Есть ли возможность приподнять номер ответа, дату, и счетчик поста не трогая при этом кнопки?
Как, блджад, поменять вышеперечисленные элементы местами?
e144bc13e...439.png, 4.3 KB, 565x67, ggl iq id3 |
Кстати, о кнопках. Хорошо бы сделать отступ от границ хотя бы в пару пикселей, а то они чуть ли не липнут к краям.
ee5d1e45e...769.png, 40.71 KB, 1043x437, ggl iq id3 |
>>1DP
Это уже готово. Местами менять ничего не буду, но, ебаный в рот, как же поднять ебучий текст, не трогая кнопки?
>position: relative;
Позор на мою голову. Как мудак искал причину в конце. Благодарю.
http://rghost.ru/47781285
http://rghost.ru/47781762
Небольшой эстетический фикс. Теперь вроде все ахуенно.
e0c56bf21...f66.jpg, 358.56 KB, 667x1000, exif ggl iq id3 |
Повесил Quantum в опции. Слава Анонимусу - творящему.
>>1Em
Проснулся и заметил небольшой косяк. Полностью заливать еще раз не буду, просто допиши где-нибудь в конце.post_email {
position: relative;
bottom: 2px !important;
}
Ибо сажа съезжает.
0dd1d6232...69c.gif, 1021.23 KB, 300x300, ggl iq id3 |
Ги де Мопассаны, Quantum охуенен. Сижу под Quantum'ом с NSFW, глаза больше не болят!
После обновления во многих стилях поломались счетчики и заглавные буквы. Чтобы починить надо поменять «body.discussion .post_date:after» на «html.discussion .post_date:after» и куда-нибудь добавить.postform th, .postform button[type=submit], .adminbar_container button[type=submit] {
text-transform: capitalize !important;
}
Исправьте, пожалуйста.
e1a3ef117...cbb.jpg, 45.04 KB, 604x604, exif ggl iq id3 |
Как вы вообще сидите на этих нейтронах-квантумах? У меня от тёмного фона глаза болят, настроение портится, брат умер а отец — членодевка.
>>2wF
Если у тебя от тёмного фона болят глаза, значит ты делаешь что-то не так. У меня как раз болят глаза от светлого фона, т.к. он ярче.
Сижу на квантуме и слезать не собираюсь.
>>2wH
> как раз болят глаза от светлого фона
Как ты школу-то закончил, бедолага? Там ведь все книги со светлым фоном, это же страшно подумать!
>>2wH
Не могу представить, как у взрослого человека, выросшего на типографской продукции могли сформироваться такие вкусы.
1418fecf9...15e.jpg, 293.28 KB, 1280x1024, exif ggl iq id3 |
Могу еще предположить, что вам недоступно чувство радости от черной темы из-за того, что шелл операционки и тема браузера обе белые. Тогда белый ссаный цвет меню и адресной строки ебашит в глаза и рассмотреть темный фон и содержимое страницы действительно сложно. У меня же чёрная тема для шелла и супермегаохуенный NASA Night Launch Firefox Theme, который хорошо сочетается с белыми сайтами, и абсолютно превосходно - с тёмными.
https://addons.mozilla.org/ru/firefox/addon/nasa-night-launch/
Внесите небольшие изменения в квантум.post_email {
font-size: 13px !important;
}
.posts .subpost .header {
top: -1.4em;
}
.posts .subpost blockquote {
margin: -1em 5px 5px;
}
.answers a {
font-size: 80%;
}
822c6099b...69b.png, 552.17 KB, 900x643, exif ggl iq id3 |
В квантум
.post_email
{
font-size: 16px !important;
}