| Anymous | Дата: Четверг, 23.01.2014, 04:09 | Сообщение # 1 |
 |
| Сообщений: 863 |
| Репутация: 53 ± |
| Награды: 24 +
|
 |
|
нашёл в инете статью интересную, думаю пригодится комунибудь.
Для примера буду брать таблицу стилей от дизайна #981. Вот так выглядит весь шаблон. В другом шаблоне могут быть изменения...
Пожалуй, начнем;)
Заходим в свою панель управления сайтом. Далее идем в Управление дизайном - Таблица стилей (CSS). Теперь вы зашли в саму таблицу, и там много не понятных кодов. Далее вы узнаете, что они делают.
/* General Style */
В ней расположены все коды, что отвечают за сам каркас шаблона, он
отвечает за отображение таблиц, тип и цвет шрифта и ссылок и прочих
мелочей.
/* Menus */
Здесь можно отредактировать какой рисунок будет перед ссылок в главном меню своего сайта, а также его отступы и многое другое.
/* Main Menu */
Практически тоже самое, что и предыдущий, но добавляются цвет ссылок
и тип текста. Если вы немного понимаете css, на уровне новичка, то
сразу должны увидеть.
/* Module Part Menu */
Отвечает за блок новости сайта, как вы уже видели на многих сайтах.
Можно заменить цвет ссылок, и рисунок возле названия категории.
/* Entries Style */
Регулирует блок вид материалов в новостях, и всех остальных
модулях. Можно заменить размер, тип, цвет шрифта, добавить фон блока, и
все что тебе захочется.
/* Entry Manage Table */
Здесь я никогда ничего не меняю, не видел за что он отвечает. Можете его не редактировать.
/* Comments Style */
По названию можно понять, что отвечает за отображение вид комментариев, и мини-чата. можно изменить фон, цвет текста.
/* Comments Form Style */
Отвечает за саму таблицу комментариев. Также можно добавить фон и сменить границы самой таблицы, их цвет и размер.
/* News/Blog Archive Menu */
Буквально вчера разобрался за что отвечает эта часть таблицы. после
обновления системы, можно добавить блок "Архив материалов", после чего
будет доступен блок, с месяцами обновлений на сайте. Пример на главной
моего блога.
/* News/Blog Archive Style */
Этот не знаю, не видел его в рабочем состоянии, и нигде в коде у меня он не использовался.
/* News/Blog Calendar Style */
Отвечает за календарь новостей, блога... можно сменить полностью вид календаря до мельчайших подробностей.
/* Poll styles */
Регулирует отображение, функции "опрос" на сайте.
/* User Group Marks */
Здесь можно изменить цвет группы пользователей. Поставить дополнительные иконки.
/* Other Styles */
Без комментариев...
Осталась часть, которая отвечает за отображение форума. Начинается она с такого текста:
/* ===== forum Start ===== */
/* General forum Table View */
Регулирует вид блока форума.
Тут
начинается самый сложный момент таблицы. Много блоков и каждый нужно
редактировать отдельно. Рассказать об этом я не смогу, надо вам
научится самому, узнать, где что и тд... Я вам лишь посоветую.
"Если
вы хотите создать свой шаблон, то выбирайте стандартную таблицу css,
которая подходит по цветовой гамме, вам меньше путаться придется. И
быстрее вы его создадите."
и ещё одна имага:
Теперь о том как найти и отредактировать класс в CSS (например цвет нужно поменять)
Метод 1-й
1) Открываете Вид-Просмотр ХТМЛ кода нужной страницы.
2) Находите в тексте объект, параметры которого требуется изменить, и смотрите какой у него класс.
3) Затем ищите этот класс в таблице стилей css.
4) И меняете как нужно параметры.
Если отдельного класса нет, то добавляете его в шаблон (через Панель управления), а в таблице стилей css добавляете с нужными параметрами.
Метод 2-й
1) Открываете в браузере нужную страницу сайта.
2) Сохраняете в браузере эту страницу в виде HTML-файла. Например, в IE выполняем команду "Файл - Сохранить как..." и указываем в опциях вариант "Web-страница полностью" - это вызовет также сопутствующее сохранение CSS-файла и ссылку на него в сохраненном HTML-файле.
3) Открываем сохраненный HTML-файл в Frontpage, переходим в режим "Split" (т.е. отображение в нижней части окна дизайна страницы, а в верхнем - исходного кода).
4) В полуокне дизайна становимся мышкой на нужный нам элемент - при этом в полуокне исходного кода курсор автоматически встанет в соответствующее место кода, а на панели тегов высветится соответствующий класс. При желании можно нажать на этот высвеченный класс - тогда в обоих полуокнах выделятся соответствующие участки.
5) Класс нам известен - теперь можно найти его в локальном CSS-файле (см. п.2 - файл был сохранен) и изменить нужным образом.
6) Возвращаемся в Frontpage, нажимаем там клавишу F5 (обновить представление) и сразу же видим и оцениваем изменения.
Если утомительно искать нужный класс в CSS, то есть
Метод 3-й
1. Копируем название класса (с точкой или без).
2. Открываем таблицу стилей CSS
3. Вызываем окно поиска сочетанием клавиш ctrl+F
4. Вставляемый нужный класс в строку поиска
5. Нажимаем поиск и смотрим результат
В 9.01 Опере просмотр кода сделан подсвечивающимся. Текст чёрный, код синий, комментарии зелёные и скрипты коричневые. Очень удобно.
Пример:
Очень часто хотят поменять размер шрифта в сообщениях на форуме. Для этого откроем любую тему на форуме и скопируем кусочек текста. Открываем Просмотр ХТМЛ-кода и ищем этот кусочек. Затем смотрим какой у него класс - у текста сообщений class="posttdmessage".
Открываем таблицу стилей форума и находим в разделе /* Posts View */ класс posttdmessage.
.posttdmessage {padding:5px;font-size:8pt;}
Мы видим, что задан только отступ и размер шрифта. Мы можем поменять размер и добавить цвет. В итоге этот класс будет выглядеть как:
.posttdmessage {padding:5px;font-size:10pt;color:#CCCCCC;}
Цвет взят условно.
Надеюсь некоторым поможет эта темка, и будет меньше вопросов по CSS если будет надо, прочитаете))
Разбор css Ucoz'a по частям
Код /* General Style */
a:link {text-decoration:underline; color:#CCCCCC;}
a:active {text-decoration:underline; color:#CCCCCC;}
a:visited {text-decoration:underline; color:#CCCCCC;}
a:hover {text-decoration:none; color:#FFFFFF;}
a:link - цвет ссылки
a:active - цвет активной ссылки
a:visited - цвет посещенной ссылки
a:hover - цвет ссылки при наведении на нее.
Код td, body {font-family:verdana,arial,helvetica; font-size:8pt; color:#9F9F9F}
form {padding:0px;margin:0px;}
input,textarea,select {vertical-align:middle; font-size:8pt; font-family:verdana,arial,helvetica;}
.copy {font-size:7pt;}
td, body - Настройка шрифта в body и тегах <td ></td >
form - содержимое тега <form>
input,textarea,select - настроика шрифта в текстовых полях, и в опросах и т.д.
.copy - копирайт
Код a.noun:link {text-decoration:none; color:#CCCCCC}
a.noun:active {text-decoration:none; color:#CCCCCC}
a.noun:visited {text-decoration:none; color:#CCCCCC}
a.noun:hover {text-decoration:none; color:#FFFFFF}
Это приведенный класс выше, толко он предназначен для:
это вид всех ссылок в информерах
Код hr {color:#464646;height:1px;}
hr - это тег линии, вставляемый как тег
тут настраивается цвет и толщина линии.
/* Menus */
ul.uz {list-style: none; margin: 0 0 0 0; padding-left: 0px;}
li.menus {margin: 0; padding: 0 0 0 13px; background: url('http://src.ucoz.ru/t/984/8.gif') no-repeat 0px 3px; margin-bottom: .6em;}
/* ----- */
/* Main Menu */
.m {font-weight:normal;}
a.m:link {text-decoration:none; color:#CCCCCC}
a.m:active {text-decoration:none; color:#CCCCCC}
a.m:visited {text-decoration:none; color:#CCCCCC}
a.m:hover {text-decoration:none; color:#FFFFFF}
.ma {font-weight:bold;}
a.ma:link {text-decoration:none; color:#FFFFFF;}
a.ma:visited {text-decoration:none; color:#FFFFFF}
a.ma:hover {text-decoration:underline; color:#FFFFFF}
li.m {margin: 0; padding: 0 0 0 13px; background: url('http://src.ucoz.ru/t/984/8.gif') no-repeat 0px 3px; margin-bottom: .6em;}
/* --------- */
Код /* Module Part Menu */
.catsTd {padding: 0 0 6px 13px; background: url('http://src.ucoz.ru/t/984/9.gif') no-repeat 0px 3px;}
.catName {font-family:Verdana,Tahoma,Arial,Sans-Serif;font-size:11px;}
.catNameActive {font-family:Verdana,Tahoma,Arial,Sans-Serif;font-size:11px;}
.catNumData {font-size:7pt;color:#696969;}
.catDescr {font-size:7pt; padding-left:10px;}
a.catName:link {text-decoration:none; color:#CCCCCC;}
a.catName:visited {text-decoration:none; color:#CCCCCC;}
a.catName:hover {text-decoration:none; color:#FFFFFF;}
a.catName:active {text-decoration:none; color:#CCCCCC;}
a.catNameActive:link {text-decoration:none; color:#FFFFFF;}
a.catNameActive:visited {text-decoration:none; color:#FFFFFF;}
a.catNameActive:hover {text-decoration:underline; color:#FFFFFF;}
a.catNameActive:active {text-decoration:none; color:#FFFFFF;}
/* ----------------- */
/* Comments Style */
2 .cAnswer {color:#838383;padding-left:15px;padding-top:4px;font-style:italic;}
.cBlock1 {background:#2C2C2C;border:1px solid #555555;}
.cBlock2 {background:#2C2C2C;border:1px solid #555555;}
/* -------------- */
cAnswer - вид ответа администратора в коментариях, в гостевои книги и в разделе FAQ
.cBlock1 - вид сообщения в миничате
.cBlock2 - вид второго сообщения в миничате
изменить цвет фона сайта дописываем строку: body {background:#ffffff;}
ffffff - код цвета (в данном случае белого)
________________
[/hide]смена шрифта названия сайта
нужна строка:
background:url('/.s/t/731/19.gif') top repeat-x #222226;padding:10px;
#222226 - цвет фона
/.s/t/731/19.gif - адрес градиента(http://bestfights.3dn.ru/.s/t/731/19.gi), который находиться в самом верху того блока, он почти не заметен, но если будеш менять фон сверху, то и ту картинку прийдеться сменить или убрать, в зависимости от случая
Как создать скриншот? | Как создать лог файл HijackThis?
Причины, по которым может тормозить компьютер | Правила сайта!
|
| |
| |
Оригинальные образы
вверх
