el_murid (el_murid) wrote,
el_murid
el_murid

Categories:

Инспектор объектов. Делаем баннер

Часть I - Дизайн в ЖЖ. Вводная. Адаптивный дизайн 
Часть III - Анимированое меню

Еще раз повторюсь. Смысл постов в том, что не все дизайнеры. Люди зачастую пользуются ужасным дизайном просто потому, что у них нет выбора. Собственно для того и создана возможность применения своего уникального дизайна к теме. Да и для разработчиков нет смысла особо стараться. Главное что написан функционал. Каждый имеет возможность все переделать для себя. Вскрытие особых секретов не подразумевается. Камрады дизайнеры могут спокойно проходить мимо.

Теперь будем выпрямлять вот эту кракозябру.



Рассмотрим тему, созданную для всеобщего пользования. Рабочий пример http://tastytheme.livejournal.com/



В ходе ковыряния в Опере, да и чтобы особо не заморачиваться, я ее назвал Dragonfly  и создал ей логотип. :))) Далее совершенно отвлеченно порыбачил в сети на предмет графики. Вот что нарыбачил.

     

Фотошоп для меня обычное дело, поэтому я немного покреативил и создал баннер и логотип. Листочки какао остались у меня от прошлого дизайна http://six.strings4guitar.com/ Там все заброшено из за ненужности. Функционал темы устарел и под новой версией Вордпресс перестал работать. Я их просто адаптировал к новой идее.





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

Начнем с рассмотрения основных объектов макета. Подготавливаем себе открытое окно, для помещения туда CSS
кода. Заходим в своем аккоунте в раздел меню - Журнал ->Стиль журнала. Справа вверху -> Настройте свой стиль. Слева выбираем вкладку Custom CSS.  Справа выбираем опцию - Use layout's stylesheet(s) - в значение - YES.







В пустом окне Custom Stylesheet собираемся немного пошаманить. Открываем дополнительную вкладку с адресом своего журнала для мониторинга результата. Я открываю в Opera. 

Основная схема макета (Делаем баннер)

Наводим курсор мыши на заголовок и правой кнопкой вызываем меню. Выбираем - Inspect element. Загружается инспектор объектов и мы видим такую картину. Сверху помеченный нами объект. По левой стороне содержимое кода страницы. Справа CSS код объекта.





Здесь мы видим внутри класса <div class="pageblock"> - </div><!--pageblock--> заключены все остальные нужные нам объекты, которые состоят из 4-х основных классов, включающих в себя содержимое страницы.

+<div class="pageblock">
+<div class="pageheaderblock">
<!--pageheaderblock-->
<div class="bodyheaderblock">
+<div class="bodyblock">
<!--bodyblock-->
+<div class="pagefooterblock">
</div>
<!--pageblock-->

Наступаем мышом на плюсик и разворачиваем содержимое класса "pageheaderblock" и останавливаемся на классе "header-title"

.
Справа в окне инспектора видим CSS параметры класса "header-title"

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

Внимание

Заявленные элементы в коде вашей темы необходимо нейтрализовывать, либо модифицировать объявлением им нового параметра. Если в коде темы допустим написано:

.entry-holder {
border-top: 2px solid #ddd;
}

Обязательно переписать эти заявленные параметры, иначе они будут болтаться на странице:

.entry-holder {
border-top: 0px solid #ddd;
}

Таким образом нейтрализируем ненужную нам верхнюю рамку объекта, установкой значения параметра в 0.

Либо делаем из нее простроченую линию в 1 или более пикселей со своими параметрами:

border-top: 1px dashed #000000;


Меняем баннер 

Подготавливаем изображение для себя. Заливаем его к себе в галерею и даем ссылку на него. Профиль-Загрузка картинок. Загружаем картинку и жмем на нее несколько раз, пока она не откроется в пустом окне без оформления галереи. Ссылка должна выглядеть примерно так: http://pics.livejournal.com/жжпользователь/pic/0000dta9 

Код баннера. .header-title 

 Если название класса объекта .header-title отлично от вашей темы, определяете методом тыка в инспекторе.

.header-title {
font-family: ; оставляем по умолчанию, если в коде темы этого параметра нет, значит он не нужен
font-size: 0px; скрываем стандартный заголовок с названием аккаунта
color: #fcfcfcf; цвет шрифта необязательно переименовывать, так как высота его равна нулю
background: url (http://pics.livejournal.com/tastytheme/pic/000378y9) 50%  50%  no-repeat, #484848; height: 150px; адрес баннера, центрирование относительно страницы, запрет на повторение, цвет подложки, высота области картинки

.header-title {
font-family: ;
font-size: 0px;
color: #fcfcfc;
background:url(http://pics.livejournal.com/tastytheme/pic/000378y9) 50% 50% no-repeat, #484848;
height: 150px;
}

В итоге, должны получить баннер отсюда http://tastytheme.livejournal.com/  Затем меняем на свой.

Если у вас та же тема, можно просто копировать код в окно и затем подставить адрес ссылки на изображение.
Смотрим чтобы метод копипаста не принесс собой лишних символов. Синтаксис должен быть в сохранности. Иначе вся тема или ее часть свалятся. Если что то не работает, значит в коде ошибка. По ходу работы, у вас создастся более 1000 строк кода. Поэтому советую использовать Notepad++ и копировать код туда, запоминая удачные параметры в файл .css. В CSS окне ЖЖ крайне утомительно работать, оно узкое и после рефреша страницы очень трудно найти то место, на котором остановился.

Второй способ создания баннера - это когда он состоит из нескольких объектов. Этот способ применен к фону самого поста, который мы рассмотрим в главе, посвященной области поста. Здесь просто меняем координаты объектов на нужные нам. Основная подложка отцентрирована параметрами 50% 50%, второй объект двигаем в нужную вам сторону изменяя значение в процентах.

.header-title {
font-family: ;
font-size: 0px;
color: #fcfcfc;
height: 150px;
background:url(http://pics.livejournal.com/tastytheme/pic/000378y9) 50% 50% no-repeat; основная подложка
url(http://pics.livejournal.com/tastytheme/pic/000378y9) 10% 80% no-repeat; картинка с прозрачным фоном
# 424242; цвет заливки фона
}


Проверяйте синтаксис. Косяки в нашей жизни - обыденное дело.

Далее будем разбирать способ применения дизайна к меню.


Subscribe

Recent Posts from This Journal

  • Мир больше пяти

    Заявление Эрдогана о том, что мир «больше пяти» и «горстка» стран-победителей не могут диктовать миру свою волю —…

  • В моменте

    Если взять официальную статистику (при всем скептическом отношении е ней другой все равно нет), то "в моменте" Россия обладает долей в…

  • Принуждение vs убеждение

    Что достаточно удивительно в непрекращающемя терроре с целью заставить людей вакцинироваться — так это почти полный отказ от метода убеждения в…

  • Post a new comment

    Error

    Comments allowed for friends only

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 11 comments

Recent Posts from This Journal

  • Мир больше пяти

    Заявление Эрдогана о том, что мир «больше пяти» и «горстка» стран-победителей не могут диктовать миру свою волю —…

  • В моменте

    Если взять официальную статистику (при всем скептическом отношении е ней другой все равно нет), то "в моменте" Россия обладает долей в…

  • Принуждение vs убеждение

    Что достаточно удивительно в непрекращающемя терроре с целью заставить людей вакцинироваться — так это почти полный отказ от метода убеждения в…