LINUX.ORG.RU

Css


41

1

Всего сообщений: 9

Мрачный ЛОР

Всегда хотел написать себе мягко-темный стиль к ЛОРу, но все, что получалось до этого, было слишком темным, либо слишком светлым. В итоге я все-таки его дописал.

Откровенно говоря, качество кода отвратительное, но поделка для личного пользования, потому я не парюсь. Если кто хочет допиливать для себя, берите.

Что тут имеется:

  • Самопальный CSS. Его основная задача — перекрасить ЛОР, сформировать костяк панели слева и выставить пользовательские шрифты.
  • Самопальный обвес из нескольких скриптом на JS — один из них выставляет иконки на панель, а остальные — простой костыль для подсветки активного раздела форума, чтобы с логикой скриптов не заморачиваться. Пример одного из скриптов лежит в репозитории.
  • LOR Tree View. Большое спасибо за оживление TikName, но в скрипте все еще оставались мелкие косяки навроде отсутствующих точек с запятой, которые я пофиксил. Обозначения уровней дерева в скрипте нет, это сделано стилем.
  • LORCode Tools. В принципе, я уж и не знаю, кому «спасибо» за них говорить, так что скажу таковое Eddy_Em.
  • lorify. Автоматически обновляет страницу. Ну, это и есть его основное предназначение, не считая показа комментов выше по наведению.

Используемые шрифты на скриншоте — FontAwesome и Segoe UI, браузер, как видно, Google Chrome.

Скриншоты:

По системе сказать нечего, обыкновенная Windows.

>>> Репозиторий со стилем

>>> Просмотр (1920x1080, 164 Kb)

 ,

DeadEye
()

Фиксированный заголовок для ЛОРа - 2

Доработанный стиль для LOR (кроме Firefox, нигде больше не проверял) с заполнением по ширине окна, плавающим боковым блоком на главной, нормализованным размером шрифтов, убранными тегами из трекера.
Ничего не перекрывается, как в прошлый раз (ответы, навигация в шапках тем).

На скриншоте вариация стиля для оформления Numix, браузер с расширением Classic Theme Restorer.

>>> CSS со скриншота

>>> LOR-Fixed_Tango для Stylish на userstyles.org

>>> Просмотр (1920x1080, 422 Kb)

 , ,

amorpher
()

Готично-минималистичный ЛОР

Или как я ресурс с помощью user-css и user-js под себя кастомизмровал

body{background-color: black;font-family: monospace;}
h1{font-size: 16px;}
input{background-color: #222;color:#CCC;font-size:12px;border: 1px #CCC solid;}
textarea{background-color: #222;color:#CCC;font-size:12px;}

/* Нинужно! */
.head img{display:none;}
.infoblock-small{display:none;}
.message-table th{display: none;}
#ft{display: none;}
#related-topics{display:none;}
.nav{display:none;}
.numbers{display:none;}
.social-buttons{display:none;}
.fav-buttons{display:none;}
#interpage-adv{display:none;}

/*Красим табличку сообщений в чорный*/
table.message-table{background-color: black;}
.message-table td{background-color: #000;border-bottom:1px #222 solid;font-size: 14px;font-family: monospace;}

/* Убираем авы */
.photo{display: none;}    
/* Кастомим кнопки */
.btn{font-size: 12px;padding: 3px;}

/*Красим сообщения*/
.msg-container{background-color: black;}
.msg-container .msg_body{padding: 10px;}
.messages .msg{background-color: black;border:1px #444 solid;}
.messages .msg .title{background-color: #222;}

/* Теги в списке тем*/
.tag{color: #666;float: right;font-size: 10px;}    

/* Красим исходники */
.code pre{color: #666;font-size: 12px;background-color: #222;padding: 10px;border-top: 1px #AAA dashed;border-bottom: 1px #AAA dashed;}
$(document).ready(function(){
    // Убираем закреплённые темы
    $('.icon-pin-color').parent().parent().css('display','none');
});

>>> Просмотр (1279x1850, 396 Kb)

 

r_asian
()

Юзерстиль «Ночной лор»

Купил я, значит, сегодня новенький монитор LG 23EA63V-P, а мой любимый black смотрится на нём не очень приятно. Наверное, в силу 16:9. Пришлось запилить небольшой юзерстиль поверх моего LOR Classic, дабы жилось несколько проще. Выглядит ещё не идеально, но уже вполне прилично. Как вам?

>>> Просмотр (1899x1840, 174 Kb)

 ,

Sadler
()

Space LOR style

Кто там заказывал космическую тему?

Сам стиль: http://paste.org/43729

Changelog:

  • Космический фон.
  • Линейной расположение блоков шапки.
  • Drop-down меню навигации.
  • Изменена цветовая гамма.
  • Заменены картинки звезд.
  • Цитаты выделяются сильнее.
  • Два варианта фона (см. стиль)

Заточено под 1280 по ширине.

Еще скрины:
http://img683.imageshack.us/img683/6066/14012012134049.png
http://img17.imageshack.us/img17/1926/14012012134129.png
http://img580.imageshack.us/img580/2915/14012012134153.png
http://img696.imageshack.us/img696/2222/14012012134221.png

sudo cast f00fc7c8
sudo cast Zhbert

P.S. Думаю, что лучше создать в Talks топик «User-styles» и закрепить его так я не буду надоедать здесь (если кому-то надоел).
P.P.S. Фон может в первый раз подгружаться с десяток секунд. Потом будет браться из кеша.

>>> Просмотр (1280x800, 876 Kb)

 ,

AlexCones
()

Oxygen LOR style

Кто там заказывал Oxygen-style для ЛОРа? Получайте.

Changelog:

  • Стиль блоков - KDE Oxygen.
  • Изменен порядок header-блоков.
  • Убрана вырвиглазная картинка разлогина с сохранением ссылки.
  • Символы у RSS и фильтров.
  • Убраны счетчики.
  • Заменены изображения «звезд» на более KDE-шные (работает в firefox).
  • Ссылки в сообщениях без подчеркивания, появляется при наведении.
  • Большие скобки на странице «форум». Также работают например на странице «Добавить скриншот» и на страницах сообщений со списками. Код пафосен.

Рекламу оставил, ибо обрезайте адблоком.

sudo cast carasin
sudo cast sumrak_ss

Сам стиль: http://paste.org/43644

Примечание: контролы будут родными под KDE, у меня на скринах - в соответствии с моей системной темой.

Примечание 2: заточено под 1280 по ширине, ибо негде было тестить на других разрешениях. Все будут рады, если кто-то в проценты перебьет.

>>> Просмотр (2560x1600, 502 Kb)

 ,

AlexCones
()

Стиль для lorquotes

Может кому-то понравится.

Сам стиль: http://paste.org/43346

Размер по ширине заточен под 1280px, если кому-то нужно, может заточить под себя, там лишь заменить пару цифр.

Основные изменения:

  • Измененная цветовая гамма.
  • Фиксированное меню слева.
  • Анимация при наведении на пункт меню.
  • Выделение Re:-заголовков и цитат в виде блоков.
  • Выделение ссылки при наведении.
  • Убрана прямая ссылка на цитату (если кто догадается, как её можно стилизовать - сообщите, это самые последние свойства в стиле).
  • Убрана шапка сайта.

>>> Просмотр (1280x1600, 173 Kb)

 ,

AlexCones
()

Пилю CSS

Понравился стиль сайта KDE, решил сделать аналогичный для LOR :)
Надеюсь, скоро доделаю.
(K)ubuntu 10.04, KDE 4.5.1, иконки faenza for KDE, chromium, kate, всё работает быстро благодаря твикам и графической подсистеме Qt raster.
PNG без окон:
http://www.bild.me/bild.php?file=2080644KDE2.png
С окнами:
http://www.bild.me/bild.php?file=8893893KDE.png

>>> Просмотр (1280x1024, 175 Kb)

 ,

LonghornLinux
()

Пилим стиль

Будущее темы white стало каким-то мутным, и я решил перенести свою cssку на tango. На скриншоте она уже почти готова, осталось перекрасить

 да причесать код.

Заодно хочу узнать, можно ли обрезать текст средствами css, который находится в блоке с display:inline? Не нравится длинный текст первой ссылки в навигации, а другого перехода на главную нету.

>>> Просмотр (1280x800, 148 Kb)

 , , ,

mydoom
()