Liorto Сообщение 04/09/2012 15:53 Копия темы
Другой цвет значков на верхнем баре После дизайнерских нововведений на фри-лансе в блогах тут же появился css-код, который рыжую полосу вверху делает светлой. Воспользовалась с удовольствием,  но возникла другая проблема – трудно заметить белый значок нового письма в личку. В итоге поменяла и цвет значков. Для тех, кому тоже нравится белая полоса, но не нравятся плохо видимые значки, предлагаю небольшой тутор.
 
Итак, что нам понадобится:

    Для Огнелиса — установить плагин Stylish  (addons.mozilla.org/ru/fir..., для Оперы — открыть папку C:\Program Files\Opera\styles и найти файл css, в котором прописана белая (светлая) полоса. Вроде как для Гугл Хром тоже есть свой Stylish, но в нем я, увы, не разбираюсь.
    Фотошоп, желательно английский, ибо в русском меню я не сильна, скрины на английском.
    Сайт www.dailycoding.com/Utils...
    Файл из приложения. 

Файл из приложения открываем в Фотошопе, затем выбираем инструмент Rectangular Marquee Tool.

С его помощью делаем выделение вокруг белых значков.

Открываем меню Image – Adjustments – Hue/Saturation.

В открывшемся окошке первым делом ставим галочку на Colorize.  И двигаем ползунки, пока не получим нужный цвет. Пример на скриншоте.

Когда нужный цвет выбран, сохраняем файл на компьютере, расширение оставляем png.
Теперь идем на сайт www.dailycoding.com/Utils...

Нажимаем «Обзор» и указываем путь к сохраненному файлу. Жмем Covert to Base 64. Внизу появляется окошко с гигантским кодом. Если окошко не появляется, повторяем операцию – сайт порой подглючивает.
Этот код можно перенести в блокнот, можно пока просто не закрывать страницу.

Для Огнелиса теперь нужно создать стиль в Stylish’e. Открываем страничку фри-ланса. Внизу слева кликаем на значок Stylish. Жмем Создать новый стиль – Для free-lance.ru. В открывшемся окошке в названии прописываем любое название.
В поле для кода вводим следующее:
.b-bar__icon { 
    background-image: url("data:image/png;base64,КОД") !important;
    float: left; 
}

На место слова КОД вставляем тот самый гигантский код, который получили на сайте.
Для Оперы то же самое вставляем в файл css.

Вроде всё. 

P.S.: поскольку скрины разместить в тексте не получается, прилагаю еще вордовский файл.

bikers-boy Сообщение 04/09/2012 16:18 Копия темы
А что это за иконка "А"?? У меня такой нет :/

qxfusion Сообщение 04/09/2012 16:50 Копия темы
Это сделал сам фри-ланс.ру st.free-lance.ru/css/bloc... отсюда и буква А

kudesnik-name Сообщение 04/09/2012 18:27 Копия темы
В примере кода есть ошибка, вот правильный вариант:
background-image: url("data:image/png;base64,КОД") !important; 
то есть не хватало закрывающих кавычек и скобки.

Вот что у меня получилось

Liorto Сообщение 04/09/2012 18:38 Копия темы
Да, спасибо большое, что заметили! Поправила. Вообще при переносе текста в редактор на сайте перекорежило все напрочь :( Большинство моментов поправила, а самое главное и не углядела.

kudesnik-name Сообщение 04/09/2012 18:45 Копия темы
!important; должен идти после скобок

djcrazy Сообщение 05/09/2012 05:54 Копия темы
копирайтер учит верстке и фотошопу народ! 
Где это видано, где это слыхано папа решает а Вася сдает! ©

правильно вот так:
.b-bar__icon { 
    background-image: url("data:image/png;base64,КОД") !important;
    float: left; 
}
не путайте людей, пожалуйста.

Liorto Сообщение 05/09/2012 07:15 Копия темы
Эм... здесь, вроде, не ресурс верстальщиков. И я не учу – я пытаюсь помочь именно тем, кто к верстальщикам не относится и от всего этого далек. Более того – я не только копирайтер, представьте себе. И если у меня на этом ресурсе в данное время стоит такая специализация, это не значит, что копирайтинг – единственное, что я умею и чем могу заниматься.