CSS для @дневников: элементы дизайна

Материал из Справка @diary.ru.

Перейти к: навигация, поиск
Авторы статьи: Roldo и Рёцке

Содержание

[править] Вводная часть

Прежде, чем читать эту статью, ознакомьтесь со статьей CSS для @дневников: вводная часть.


[править] Основной блок

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

Во-первых, body. Это само «тело» страницы – ее основное поле, она сама. На ней расположены все остальные объекты. И шрифты с цветами, которые вы прописываете стандартными средствами оформления дневника (без CSS) выполняются именно для body. Т.е., если вы ставите для тела фон черного цвета, то этот фон будет как бы для всего дневника в целом, остальные элементы будут расположены на этом фоне.

Body имеет различные селекторы для разных страниц дневника - главной, комментариев, избранного и т.п. - селектор #Journal для главной страницы и классы:

.left – когда меню располагается слева от постов
.right – меню справа.
.journal_list
.block_design – если дизайн блочный

Эти классы не обязательно используются на странице, поэтому в начале работы лучше их не трогать.

Другие элементы представляют собой таблицы и блоки. Что есть таблица (блок) – это прямоугольник заданной ширины и высоты, имеющий свойства и внутри которого можно размещать другие элементы и/или блоки, текст, фон, картинки.

#wrapper – основной элемент дизайна – общий блок, на котором (внутри которого) расположены все остальные. Другие элементы позиционируются и процентируются относительно этого, являясь дочерними.
#page-c – блок, на котором фактически размещаются сообщения дневника. Он служит главным блоком записей.
#page-t – блок, дочерний к page-c, на нем размещаются посты. Находясь внутри page-c, этот блок перемещается и меняется одновременно с родительским, поэтому если вы хотите использовать возможности обоих блоков, то прописывайте для page-t отдельные свойства.
#side – блок меню. На нем находятся, во-первых, название дневника (ссылка на его адрес), фотография и логин пользователя, а во-вторых – ссылки на элементы меню (Мой дневник, Настройки и т.п.) и баннер статистики от li.ru.
#extratop – отключенный по умолчанию элемент, который расположен над блоками page-c и side, но внутри wrapper’а. Основное его предназначение – это «шапка» страницы, в которой можно разместить картинку или вынести пункты меню.
#extrabottom – отключенный по умолчанию элемент, который расположен ниже блоков записи и меню, но также внутри блока wrapper. Это таблица, у которой можно задать фон в виде картинки, дополнив свой дизайн нижним «основанием».
#epigraph – это эпиграф дневника.
#post0 – это содержание эпиграфа, оно находится внутри #epigraph’а

[править] Элементы меню

Элементы меню (#side) - это фактически это всё ссылки, но для каждого элемента можно прописать отдельные свойства.

[править] Элементы колонки меню

Группировки элементов:

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

#thisDiaryLinks – поле ссылок на чужой дневник (Избранное автора, Цитатник автора, Ссылки автора и т.д.)[br]
#myDiaryLinks – поле ссылок на ваш дневник (Мой дневник, Новая запись, U-mail и т.д.)
#YaSearch - Поиск по дневнику
#thisDiaryOwner – поле ссылок, относящихся к автору (Написать на Умайл, поднять в списке)
#globalLinks – поле глобальных ссылок (Главная страница, Каталог сообществ, Случайный дневник)
#myLinks – поле «Мои ссылки»
#Stats – поле, где расположен баннер статистики от li.ru
#pchs – поле постоянных читателей (если отображаете его через Опции)
#lastComments – поле последних комментариев (если отображаете)

Сами элементы:

#authorFav - Избранное автора
#authorQuot - Цитатник автора
#authorLiks - Ссылки автора
#authorAlbum - Альбом автора
#authorRSS - RSS автора
#writeToAuthor - Написать на U-mail
#subscribeEmail - Подписаться на дневник
#unsubscribeEmail - Отписаться от дневника
#addToFav - Добавить в избранное
#delFromFav - Удалить из избранного
#postsCalendar - Календарь записей
#albumLink - Альбом
#rssLink - RSS
#joinThisComunity - Вступить в сообщество
#writeThisComunity - Написать в сообщество
#comunityFav - Избранное сообщества
#leaveThisComunity - Покинуть сообщество
#headlineList - Список заголовков
#tagslistlink - Темы записей
#myDiaryLink - Мой дневник
#writeThisDiary - Новая запись
#myDraftLink - Черновики
#umailLink - U-mail
#myFavLink - Избранное
#myQuotLink - Цитатник
#discussionLink - Дискуссии
#myLinksLink - Мои ссылки
#myProfileLink - Мой профиль
#optionsLink - Настройки
#photolibLink - Библиотека изображений
#upInChart - Поднять в списке
#allDiaryLink - Все дневники
#mainpageLink - Главная страница
#favListLink - Список избранных
#pchListLink - Список ПЧ
#communityCatalogueLink - Каталог сообществ
#myCommunitiesLink - Мои сообщества
#myCommunityLink - Моe сообществo
#randomDiaryLink - Случайный дневник
#diarySpiritLink - @дневники: изнутри
#diarySupportLink - Техподдержка
#paySupportLink - Техподдержка платных
#faqLink - FAQ
#iAmQuit - Выход
#Stats - Моя статистика
#comments - Комментарии +
#subscribe - Подписаться
#unsubscribe - Отписаться
#addToQuote - Добавить в цитатник
#quote_post - написать у себя (это под записью)
#quote_comment - написать у себя
#prevPostLink - предыдущая запись
#nextPostLink - следующая запись
#urlLink - URL
#sortOrder - кнопка Сортировать записи
.editPostLink - кнопка "Редактировать запись/эпиграф/коммент"
.delPostLink - кнопка "Удалить запись/коммент"
#myDraftLink - Черновик
#thisDiaryPhoto - Фото владельца дневника

[править] Цитата

Цитата прописывается классом span.quote_text, для которого также можно задать свойства стандартными методами. Если вы хотите оформить цитаты, сделанные в постах или комментариях, несколько иначе, чем обычный наклонный текст, то воспользуйтесь этим классом: span.quote_text {свойства}

[править] Оффтопик

Оффтопик прописывается классом .eot.

[править] Другие элементы

Перейдем к описанию более сложных элементов.

#div_img – Тег отображения картинок, которые вы выкладываете в постах. ( ..)
#div_img:hover – Оформление картинок, когда курсор мыши находится на ними.
#authorName – Имя (логин) автора, располагается изначально под фотографией.
#side h1 A – ссылка на ваш дневник, располагается над фотографией и отображает название дневника.
#topNav – для табличного дизайна это поле, где размещаются ссылки «Главная», «Все дневники», «Случайный дневник» и т.д. наверху страницы. Альтернативное меню.
#topNavLinks – сами ссылки в этом поле.
div.clear – этот служебный класс используется для разделения постов и других элементов между собой. Располагается под всеми постами и эпиграфом и в случае чего с ним можно поиграться, но осторожно)
#thisDiaryInfo – Блок, в котором располагается название дневника, фотография и имя автора, то есть #side h1 A, #thisDiaryPhoto и #authorName
#postsArea – блок внутри page-t, в котором располагаются посты. К этому блоку применяется класс .bordered. Собственно, что есть .bordered? Это класс, который применяется к нескольким элементам страницы – меню и постам. Описывает он область, внутри которой меню и посты находятся, поэтому, изменяя его свойства, вы влияете на отображение и того и другого.
.order_button – класс описания области над постами, где располагаются кнопки сортировки. Используется для div (div.header order_button)
#sortOrder – описывает область, в которой находятся кнопки сортировки записей. Эта область совсем небольшая и находится прямо вокруг самих кнопок.
#sortFromBegin – кнопка сортировки записей в порядке следования
#sortFromEnd – кнопка сортировки записей в обратном порядке
#sortFromLastComment – кнопка сортировки по последним комментариям.
.singlePost – класс, описывающий стиль для одиночного поста в вашем дневнике. Сверху – заголовок, в середине текст записи, внизу ссылки на URL, комментарии, цитатник и подписку на пост.
.countFirst и .countSecond – классы, применяемые для оформления постов «через раз». По умолчанию, если взглянуть на ваши записи, то видно что цвета записей немного различаются – то один цвет, то другой поочередно. Так вот, это реализовано через данные классы – одному посту дается один класс, следующему – второй, потом снова первый и так далее.
.first – класс, описывающий последний сделанный вами пост.
.countFirstDate, .countSecondDate, .postDate, .uline – классы, относящиеся к описанию поля, где расположена дата написания поста.
.header – класс описания заголовка постов и эпиграфа.
.postTitle – класс описания заголовка поста.
.commentAuthor – описывает блок информации о человеке, оставившем комментарий к записи. Этот блок содержит:
.avatar – класс описания аватара.
.sign – класс описания подписи под аватаром.
#commentsArea – блок комментариев к записи. Открывается, когда вы нажимаете на «комментировать» и содержит, естественно, комментарии.
.postContent – класс описания содержимого поста (его текста и прочего)
.postInner – содержимое поста.
.paragraph – текстовое содержимое поста. Все эти классы описывают содержимое записи, но .postContent применяется для общего описания, а .paragraph – уже для самого конкретизированного.
.atMusic – описывает поле @Музыка
.atMood – описывает поле @Настроение.
.atTag – описывает поле @Темы

[править] Элементы поста

Предыдущая запись - .prevPostLink
Следующая запись - .nextPostLink
u-mail - .umail
E-mail - .email
Дневник - .diary
Профиль - .profile
Добавить в цитатник - .addToQuote
Подписаться - .subscribe
Комментарии - .comments
Написать у себя - .quote_post
.postLinksBackg – Класс описания блока ссылок внизу поста (комментировать, подписаться и т.п.)
.postLinks – описание ссылок Комментировать, Подписаться и В цитатник.
.urlLink – описание ссылки на URL.
#pageBar и класс .pageBar описывают блок под всеми постами, где расположены ссылки на страницы дневника (номера страниц, «следующая» и т.п.)
.pages_str – описывает ссылки на предыдущую и следующую страницы.


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

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

[править] Продолжение

Продолжение темы - в статье CSS для @дневников: основные методы работы.

[править] См. также


Адрес этой страницы:

http://info.diary.ru/index.php?title=CSS_для_@дневников:_элементы_дизайна
Личные инструменты