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

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

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

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

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. Хозяйке на заметку
 Вперёд

Вступите в сообщество, чтобы увидеть все дизайны
чего-то ворочу, ворочу, сама не понимаю, чего...
Хуже всего что то, что получается - получается как-то неосознанно...
Хотела сделать разделитель-бусики между постами, а они сунулись сплошняком почему-то. Убрала. Вот что вышло пока http://gostika.livejournal.com/
Спасибо за уроки, все доступно и понятно.
Один только вопросик возник.
Как сделать закругленные углы у постов и в сайдбаре в "тянущемся" стиле.
У меня Smooth sailing.
Это будет довольно сложнопостановочная конструкция : ) Но можно.

Сначала сделайте 6 картинок.

1. так как сайдбар не тянется, для него нужно две картинки: верх и низ с круглыми уголками, каждая картинка шириной с сайдбар, фон как у сайдбара

верхние уголки сделайте фоном .sideboxTitle, нижние - блоку .sidebox

2. потребуется 4 картинки с уголками для поста. Что с ними делать напишу если с сайдбаром разберётесь

По поводу картинок: на них должны быть закруглённые углы. То что оказывается за уголком - красите в цвет фона. Никакой прозрачности быть не должно
Re: для Clean/Simple? пожалуйста
Конечно, там совершенно другое строение

th.headerbar - дата
td.metabar - время
.entry - пост
.subject - заголовок
.subject a - ссылка в заголовке
p.comments - блок ссылок на комментарии
p.comments a - ссылки на комментарии
пропустила вчерашний урок, пока сижу ковыряюсь в нем. Но сразу вопрос (чувствую себя тупой) - так и не поняла, как подвинуть блоки, чтобы убрать пробел между хэдером и остальной частью. Плюс там же у меня какая-то белая полоска осталась, тоже не понимаю, от какого элемента она. Help!
http://odd-molly.livejournal.com
В принципе, я добилась почти всего, чего хотела. Можно и украшательством заняться. Но не могу справиться с проблемкой одной http://community.livejournal.com/vikka93/:

.post-asset{
border:1px solid red;
padding:0px;
width:770px !important;
margin-bottom:20px !important;
padding:15px !important;
padding-bottom:20px !important;
background-color:white;
background-repeat: no-repeat;
background-position: left bottom;
}

div.asset-inner{
margin-bottom:0px !important;
border:3px solid blue !important;
}

Как мне придвинуть ленту впритык влево. А то получается правый край обрезанный, а я буду делать тоненькие рамочки, которые тоже будут образаны справа и не видны.
> 1.Не удается окрасить шрифт названия блока «Теги»

Каким кодом вы это делаете?

> 2.Не получается отключить класс .designed-widget

тот же вопрос

> 3.Белая полоса и белая подложка… Что с ними делать?

было в теме про фоны

#page {
background-color: transparent;
}
#content-inner {
background-image: none !important;
}

> 4.Не понимаю, как сделать так, чтобы содержание поста не обтекало юзерпик.

проще всего - поставить его справа с помощью float:right
думала оставить вовпрос на попозже, но не терпиться :)

пыталась сделать для юзерпика рамку с помощью border. рамочка-то получилась, но во френдленте случился казус:
div.entry-userpic сделал рамку для всего блока, а во френдленте в него входят ники и названия сообществ. так вот с постами для сообществ получается некрасиво - картинка прилеплена с правом верхнем углу рамки, а из-за большого текста сама рамочка растягивается. можно с этим как-то бороться?..
Хитровыдуманные шрифты
Важно! в веб можно использовать только системные шрифты, то есть те шрифты, которые есть на компьютере большинства пользователей. Если у вас установлен красивый рукописный шрифт и вы использовали его в дизайне журнала, этот шрифт увидите только вы, у всех остальных шрифт будет обычным.
Вопрос: мы загоняем код в поле Custom CSS. А если мы будем создавать отдельно свой файл CSS для его последующей загрузки на сервер и использования (так вроде можно?), то можно ли встроить шрифт в этот файл, чтобы он отображался, загружаясь из этого самого файла CSS, который будет висеть не у меня на компе, а у lj где-то на сервере и соответственно, шрифт оттуда будет виден любому пользователю?
Я от вас отстаю:и начала позже и не получалось ничего сначала...Решила,что и правда без помощи никак :(Хочу блок с постами подвинуть вправо-никак.Когда меняла первое значение-влево он двигался.Что я делаю не так?
http://www.livejournal.com/customize/options.bml?group=customcss
Я создала другое сообщество, чтобы Вам были видны посты.

http://community.livejournal.com/prodiza/

Только начала делать сегодняшний урок и сразу столкнулась с проблемой: Между первым и вторым постом большой отступ, а дальше по странице такого нет. В чём тут дело?
*к предыдущему посту*
Конфликт явно где-то между этими двумя блоками :((

h2.page-header2{
border:1px solid black;
width: 698px;
height:30px;
font-size:22px;
font-weight: normal;
text-align: center;
position: absolute;
display:block;
float: left;
}

}
div.asset-header li.item span{
border:1px solid blue;
width: 140px !important;
height:16px !important;
font-size:12px;
font-weight: normal;
color: #009933;
text-align: center;
margin-left: 528px !important;
margin: 33px 0px 0px 0px;
display: block;
float: right;
position: absolute-right;
}
отчитываюсь, что выходит: http://valiamaya.livejournal.com/
1 Не получается выстроить метки блоком
2 Убрать нижнюю темно-серую полоску
3 Закрепить фон неподвижно, чтоб он не прокручивался вместе с записями.
4 Видно ли мои картинки на фоне и заголовке, у них было разрешение _orig ( это с яндекс фоток)?
Помогите пожалуйста!
Еще раз спасибо за ваши уроки!
--
У меня снова вопрос.
Вот мой ЖЖ http://be-may.livejournal.com/
Надпись "Previous 20" я специально подогнала так, чтобы она оказалась между руками.
Все замечательно, но когда потом открываешь пост, например вот этот http://be-may.livejournal.com/91665.html все опять "сбивается".
Не пойму, где мне теперь поправить?

апдэйт
Нашла как победить эту проблему
Путем замены
вот этого кода

p.prevnext{
text-align:center;
font-size: 13px;
margin-left:-240px;
margin-top:-35px;
margin-bottom:-11px;

на вот этот
p.prevnext{
position:relative;
text-align:center;
font-size: 13px;
margin-left:-240px;
margin-top:-36px;
}

.stream-header {
display: none;
}
все более менее становится нормально, но тогда в журнале пропадает верхний блок "Previous 20".

Нельзя ли сделать так, чтоб не надо было убирать верхний блок?
/*не знаю.. понятно ли объяснила*/
?

Log in

No account? Create an account