Демиург со стажем
Краткий справочник по созданию СSS
Шаблоны формы страницы.
Будет дополняться. Читать все!Читайте пометки между звездочками, т.е. *текст* - это мои комментарии, их из кода нужно будет удалить при установке.
Шаблон №2
Меню можно поставить справа в стандартных настройках.
Читайте пометки между звездочками, т.е. *текст* - это мои комментарии, их из кода нужно будет удалить при установке.
Шаблоны формы страницы.
Меню можно сделать справа - в стандартных настройках
Как будет выглядеть
Будет дополняться. Читать все!Читайте пометки между звездочками, т.е. *текст* - это мои комментарии, их из кода нужно будет удалить при установке.
Шаблон №2
Меню можно поставить справа в стандартных настройках.
Как это будет выглядеть
Читайте пометки между звездочками, т.е. *текст* - это мои комментарии, их из кода нужно будет удалить при установке.
ДОПОЛНЕНИЯ
Шаблон3
Шаблон дизайна с выпадающим меню вверху экстратопа.
Вот и все.
ПС: Если вы хотите оставить меню под экстратопом и просто залить промежуток между ним и блоком записей, залейте враппер.
#wrapper {background:#цвет !important}
Вся страница. Для нее обычно задают фон.
Код таков:
Разберем по частям:
а) background: url('АДРЕС КАРТИНКИ')
Здесь вам нужно только вставить ссылку на картинку, которая у вас будет на фоне. Куда вставлять? туда, где написано «адрес картинки».
repeat
Это часть означает, будет ли повторяться ваша картинка, растягиваться на весь фон или нет.
repeat - картинка будет дублироваться и вправо и влево (по горизонтали и вертикали) на всю ширину фона
no-repeat - фоновое изображение без его повторений
repeat-x - фоновый рисунок повторяется только по горизонтали
repeat-y - фоновый рисунок повторяется только по вертикали
background-position: 50% 0;
Это задает положение вашей картинки на странице - справа, слева, по центру и тд.
Варианты (в каждой строчке по 3 кода через знак «=», это значит, что они одинаковы, вставлять нужно любой, а не всю строчку! В скобках положение):
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
background-attachment:fixed;
Этот код значит, что ваш фон завиксирован и двигаться не будет при прокрутке странице.
Если вы не хотите фиксированный фон - просто удалите эту часть.
padding:0px
padding устанавливает значение полей вокруг содержимого элемента. 0 означает отсутствие отступов.
Генератов кода для фоновой картинки - diarycss.narod.ru/bg/
#WRAPPER - это контейнер, в котором и располагается ваш дневник со всеми частями: меню, блок записей, экстратоп, экстработтом. Именно ему задается ширина вашего будущего дневника.
Для фиксированный шинины дизайна код таков:
Разберем по частям:
min-width:ЧИСЛОpx !important;
Устанавливает минимальную ширину элемента. Если окно браузера достигаетзаданной минимальной ширины элемента, то его ширина остается неизменнойи появляется горизонтальная полоса прокрутки.
ЧИСЛО нужно заменить на ту ширину, которую вы ставите для своего дневника. Обычно это значение и сделующее в коде равны, не стоит изобретать велосипед.
width:ЧИСЛОpx;
Устанавливает ширину поля для вашего дневника - узкий, широкий - любой, на ваш вкус.
Только имейте в виду, что у многих разрешение экрана 1024 в ширину, поэтому советую ставить не больше 980px.
margin:0 auto !important; padding:0 !important;
margin устанавливает величину отступа от каждого края элемента, padding устанавливает значение полей вокруг содержимого элемента. Оставляйте эту часть без измений.
#SIDE и #PAGE-C
#side - меню в вашем дневнике
#page-c - непосредственно та часть, на которой располагаются ваши записи.
Указывая ширину #wrapper, эти значения по ширине задаются по умолчанию. Но их можно изменить по вашему желанию.
Коды:
Вместо слово «ЧИСЛО» вставляете нужную вам ширину. Только помните, что в сумме #page-c и #side должны быть равны ширине #wrapper (т.е если #side у вас 200px, а #page-c в ширину 600, то #wrapper должен быть равен 200+600 = 800)
diarycss.narod.ru/fixed-central/ находится автоматический генератор ширины основных блоков.
#EXTRATOP
Это та самая картинка вверху дненника - Код для нее:
По частям:
width: ЧИСЛОpx;
Это ширина картинки, которую вы вставляете. Это не произвольное значение, нужно писать именно то число, которое указано в свойствах картинки.
height: ЧИСЛОpx;
Высота картинки. Аналогично ширине.
margin-top:0px !important;
Этот код нужен, чтобы убрать расстояние между картинкой и верхом страницы. Ее можно регулировать в сторону отрицательного значения (т.е вместо 0px может быть -10px), пока отступ не уберется.
#EXTRABOTTOM
Это нижняя картинка, в самом низу дневника. Как extratop, только внизу
Код дня нее:
Расшифровка аналогична пункту 4.
Генератор кодов для экстраблоков - diarycss.narod.ru/extra/
Как сделать заглавную красивую букву?
.paragraph div:first-letter {
font-size: 30px;
float: left !important;
float: none;
font-family:Times New Roman;
margin-right: 3px;
color: #цвет;
line-height:100% !important; line-height:140%;
}
Нужно вставить вид шрифта, можно менять размер и цвет (см код)
А этот запрещает ее применение на вложенные дивы. Этот код - только пример.
.paragraph div div:first-letter {
font-size: 100%;
font-family:Arial, Helvetica, sans-seif;
float: none !important;
margin: 0px;
line-height:130%;
color: #000;}
Проставить цвет и шрифт!
Бордюр вокруг враппера:
#page-c {border: 10px dotted #030408}
Меняем цвет и размер (см код)
Разделитель
.singlePost {padding-bottom: 50px !important; background: url('АДРЕС') center bottom repeat-x;margin: 0; padding:0 }
Меняем положение, картинку, размер (см код)
#epigraph .postLinksBackg {display: none;} - убирает URL и Пожаловаться из эпиграфра.
как сделать: 1. неактивные изображения потухшими, 2. активные - обычными и чтобы затухание было плавным?
#page-t a,.postContent .postInner img{ opacity : 0.5; color: #999 !important; -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s;}
#page-t a:hover,.postContent .postInner img:hover { opacity : 1 !important;}
Код, меняющий цвет ссылки при наведении только на название дневника:
#side h1 a:hover {color: #fff;}
Указать желаемый цвет, см. меню.
Делаем абзацный отступ.
br:after {content:'тут ЛЮБОЙ текст такой длины, какой вы хотите сделать отступ';visibility: hidden; }
как в CSS увеличить расстояние между строками и расстояние между буквами?
.postLinksBackg a {letter-spacing:1px;}
про буквы
расстояние между строками
Например, так: .singlePost div {line-height: Xpx;}
Изменять количество пикселей по желанию
Шаблон дизайна с выпадающим меню вверху экстратопа.
Меню ставим в стандартных настройках в положение "вверху"
Так меню оказывается под экстратопом и его нам надо позиционировать наверх.
Так меню оказывается под экстратопом и его нам надо позиционировать наверх.
Читайте пометки между звездочками, т.е. *текст* - это мои комментарии, их из кода нужно будет удалить при установке.
Вот и все.
ПС: Если вы хотите оставить меню под экстратопом и просто залить промежуток между ним и блоком записей, залейте враппер.
#wrapper {background:#цвет !important}
Детальный разбор кодов построчно
Вся страница. Для нее обычно задают фон.
Код таков:
Разберем по частям:
а) background: url('АДРЕС КАРТИНКИ')
Здесь вам нужно только вставить ссылку на картинку, которая у вас будет на фоне. Куда вставлять? туда, где написано «адрес картинки».
repeat
Это часть означает, будет ли повторяться ваша картинка, растягиваться на весь фон или нет.
repeat - картинка будет дублироваться и вправо и влево (по горизонтали и вертикали) на всю ширину фона
no-repeat - фоновое изображение без его повторений
repeat-x - фоновый рисунок повторяется только по горизонтали
repeat-y - фоновый рисунок повторяется только по вертикали
background-position: 50% 0;
Это задает положение вашей картинки на странице - справа, слева, по центру и тд.
Варианты (в каждой строчке по 3 кода через знак «=», это значит, что они одинаковы, вставлять нужно любой, а не всю строчку! В скобках положение):
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
background-attachment:fixed;
Этот код значит, что ваш фон завиксирован и двигаться не будет при прокрутке странице.
Если вы не хотите фиксированный фон - просто удалите эту часть.
padding:0px
padding устанавливает значение полей вокруг содержимого элемента. 0 означает отсутствие отступов.
Генератов кода для фоновой картинки - diarycss.narod.ru/bg/
#WRAPPER - это контейнер, в котором и располагается ваш дневник со всеми частями: меню, блок записей, экстратоп, экстработтом. Именно ему задается ширина вашего будущего дневника.
Для фиксированный шинины дизайна код таков:
Разберем по частям:
min-width:ЧИСЛОpx !important;
Устанавливает минимальную ширину элемента. Если окно браузера достигаетзаданной минимальной ширины элемента, то его ширина остается неизменнойи появляется горизонтальная полоса прокрутки.
ЧИСЛО нужно заменить на ту ширину, которую вы ставите для своего дневника. Обычно это значение и сделующее в коде равны, не стоит изобретать велосипед.
width:ЧИСЛОpx;
Устанавливает ширину поля для вашего дневника - узкий, широкий - любой, на ваш вкус.
Только имейте в виду, что у многих разрешение экрана 1024 в ширину, поэтому советую ставить не больше 980px.
margin:0 auto !important; padding:0 !important;
margin устанавливает величину отступа от каждого края элемента, padding устанавливает значение полей вокруг содержимого элемента. Оставляйте эту часть без измений.
#SIDE и #PAGE-C
#side - меню в вашем дневнике
#page-c - непосредственно та часть, на которой располагаются ваши записи.
Указывая ширину #wrapper, эти значения по ширине задаются по умолчанию. Но их можно изменить по вашему желанию.
Коды:
Вместо слово «ЧИСЛО» вставляете нужную вам ширину. Только помните, что в сумме #page-c и #side должны быть равны ширине #wrapper (т.е если #side у вас 200px, а #page-c в ширину 600, то #wrapper должен быть равен 200+600 = 800)
diarycss.narod.ru/fixed-central/ находится автоматический генератор ширины основных блоков.
#EXTRATOP
Это та самая картинка вверху дненника - Код для нее:
По частям:
width: ЧИСЛОpx;
Это ширина картинки, которую вы вставляете. Это не произвольное значение, нужно писать именно то число, которое указано в свойствах картинки.
height: ЧИСЛОpx;
Высота картинки. Аналогично ширине.
margin-top:0px !important;
Этот код нужен, чтобы убрать расстояние между картинкой и верхом страницы. Ее можно регулировать в сторону отрицательного значения (т.е вместо 0px может быть -10px), пока отступ не уберется.
#EXTRABOTTOM
Это нижняя картинка, в самом низу дневника. Как extratop, только внизу
Код дня нее:
Расшифровка аналогична пункту 4.
Генератор кодов для экстраблоков - diarycss.narod.ru/extra/
Как сделать заглавную красивую букву?
.paragraph div:first-letter {
font-size: 30px;
float: left !important;
float: none;
font-family:Times New Roman;
margin-right: 3px;
color: #цвет;
line-height:100% !important; line-height:140%;
}
Нужно вставить вид шрифта, можно менять размер и цвет (см код)
А этот запрещает ее применение на вложенные дивы. Этот код - только пример.
.paragraph div div:first-letter {
font-size: 100%;
font-family:Arial, Helvetica, sans-seif;
float: none !important;
margin: 0px;
line-height:130%;
color: #000;}
Проставить цвет и шрифт!
Бордюр вокруг враппера:
#page-c {border: 10px dotted #030408}
Меняем цвет и размер (см код)
Разделитель
.singlePost {padding-bottom: 50px !important; background: url('АДРЕС') center bottom repeat-x;margin: 0; padding:0 }
Меняем положение, картинку, размер (см код)
Приятные мелочи
#epigraph .postLinksBackg {display: none;} - убирает URL и Пожаловаться из эпиграфра.
как сделать: 1. неактивные изображения потухшими, 2. активные - обычными и чтобы затухание было плавным?
#page-t a,.postContent .postInner img{ opacity : 0.5; color: #999 !important; -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s;}
#page-t a:hover,.postContent .postInner img:hover { opacity : 1 !important;}
Код, меняющий цвет ссылки при наведении только на название дневника:
#side h1 a:hover {color: #fff;}
Указать желаемый цвет, см. меню.
Делаем абзацный отступ.
br:after {content:'тут ЛЮБОЙ текст такой длины, какой вы хотите сделать отступ';visibility: hidden; }
как в CSS увеличить расстояние между строками и расстояние между буквами?
.postLinksBackg a {letter-spacing:1px;}
про буквы
расстояние между строками
Например, так: .singlePost div {line-height: Xpx;}
Изменять количество пикселей по желанию
@темы: Обломок мысли поймав налету