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

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

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

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

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

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

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



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



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

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

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

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

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





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

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

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


Вступите в сообщество, чтобы увидеть все дизайны
промо journals_covers август 1, 2013 11:15 64
Разместить за 200 жетонов
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
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://yoksel.ru/i/dises/warm_leaves/header.jpg. Если так отобразится, то и в дизайне должна сработать.
?

Log in