yoksel : ) (yoksel) wrote in journals_covers,
yoksel : )
yoksel
journals_covers

Category:

День седьмой: посты

Начну с ответов на вопросы радиослушателей.

1. Очень многие не поняли как красить ссылки в шапке и в заголовке (и в сайдбаре тоже).

Ключевое слово тут - ссылка. Если вам нужно покрасить пункты меню (а они являются ссылками) - обращайтесь к самим ссылками.

Как это правильно сделать?
Сначала нужно обратиться к блоку, ссылки в котором мы хотим покрасить, затем к ссылке:

colored link

Ссылка наследует цвет текста, задаваемый ссылкам, но игнорирует цвет, задаваемый обычному тексту.

Например, этот код задаст цвет текста на странице. Ссылки останутся синими.

body{
color:#000;
}


А вот этот код сделает все ссылки красными (если для них не определены другие стили):

a {
color: red;
}


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

В некоторых случаях, чтобы переопределить встроенные стили, требуется !important. Если и он не срабатывает - ищите ошибку в коде.

Так же напоминаю про возможные состояния ссылок:

a:link - обычная ссылка

a:visited - посещённая

a:hover - ссылка при наведении

a:active - при нажатии


2. Как поменять шрифт?

Очень просто: font-family: Arial;

После двоеточия задаётся семейство шрифтов.

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

Для выбора шрифта воспользуйтесь вот этой страницей: стандартные шрифты Windows или вот этим постом.

3. Украшательство журнала

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

Хочу напомнить две вещи:

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

Точно так же можно задавать фоны в любом месте журнала - в меню, в шапке, в постах - да где угодно! Экспериментируйте : )

2. Фоновую картинку можно двигать! Она может быть слева и справа, сверху и снизу (об этом было во втором уроке).

Так же можно задавать положение картинки в пикселях:

background-position: 0px 100px; - последовательность: отступ слева - отступ сверху. Отступов справа и снизу нет


Теперь к перейдём к теме поста: оформление записей в журнале.

Тема не простая и богатая, потому что блок записи включает в себя много чего интересного:
— заголовок
— дату
— текст записи
— юзерпик
— теги/настроение/местоположение/музыку
— ссылки на комменты и на управление записью

Все эти блоки можно оформлять по отдельности, задавать им разный цвет, разный шрифт и разный фон.

Блоки для разных групп:

Bloggish

.date-header - дата записей, отдельный блок снаружи постов, но внутри контейнера со всеми записями
div.entry - блок записи
div.entry-userpic - юзерпик
.entry-header - заголовок
a.subj-link - ссылка в заголовке
.entry-content
.entry-footer

Chameleon

.j-e - отдельный пост
.j-e-date - дата поста
.j-e-user - автор поста, внутри юзерпик и юзернейм
.j-e-title - тема поста, содержит ссылку
.j-e-text - текст поста
.j-e-meta - блок меток, настроения, местоположения и музыки
.j-e-nav - ссылки под постом
.j-e-nav-item - элемент списка ссылок, каждый также имеет собственный класс

Expressive/Mixit

.post-asset - блок с постом
div.asset-inner - внутренний блок
div.asset-header - блок с заголовком
h2.page-header2 - заголовок записи
h2.page-header2 a.subj-link - ссылка в заголовке
.asset-entry-date - блок в шапке, содержащий дату поста (раньше был просто .asset-meta)
.asset-entry-date li.item span - дата поста
div.asset-content - блок с содержимым
div.asset-body - внутренний блок с содержимым
div.user-icon - юзерпик
div.lj-currents - блок с настроением, местоположением, музыкой
span.entryMetadata-label - заголовок блока с lj-currents
div.asset-tags - блок с метками
div.asset-tags h4 - заголовок блока с метками
.asset-entry-links - блок со ссылками под постом (раньше тоже был просто .asset-meta)
ul.asset-meta-list - список ссылок под постом
.asset-meta-list .item - пункт списка с отдельной ссылкой
ul.asset-meta-list li a - ссылка в списке ссылок под постом
div.asset-footer - низ поста

Отдельные пункты меню под постом:

.item-read - читать комментарии
.item-reply - ответить
.item-edit_entry - редактировать запись
.item-edit_tags - редактировать метки
.item-mem_add - добавить в избранное
.item-share - поделиться
.item-watch_comments - подписаться на комментарии
.item-flag - пожаловаться на запись
.item-link - ссылка на пост

Примечание: полоски разделители между ссылками на комменты управляются так:

.asset-meta-list .item{
border-left: 1px solid blue;
}

blue - чтобы видно было как работает.
0px - убрать совсем

Flexible Squares

.subcontent - блок записи
.entry - текст записи
.userpic - юзерпик в ваших записях
.userpicfriends - юзерпик на странице френдов
.datesubject - блок с датой и заголовком
.date - дата
.subject - заголовок
.subject a - ссылка в заголовке
.currents - блок с настроением. музыкой и тд.
.currentlocation - местонахождение
.currentmood - настроение
.currentmusic - музыка
div.ljtags - метки
.comments - комментарии
div.comments a - ссылки на комментарии

Minimalism

div.entry-wrap - блок записи
dl.entry - внутренний блок записи
dt.entry-title - заголовок
dt.entry-title a.subj-link - ссылка в заголовке
dd.entry-text - текст записи
dl.author - автор
dd.entry-date дата
div .ljtags - метки записи
dd.entrymenu - ссылки на комменты
dd.entrysubmenu - ссылки на упраление записью

В этой группе стилей у ссылок под постом есть персональные классы:

li.comments - ссылка на запись с комментариями
li.postcomment - ссылка на добавления комментария
li.edit_entry - редактировать запись
li.edit_tags - редактировать метки
li.mem_add - добавить в избранное
li.tell_friend - рассказать друзьям
li.watch_comments - отслеживать комментарии к записи

Внимание! в этой группе стилей строение постов может немного различаться, спрашивайте если что-то не получается

Smooth Sailing

.entryHolder - блок записи
.entryUserinfo - блок с юзерпиком
.entryUserinfo-usericon - юзерпик
.entryHeader - блок с заголовоком
.entryHeaderSubject - заголовок
.entryHeaderSubject a - ссылка в заголовке
.entryText - текст записи
.entryMetadata - блок с настроением, музыкой, метками
.entryMetadata ul - список в блоке метаданных
.entryMetadata li - пункт списка в блоке мета
.entryMetadata-label - заголовок в блоке мета
.entryLinkbar - блок ссылок под постом
.entryLinkbar ul - список ссылок под постом
.entryLinkbar li - пункт с отдельной ссылкой
.entryLinkbar li a - отдельная ссылка

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

Пример: двигаем: .entry-header, красим: .entry-header a.subj-link.


Напоминаю: спрашивайте, если что-то непонятно или что-то не получается.
Обязательно давайте ссылку на журнал где тестите

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


Навигация по урокам
Назад День 1. Поиск картинок
День 2. Стиль и фон
День 3. Ширина журнала
День 4. Фон ленты
День 5. Шапка журнала
День 6. Сайдбар
День 7. Посты
День 8. Страницы комментариев
День 9. Метки и календарь
День 10. Хозяйке на заметку
 Вперёд

Tags: useful: уроки по оформлению ЖЖ, ЖЖ-дизайн за 10 дней
Subscribe
promo journals_covers august 1, 2013 11:15 62
Buy for 200 tokens
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 1216 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →