Твикаем интернеты

[tartan]

После того, как на компьютере уже настроено всё, что можно, загребущие лапы твикера тянутся к интернетам, точнее, к часто посещаемым ресурсам, чтобы их оформление совпадало с темой gtk.

В случае с движком нашего форума (и многих других форумов по всем интернетам) всё довольно просто: css прекрасно комментирован, открываем style.css в gedit, открываем страницу в фоксе, открываем стайлиш и ваяем - с тех пор, как я в последний раз им пользовался, он научился применять изменения css на лету.

Вот что получается:

[kostryukov]

приятная тема

[gengzu]

отвратительно

[tartan]

Аж до судорог в пальцах, как я погляжу.

Спасибо, гггг.

[LoggerUA]

Вот это ужасы 
Я бы себе такого не хотел однозначно!

[fuss]

Класс! Сам давно пользовался стайлишем. Но многие страницы все равно отвратно смотрятся

[tartan]

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

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

[fuss]

Большим минусом в таких твиках остается наличие на страничах флеша/логотипов/изображения. Если делать страницу под себя - единственный выход все не нужное или не подходящее к оформлению вырезать(

[VeryStupid]

Что такое стайшл? Тоже хочу

[Panic! At the Kernel]

Плугин для фуррифокса

[tartan]

Большим минусом в таких твиках остается наличие на страничах флеша/логотипов/изображения.

На ЛОРе сказали, что можно добавить свои картинки либо в виде ссылки file:///, либо в виде uri прямо в теле style.css, как раз это и хочу проверить.

Цитата
Что такое стайшл? Тоже хочу

https://addons.mozilla.org/en-US/firefox/addon/2108/ - стайлиш

http://userstyles.org/help/coding - краткий мануал по написанию стилей

От себя добавлю, что лучше всего открывать css сайта в каком-нибудь gedit (я обычно для этого открываю firebug).

[ende_neu]

>либо в виде ссылки file:///, либо в виде uri прямо в теле style.css,

Ввиде данных в формате url, чтоб не зависело от наличия внешних картинок. http://ru.wikipedia.org/wiki/Data:_URL ,такое в самом стаилешевском редакторе вставляется.


А форум меня вполне устраивает и в стандартном виде.(^_^)

[tartan]

>либо в виде ссылки file:///, либо в виде uri прямо в теле style.css,

Ввиде данных в формате url, чтоб не зависело от наличия внешних картинок. http://ru.wikipedia.org

Ага, мне на ЛОРе подсказали уже, я спрашивал. Десяток картинок - и стайл будет совершенно неприличной длины. А при смене темы придётся перегенерировать все URI. Хотя можно картинки сделать отдельным стайлом. В общем я посмотрю, что лучше будет.

[fuss]

Что-то я не понял. Заменятся будет вся графики на странице на нужный мне\указаный мной файлик?

[ende_neu]

Почему все.Те что указаны в стиле.
Т.е вот пример (вырезал кусок из стиля для Гугля. /* */ -комментарии, они не читаются)

(Нажмите, чтобы показать/скрыть)

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix(http://www.google), /* для каких сайтов это применять */
               url-prefix(https://www.google),
               url-prefix(http://maps.google),
               url-prefix(http://images.google),
               url-prefix(http://blogsearch.google),
               url-prefix(http://video.google),
               url-prefix(http://news.google),
               url-prefix(http://books.google),
               url-prefix(http://scholar.google),
               url-prefix(http://picasaweb.google),
               url-prefix(http://sites.google),
               domain(mail.google.com),
               domain("gmodules.com"), domain("googlepages.com")
           
{

/* Google logo */
img[src*="scholar_logo_lg"],img[src*="ps_logo_lg.gif"],img[src*="logos/"], img[src$="logo.gif"], div[style*="logo_plain2.png"], div[style*="logo1w.png"], div[style*="logo_plain.png"], img[src$="logo_google_suggest.gif"], img[src^="logos/holiday"], img[src^="/intl/"][alt="Google"][title="Google"]/* что менять */ {
   margin-top: 6% !important; /* отступ сверху */
        margin-left: 6% !important; /* отступ слева */
   width: 0 !important; /* прочие параметры размеров */
   height: 103px !important;
   padding-left: 281px !important;
   background-image: url("data:image/png;base64,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") !important; /* все эти буквы- на самом деле картинка для замены (^_^) */ }

}

Да, тут виден недостаток-"неприличная длина".Зато видно и достоинство-переносимость.Просто текст, содержащий всё необходимое , без всяких внешних файликов-картинок.