Новые сообщения · Участники · Правила форума · Поиск · RSS |
|
MASoft Форум » Скрипты для Ucoz » Вопросы по Ucoz » Пояснение к "CSS" |
Пояснение к "CSS" |
Дата: Пятница, 28.08.2009, 23:37 | Сообщение # 1
Code Заходим в свою панель управления сайтом. Далее идем в Управление дизайном - Таблица стилей (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 ===== */ $IMAGE1$ Теперь о том как найти и отредактировать класс в CSS (например цвет нужно поменять) Метод 1-й - от frozen 1) Открываете Вид-Просмотр ХТМЛ кода нужной страницы. 2) Находите в тексте объект, параметры которого требуется изменить, и смотрите какой у него класс. 3) Затем ищите этот класс в таблице стилей css. 4) И меняете как нужно параметры. Если отдельного класса нет, то добавляете его в шаблон (через Панель управления), а в таблице стилей css добавляете с нужными параметрами. Метод 2-й - от booroondook 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;} Цвет взят условно. |
| |||
| |||