Обложки для журналов
от Yoksel

Дизайны для ЖЖ

Как узнать класс и стили нужного элемента?

Меня часто просят помочь с редактированием дизайна журналов. Причем во многих случаях помощь нужна только с тем как обратиться к нужному элементу - просто узнать какой у него класс или Id.

На самом деле это очень просто сделать с плагинами или инструментами, которые уже встроены в браузер.

Начну с хрома. В нем есть встроенный веб-инспектор и ничего дополнительно ставить не нужно.

Правой кнопкой мыши щёлкаем над нужным элементом и видим выпадающее меню:



Жмём "Проверить элемент" ("Inspect Element") и видим такое:



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

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

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

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

Для Firefox есть аддон Firebug. Работает аналогично, только его нужно специально установить.





В выпадающем меню также есть пункт "Исследовать элемент" - это встроенный инспектор Firefox, который, в принципе, делает то же самое. Можете попробовать оба инструмента и выбрать что вам удобнее.

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

Попробуйте, это удобно : )


Вступите в сообщество, чтобы увидеть все дизайны
yoksel еще раз здравствуйте. В этом журнале(http://ibigdan.livejournal.com/), какой стиль использован, "Friendstimes"? Или он просто приделал всплывающие вкладки к другому стилю? Что бы сделать такую же фоновую рекламу как в этом журнале, нужно в слоях разбираться?
И еще по поводу кода элемента. Допустим я хочу поставить себе такую же иконку количества комментариев, как показано у вас выше на скрине. Жму: Просмотр кода элемента - в левой части выбираю нужную строку - копирую весь код который указан в правой колонке, и вставляю себе в ксс, верно?
Стиль тот же, реклама вставлена через слой.

> Допустим я хочу поставить себе такую же иконку количества комментариев, как показано у вас выше на скрине. Жму: Просмотр кода элемента - в левой части выбираю нужную строку - копирую весь код который указан в правой колонке, и вставляю себе в ксс, верно?

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

Способ сработает только если вы найдете таким образом системные стили своей темы и переопределите их в Custom Css
Добрый день!

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

Что у меня может быть настроено неправильно?
Добрый день.
Вы не подскажете, в жж можно использовать псевдокласс :before?
Хочу использовать его для добавления иконок через иконочный шрифт с помощью content.

А то я пробую, и не работает.
:before можно использовать без проблем. Вы можете добавить в псевдоклас букву или картинку и проверить, что оно появилось на странице

проблема может возникнуть при использовании обратного слеша (\) в content - ЖЖ такое не ест, в этом случае можно использовать обычные буквы или символы
доброе утро!
Юлия, подскажите. пожалуйста. как уменьшить в сайдбаре ширину блока с календарем в моем дизайне (дефолтный, air)? чтобы ширина календаря заканчивалась там, где заканчивается пятница (т.е. меньше на 2 столбца календаря по ширине)

Edited at 2014-11-24 02:27 (UTC)
Добрый день! Пытаюсь поменять стиль на http://journals-covers.livejournal.com/87022.html
но меняется всё, кроме картинок и фона - т.е. две основные картинки отсутствуют... пробовала другие дизайны - та же проблема.
Я что-то делаю не так? Или это жж теперь не разрешает рукоблудничать?
Вопрос по дополнениям
Уважаемая Йоксель!
Спасибо за Ваши труды огромные я уже высказала где только можно. Но у меня есть сразу три просьбы - если вдруг у Вас будет время мне помочь.
Вот мой дневник: http://tanya-karenina.livejournal.com/
Очень хочется внести следующие изменения (если поможете прямо кодом, будет супер-супер!):
1. Плашку "Предыдущий пост -следующий пост" перенести под шапку и поместить её на фон ленты (а то совсем не видно)
2. В шаблоне нет возможности регулировать цвет и размер подзаголовка - от этого он крохотный и подслеповатый. Можно как-то на это повлиять?...
3. Можно ли в шапку вставить картинку? Как, куда? И как в этом случае можно поменять цвет букв в заголовке?

Буду очень благодарна за ответы:)

Re: Вопрос по дополнениям
1. Листалка скрыта, нужно просто включить её отображение. Найдите блок с селектором ..lj-view-recent div.stream-header и удалите там display: none.

Затем добавьте для него стили:

.stream-header {
background-image: url(http://www.lenagold.ru/fon/kam/metalpl/metallic122.jpg);
background-position: center center;
background-repeat: repeat;
margin: 0 0 30px 0 !important;
padding: 16px;
border-radius: 3px;
}

p.prevnext {
padding: 15px 0px;
background-color: #f5f7fa;
margin: 0;
}


2. Да, используйте селектор .header-description.

2, 3. Собственно, в посте выше вы можете узнать как определить класс и стили любого элемента на странице. Как писать стили, менять фоны и текст можно узнать из этой серии постов: http://journals-covers.livejournal.com/78018.html
Спасибо! Не раз заглядывала в "Исследовать / проверить элемент" в Мозиле и Гугл Хроме (и сейчас ещё Firebug скачала для Мозилы), но не приходило в голову, влезая в CSS-код (в правой колонке) собственноручно менять свойства элементов – оказывается можно! )))))
?

Log in

No account? Create an account