00:20 

Полезная информация

Не ищи меня в других. Меня там нет.
Полезные ссылки:

Названия элементов дизайна представлены здесь
Основные элементы на примере - смотрим
Схема/Структура дизайна по блокам - тут
Основы Diary CSS от Roldo - 1 часть (общее), 2 часть (значение элементов, более сложное оформление)
Сайт посвящен языку HTML, CSS, веб-дизайну, графике и процессу создания сайтов - зайти
Шаблоны стандартных дизайнов CSS - тут
Таблицы html, оформление - здесь
Цвета и декор html - сюда
Тень от текста при помощи CSS 3 - читать
Различные символы - тут
Коллекция фонов и клипарта - сюда
Палитры цветов - туц
Перевод команд (меню) фотошопа - смотреть


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


Коды CSS (основной набор)

⇒ Все, что выделено жирным, надо изменять на свои значения!

⇒ Внимание!

Вот в таком коде url('адрес картинки';) удаляйте точку с запятой в скобках!!! Она там не нужна
(я ее удаляю в посте, но как только нажимаю "редактировать", она появляется вновь сволочь)

ОБЩЕЕ

1. Общий контейнер
#wrapper{min-width:минимальная ширинаpx !important;width:ширинаpx;margin: 0 auto !important;padding:0 !important;overflow:hidden !important;}

2. Основной контейнер
#page-c{width:ширинаpx !important;padding:0 !important;padding:0 !important;}

3. Фоновая картинка (применима для всех блоков)
#блок { background: url('ссылка на картинку';) no-repeat; <- это повтор фоновой картинки, другие значения тут) !important; width:ширина картинкиpx; height:высота картинкиpx;}

4. Цвета всех ссылок дневника
A:hover {text-decoration: underline overline; color: #цвет !important;} - цвет и оформление выделенных ссылок ссылок
a:visited {text-decoration: none; color: #цвет !important;} - цвет и оформление видимых ссылок
Подробнее о вариантах text-decoration - тут, и тут

5. Фоновый цвет нужного вам блока
#Блок {background: #цвет !important;}

6. Картинки около ссылок by Tex
#ссылка {background: url('ссылка на картинку';) 2px 3px no-repeat; padding:0 0 0 20px !important; height:18px;}

Это минимально достаточная запись в плане используемых параметров.
Самое главное здесь:
2px 3px- в примере задают положение фоновой картинки, относительно границблока: первая цифра (2px) определяет отступ для фонового изображенияслева, вторая (3px) - отступ сверху.
no-repeat - запрещает повторение картинки, если необходимо замостить фон по принципу обоев просто удалите no-repeat
Чтобы разрешить повторение картинки по принципу обоев: только по горизонтали - вместо no-repeat используйте repeat-x, только по вертикали - repeat-y
height - высота. Задается в px.
Должна быть не меньше высоты выводимого изображения.
padding - так называемый "внутренний" отступ. Задается обычно четырьмя числами в px
Первая цифра - отступ от верхнего края блока, вторая - от правого, третья - снизу, четвертая - слева.
Левый внутренний отступ должен быть не меньше ширины используемой иконки.
То есть запись padding:0 5px 10px 20px; задаст блоку внутренние отступы 0 сверху, 5 справа, 10 снизу и 20 слева.

Если все отступы одинаковые - достаточно записи типа padding:5px; - в этом случае отступ от любого края блока будет равен 5px
Еслиотступы сверху=снизу и слева=справа достаточно записи типа padding:5px10px - в этом случае сверху и снизу отступ будет 5px, слева и справа по10px.

7. Картинки у ссылок "Комментировать, В цитатник..."
.comments {background: url('адрес картинки';) no-repeat; padding:0 0 0 20px !important; display:block; height:высота картикниpx; } — комментарии.
.subscribe {background: url('адрес картинки';) no-repeat; padding:0 0 0 20px !important; display:block; height:высота картинкиpx; } — подписаться.
.addToQuote {background: url('адрес картинки';) no-repeat; padding:0 0 0 20px !important; display:block; height:высота картинкиpx; } — в цитатник.

8. Оформление ссылок:
A:hover {font-size: размерpx; font-family: "шрифт"; font-style: начертание; font-weight: насыщенность;} - цвет и оформление выделенных ссылок ссылок
a:visited {font-size: размерpx; font-family: "шрифт"; font-style: начертание; font-weight: насыщенность;} - цвет и оформление видимых ссылок
Подбробней о font-weight тут, о font-style тут

9. Прозрачность блоков by Tex
#блок { filter: alpha(opacity=50); /* IE 5.5+ */
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1+, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}
ДляIE 5.5 и выше - прозрачность задается числом от 0 до 100, для остальныхбраузеров - числом от 0.0 до 1.0 (чем больше число, тем более непрозрачным будет элемент).

10. Изменить цвет ссылки
#ссылка a {color: #цвет;}

11. Изменить цвет заглавных первых букв (не проверяла, не знаю работает ли)
p:first-letter {color:#цвет;}

12. Экстратоп (картинка вверху дневника)
#extratop { background: url('адрес картинки';) no-repeat; width:ширина картинкиpx; height:высота картинкиpx; line-height: 100% !important;}

Чтобы над эктсратопом не было промежутка, код такой
#extratop { background: url('ссылка на картинку';) no-repeat; width:ширина картинкиpx; height:высота картинкиpx; line-height: 100% !important; margin-top:0px !important;}
body{padding:0px}

13. Экстработтом (картинки внизу дневнкиа)
#extrabottom {background: url('ссылка на картинку';) no-repeat; width: ширина картинки px; height: высота картинкиpx; }

14. Рамка/Обводка блоков
#блок {border: ширина рамкиpx стиль #цвет; padding:7px;}
О стилях рамки читайте тут

15. Убрать ссылки "на главную, все дневники, faq..." , видные в табличном дизе и в дизах с выпадающим меню.
#bottomNav, #topNavLinks {display: none !important;}

16. Фон дневника в виде большой недвигающейся картинки
body{background:url('адрес картинки';) repeat; background-position: 50% 0; background-attachment:fixed;}
#wrapper {position:relative;}

17. Отступы
#блок {margin-top: числоpx !important}
Устанавливает величину отступа от каждого края элемента.
top - отступ сверху, left - отступ слева, right - отступ справа, bottom - отступ снизу

#блок {padding-top: числоpx !important}
Устанавливает значение полей вокруг содержимого элемента.
top - поле от верхнего края, left - от левого, right - от правого, bottom - снизу

18. Позиционирование блоков/ссылок (перемещение их в любое место на странице)
#блок/ссылка {position: absolute; top: числоpx; left/right: числоpx;}
Подробней о значениях позиционирования читайте здесь



МЕНЮ


1. Колонка меню

#side{width:ширинаpx !import
ant;margin:0 !important;}

2. Цвет названия дневника
#side h1 a {color: #цвет;}
3. Цвет названия днева для блочного диза
.block_design #side h1 a {color: #цвет;}

4. Цвет имени позователя
#authorName {color: #цвет;}

5. Меню продолжается с основным блоком
.left (если меню справа, то right) #wrapper{background:#нужный цвет;overflow:hidden;}

7. Темы записей всегда открыты
#TagsList {display:block !important;visibility:visible !important}

8. Зафиксировать меню (я бы не советовала, тк на экранах с низким разрешением часть меню не видно. Тем более этот код не всегда работает, как я поняла)
#side {position:fixed;}

9. Убрать некоторые ссылки меню (названия ссылок в полезной информации в начале поста)
#ссылка {display:none;}

10. Центрировать текст в меню
#side .menuSection{text-align:center;}

11. Заменить текстовые ссылки на изображения
#ссылка A {display:block; width:ширинаpx; height:высотаpx; line-height:500px; overflow:hidden; background: #цвет url('ссылка на картинку';) 2px 4px no-repeat;}

12. разделить меню на две части - одна слева, другая справа
Тут

13. Обвести секцию меню в рамочку (можно цветную или с картинкой)
div.menuSection { background: #цвет блока;border-width:ширина рамкиpx; border-color:#цвет рамки; border-style:стиль рамки;padding:7px;}
О стилях рамки читайте тут

Чтобы вмеcто цвета блока была картинка, код такой:
div.menuSection { background: url('адрес картинки';) repeat;border-width:ширина рамкиpx; border-color:#цвет рамки; border-style:стиль рамки;padding:7px;}

14. Оформление выпадающего меню
#side ul {background:#цвет выпадающих блоков; прозрачность -moz-opacity:.значение !important;opacity:.значение !important; filter:alpha(opacity=значение); !important; border: ширина рамки выпад.блоковpx стиль рамки #цвет рамки}
О стилях рамки читайте тут

15. Сделать видимыми названия секций меню
.menuSection_title { background: #цвет фона под названием (либо картинкой background: url('адрес картинки';) repeat); color:#цвет навзания; display:block; font-size:размер%; margin:;line-height: 2em; text-align:center !important;}

16. Сделать блок выпадающего меню всегда видимым
#блок ul {visibility:visible !important; display:block !important;}

17. Маркированный список в меню
#блок ul li{ color:#цвет маркера; list-style-type:стиль; line-height: расстояниеem; list-style-position: расположение; list-style-image: маркер в виде картинки;}
Подробнее о list-style-type тут, о list-style-position здесь, о list-style-image вот тут



БЛОК ЗАПИСЕЙ

1. Дата записи
.postDate {text-align:местоположение !important; background: #цвет url('либо адрес картинки';) repeat; font-size: размерpx; font-family: "шрифт"; font-style: начертание; font-weight: насыщенность;}

Местоположение: справа - right, слева - left, по центру - center.
Подбробней о font-weight тут, о font-style тут

2. Заголовок записи
.postDate, .header {text-align:местоположение !important; background: #цвет url('либо адрес картинки';) repeat; font-size: размерpx; font-family: "шрифт"; font-style: начертание; font-weight: насыщенность;}

Местоположение: справа - right, слева - left, по центру - center.
Подбробней о font-weight тут, о font-style тут

3. Разделитель
.singlePost {padding-bottom: 20px !important; background: url('адрес картинки';) right bottom no-repeat;}
#epigraph .singlePost, #post0 {background:none !important;}
#epigraph {background: none !important; background-position:bottom !important;}

4. Фон ссылок "комментировать, в цитатник.."
.postLinksBackg {background: #цвет url('или адрес картинки';) no-repeat; background-position:right !important; }

@темы: Полезное для работы с diary, CSS, Полезное для работы с diary-дизайном

URL
Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

PAY_design

главная