Немного о кодах на примере живого дизайна
В предыдущем посте я рассказывала, как ставить фон в блоге, не прибегая к сложностям в виде специальных кодов. Сейчас попробуем пройти дальше - как именно кодами установить в понравившемся шаблоне фон и верхнюю картинку? Тем более, что многие шаблоны не предусматривают простой установки того же фона - там просто нет опции "Стиль". Как это обойти и все же внести в оформление журнала что-то свое, индивидуальное? Это не так сложно, как кажется.
Объясню на примере нынешнего оформления журнала, который сейчас выглядит вот так:
Изначальный шаблон называется Eid Gold Expressive Winter от Tiffany Chow и выглядит вот так:
Дизайн делается за несколько шагов:
1. Устанавливается шаблон (повторюсь, сейчас рассматривается непосредственно Eid Gold Expressive Winter от Tiffany Chow) Замечание: если вам не нравится коричневатый цвет в заголовках постов, то обратите внимание вообще на семейство шаблонов Expressive Winter, там есть вариации с разными цветами, например, если взять соседний Eid Blue, то там заголовки будут в синей гамме... Можно установить и его, система стиля не изменится, ведь это одно и то же семейство.
2. Справа сверху, где находится маленькая картинка установленного шаблона, нажимаем на "Настройте свой стиль":
3. В открывшемся окне находим слева опцию "Custom CSS", жмем на нее и вставляем в окно специальный код, вот так:
Сохраняем. И получаем именно такой вид блога, какой сейчас установлен в сообществе.
Теперь разберём, что у нас указано в коде и как что можно менять "под себя"?
Повторюсь, все просто.
Код в целостном виде "звучит " так:
body{
background-color: #fff;
background-image: url('http://pics.livejournal.com/j_u_l_i_a_i/pic/0010qesk');
background-repeat: repeat;
background-position: top center;
background-attachment: fixed;
}
#header {
height: 280px;
width: 942px;
background-image: url('http://pics.livejournal.com/j_u_l_i_a_i/pic/0011273q');
background-repeat: repeat;
background-position: top center;
background-attachment: scroll;
margin-left: -1px;
margin-right: 1px;
}
.comment-odd{
background-color: #FFFAF0;
}
.comment-even{
background-color: #FFEBCD;
}
#header-description, #header-name a, #header .nav a {
color: #663300;
}
/*----TOPMENU----*/
ul.nav{
background-color: #fff;
width: 942px;
height: 35px;
left: 0px;
top: 270px;
text-align: center;
position: absolute;
}
.nav .item{
padding:0px;
left: 0px;
text-align: left;
padding: 0% 3% 0% 3%;
border: 0px solid #ccc;
display:inline;
float:none;
margin: 0px 5px 0px 5px;
}
div#header-name{
margin:0px;
top: 0px;
position: absolute;
text-align: center;
display: none;
}
div#header-description{
display: none;
}
div.stream-header{
margin-bottom:0px;
}
.lj-view-recent div.stream-header,
.lj-view-friends div.stream-header{
margin-bottom:0px;
display: none;
}
.prevnext,
.skiplinks{
padding-left:0px !important;
text-align: center;
color: #777;
padding: 0px 0px 0px 0px;
}
p.prevnext{
padding-left:5px !important;
}
div.stream-header p.prevnext{}
p.prevnext a,
.skiplinks a{
font-weight:normal;
text-decoration:underline;
}
div.prevnext{
text-align: left;
padding: 0px 0px 0px 0px;
}
div.prevnext table{
margin:0px 15px 0px 15px;}
Что есть что?
Первый абзац отвечает за фон блога. Замените http://pics.livejournal.com/j_u_l_i_a_i/pic/0010qesk на адрес картинки, которую вы хотели бы видеть фоном в своем индивидуальном варианте. Помните, что адрес должен вести именно и только к картинке - без каких-либо других элементов на ее странице. Картинка для фона должна быть большой (если это обои) и хорошей по качеству. У меня в данном случае стоит повторяемый элемент для фона, взятый с сайта "Ленаголд". Слово "repeat" в коде как раз отвечает за повторяемость этого элемента. Без этого картинка была бы просто одна, маленькая, на фон она не потянула бы. Элементы margin-left: -1px; margin-right: 1px; я установила чисто ради равновесия расположения именно этой картинки, они не обязательны, их можно в своем варианте вообще убрать из кода.
Второй абзац устанавливает верхнюю картинку, ее положение и размеры. Адрес моей картинки - с арками и полями - вот: http://pics.livejournal.com/j_u_l_i_a_i/pic/0011273q Вы, само собой, можете заменить ее на свою. Требования явные: вытянутость формы :) Если вы установите свою картинку, и она окажется шире или короче, чем надо, это не страшно. Размеры моей верхней картинки - (высота) height: 280px; (длина/ширина) width: 942px. Соответственно, размеры вашей картины могу быть другими. Прикиньте, где сколько пикселей не хватает или наоборот, многовато - это видно по тому, выходит ли картинка за пределы поля с постами или не дотягивает до них. И смело экспериментируйте, меняя цифры 280 и 942. Сохраняйте установки, смотрите на произошедшие в блоге изменения и корректируйте цифры до получения окончательного радующего результата.
Вот так примерно и получается всё...
Объясню на примере нынешнего оформления журнала, который сейчас выглядит вот так:
Изначальный шаблон называется Eid Gold Expressive Winter от Tiffany Chow и выглядит вот так:
Дизайн делается за несколько шагов:
1. Устанавливается шаблон (повторюсь, сейчас рассматривается непосредственно Eid Gold Expressive Winter от Tiffany Chow) Замечание: если вам не нравится коричневатый цвет в заголовках постов, то обратите внимание вообще на семейство шаблонов Expressive Winter, там есть вариации с разными цветами, например, если взять соседний Eid Blue, то там заголовки будут в синей гамме... Можно установить и его, система стиля не изменится, ведь это одно и то же семейство.
2. Справа сверху, где находится маленькая картинка установленного шаблона, нажимаем на "Настройте свой стиль":
3. В открывшемся окне находим слева опцию "Custom CSS", жмем на нее и вставляем в окно специальный код, вот так:
Сохраняем. И получаем именно такой вид блога, какой сейчас установлен в сообществе.
Теперь разберём, что у нас указано в коде и как что можно менять "под себя"?
Повторюсь, все просто.
Код в целостном виде "звучит " так:
body{
background-color: #fff;
background-image: url('http://pics.livejournal.com/j_u_l_i_a_i/pic/0010qesk');
background-repeat: repeat;
background-position: top center;
background-attachment: fixed;
}
#header {
height: 280px;
width: 942px;
background-image: url('http://pics.livejournal.com/j_u_l_i_a_i/pic/0011273q');
background-repeat: repeat;
background-position: top center;
background-attachment: scroll;
margin-left: -1px;
margin-right: 1px;
}
.comment-odd{
background-color: #FFFAF0;
}
.comment-even{
background-color: #FFEBCD;
}
#header-description, #header-name a, #header .nav a {
color: #663300;
}
/*----TOPMENU----*/
ul.nav{
background-color: #fff;
width: 942px;
height: 35px;
left: 0px;
top: 270px;
text-align: center;
position: absolute;
}
.nav .item{
padding:0px;
left: 0px;
text-align: left;
padding: 0% 3% 0% 3%;
border: 0px solid #ccc;
display:inline;
float:none;
margin: 0px 5px 0px 5px;
}
div#header-name{
margin:0px;
top: 0px;
position: absolute;
text-align: center;
display: none;
}
div#header-description{
display: none;
}
div.stream-header{
margin-bottom:0px;
}
.lj-view-recent div.stream-header,
.lj-view-friends div.stream-header{
margin-bottom:0px;
display: none;
}
.prevnext,
.skiplinks{
padding-left:0px !important;
text-align: center;
color: #777;
padding: 0px 0px 0px 0px;
}
p.prevnext{
padding-left:5px !important;
}
div.stream-header p.prevnext{}
p.prevnext a,
.skiplinks a{
font-weight:normal;
text-decoration:underline;
}
div.prevnext{
text-align: left;
padding: 0px 0px 0px 0px;
}
div.prevnext table{
margin:0px 15px 0px 15px;}
Что есть что?
Первый абзац отвечает за фон блога. Замените http://pics.livejournal.com/j_u_l_i_a_i/pic/0010qesk на адрес картинки, которую вы хотели бы видеть фоном в своем индивидуальном варианте. Помните, что адрес должен вести именно и только к картинке - без каких-либо других элементов на ее странице. Картинка для фона должна быть большой (если это обои) и хорошей по качеству. У меня в данном случае стоит повторяемый элемент для фона, взятый с сайта "Ленаголд". Слово "repeat" в коде как раз отвечает за повторяемость этого элемента. Без этого картинка была бы просто одна, маленькая, на фон она не потянула бы. Элементы margin-left: -1px; margin-right: 1px; я установила чисто ради равновесия расположения именно этой картинки, они не обязательны, их можно в своем варианте вообще убрать из кода.
Второй абзац устанавливает верхнюю картинку, ее положение и размеры. Адрес моей картинки - с арками и полями - вот: http://pics.livejournal.com/j_u_l_i_a_i/pic/0011273q Вы, само собой, можете заменить ее на свою. Требования явные: вытянутость формы :) Если вы установите свою картинку, и она окажется шире или короче, чем надо, это не страшно. Размеры моей верхней картинки - (высота) height: 280px; (длина/ширина) width: 942px. Соответственно, размеры вашей картины могу быть другими. Прикиньте, где сколько пикселей не хватает или наоборот, многовато - это видно по тому, выходит ли картинка за пределы поля с постами или не дотягивает до них. И смело экспериментируйте, меняя цифры 280 и 942. Сохраняйте установки, смотрите на произошедшие в блоге изменения и корректируйте цифры до получения окончательного радующего результата.
Вот так примерно и получается всё...