el_murid (el_murid) wrote,
el_murid
el_murid

Область поста

Часть IV - Основной макет. Подложка

Рабочий макет http://tastytheme.livejournal.com

Основной фон  

Здесь как раз рассмотрим пример применения нескольких фоновых изображений и их позиционирования на фоне поста. Кто-то может использовать имитацию загнутых уголков бумажного листа, заливать фоном тетрадной страницы и прочие прелести. Кому как нравиться. Итак, берем несколько подготовленных изображений и позиционируем их в нужных местах.




background:url(http://pics.livejournal.com/tastytheme/pic/00038506) 95% 0% no-repeat,
Ставим изображение с прозрачным фоном, в правый верхний угол и запрещаем повторение - no-repeat

url(http://pics.livejournal.com/tastytheme/pic/0002sgrt) 0% 0% repeat-x, 
Заливаем верхнюю часть для фона заголовка поста, позиционируя изображение по верхней границе, с координатами 0% 0%  с параметром повтора изображения по оси Х -  repeat-x

url(http://pics.livejournal.com/tastytheme/pic/00031tk3)0% 100% repeat-x,
Изображение для нижней части, аналогично верхней, с координатами выравнивания по нижней границе - 0% 100%

url(http://pics.livejournal.com/tastytheme/pic/00032tt1)2% 99% no-repeat, #e4e7e7;
Ставим кляксы и позиционируем в левом нижнем углу - 2% 99%, в самом конце добавляя цвет для заливки фона поста - #e4e7e7



Список классов контейнера поста



Общий контейнер поста  .entryHolder

Загрузив контейнер изображениями и расставив их на места, задаем объектам следующие параметры.
Указываем цвет шрифта - color: #4D4D4D; 
Расстояние между строк, если стандартное не устраивает - line-height: 18px; 
Если нужно - другой шрифт и размер, нейтрализуем верхнюю рамку - border-top: 0px solid transparent; 
Указываем внешние отступы между постами - margin: 10px 0px 30px 0px; 
Задаем внутренний отступ от краев контейнера для шрифта - padding: 0px 20px 10px 20px; 
Создаем прозрачную тень для внешней рамки поста в формате RGBa - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); где первые три значения означают черный цвет и четвертое - 0.3 - степень прозрачности.
Скругляем углы - border-radius: 5px;

.entryHolder {
background:url(http://pics.livejournal.com/tastytheme/pic/00038506)95% 0% no-repeat,
url(http://pics.livejournal.com/tastytheme/pic/00031tk3)0% 100% repeat-x,
url(http://pics.livejournal.com/tastytheme/pic/0002sgrt)0% 0% repeat-x, 
url(http://pics.livejournal.com/tastytheme/pic/00032tt1)2% 99% no-repeat, #e4e7e7;
color: #4D4D4D;
line-height: 18px;
font-family: ;
font-size: 12px;
border-top: 0px solid transparent;
margin: 10px 0px 30px 0px;
padding: 0px 20px 10px 20px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Указываем всему тексту макета внутренний отступ свеху и снизу в 20 пикселей:

.entryText {
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
padding-bottom: 20px;
}

Заголовок поста - класс .entryHeader

Задаем прозрачный фон, высоту, внутренний и внешний отступ.

.entryHeader {
background-color: transparent;
height: 80px;
padding: 0px;
}
Дата поста - класс .entryHeaderDate
Заливаем фон изображением - background:url(http://pics.livejournal.com/tastytheme/pic/00031tk3);
Параметром - display: block; - отцепляем его с насиженного места.
Выравниваем текст по центру - text-align: center;
Скругляем нижние углы - border-radius: 0 0 4px 4px; 
Делаем фон полупрозрачным - opacity: 0.7;
Даем тонкую рамку тени, вдавленную внутрь - box-shadow: 0px 0px 1px 0px #FFF inset;
Текст так же вдавливаем в фон - color: #333; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.898);

.entryHeaderDate {
display: block;
text-align: center;
font-family: ;
font-size: 10px;
color: #333; 
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.898);
padding: 4px 6px 6px 6px;
background:url(http://pics.livejournal.com/tastytheme/pic/00031tk3);
-moz-border-radius: 0 0 4px 4px; 
-webkit-border-radius: 0 0 4px 4px; 
border-radius: 0 0 4px 4px; 
-webkit-box-shadow: 0px 0px 1px 0px #FFF inset; 
-moz-box-shadow: 0px 0px 1px 0px #FFF inset; 
box-shadow: 0px 0px 1px 0px #FFF inset;
opacity: 0.7;
}

Текст заголовка
Здесь он состоит из двух классов .entryHeaderSubject и .subj-link
В .entryHeaderSubject подставлен дефис из РНР кода, который мне нужно убрать в заголовке. Поэтому я его скрываю параметром - visibility: hidden; Но в этом случае пропадает и текст заголовка в классе -.subj-link Тогда я ему указываю явно параметр - visibility: visible; Если какой то объект не изменяет своего свойства, то пытаемся применить к нему директиву - !important

.entryHeaderSubject {
display: block;
position: relative;
top: 20px;
font-family: "Georgia", Times New Roman, Times, serif;
font-weight: normal;
font-size: 24px;
color: #333;
visibility: hidden;
}
.entryHeaderSubject A:hover{
text-decoration: none;
color: #A5A5A5 !important;
}
.subj-link{
color: #888888 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
visibility: visible;
}

Здесть подобраны параметры для однострочного заголовка, которые придется корректировать, если заголовок будет состоять из двух строк.


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

.adv{
margin: 0px 0px 30px 0px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Область тэгов - класс .entryMetadata
Подставляем иконку тэга, рисуем кнопки появляющиеся по наведению мыши на тэг.



.entryMetadata {
padding-left: 0px;
}
.entryMetadata ul {
margin: 0px;
padding-left: 0px;
}
.entryMetadata li {
list-style: none;
display: inline;
padding-right: 10px;
}
.entryMetadata li a:hover{
display: inline;
text-decoration: none;
text-shadow: 0px 0px #000;
}
.entryMetadata a:hover{
padding: 4px 8px 4px 8px;
border-radius: 4px;
border: 2px solid #666;
background-color: #CCFF66;
color: #424242;
opacity: 0.5;
}
.entryMetadata-label {
font-weight: bold;
font-size: 12px;
color: #323232;
padding: 10px 8px 8px 20px;
margin: 0px 10px 10px 0px;
background-image: url("http://pics.livejournal.com/tastytheme/pic/0000yx84");
background-position: left;
background-repeat: no-repeat;
background-color: none; /* Такой параметр не существует, здесь он ненужен. Это описка.*/
}

Подвал поста - класс .entryLinkbar
Аналогичо как и в классе - .entryMetadata, рисуем кнопки появляющиеся по наведению мыши.


.entryLinkbar {
font-family: ;
font-size: 10px;
color: #eeeeee;
text-align: right;
padding: 2px 6px 4px 6px;
margin-top: 32px;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
opacity: 0.5;
text-shadow: 1px 1px #FFFFFF;
}
.entryLinkbar li a:hover{
display: inline;
text-decoration: none;
text-shadow: 1px 1px #000;
}
.entryLinkbar a:hover{
padding: 4px 8px 4px 8px;
border-radius: 4px;
border: 2px solid #CCFF66;
background-color: #424242;
color: #CCFF66;
}

Цвет ссылок макета

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

a {
color: #333;
}
a:visited {
color: #333;
}



Далее - Комментарии и их формы



Subscribe

Recent Posts from This Journal

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

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

  • Пауэлл

    Колин Пауэлл, бывший госсекретарь США, скончался в возрасте 84 лет. Называется стандартная причина - от ковида. Правда, в 84 года умереть можно от…

  • Закрытие представительства

    Россия с 1 ноября приостанавливает работу своего представительства при НАТО. Об этом сообщил министр Лавров. Дело, конечно, житейское. Вот только не…

  • 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 

  • 0 comments