Главная | Регистрация | Вход Приветствую Вас Гость Сайт автора
Реклама
Реклама
Реклама
Место свободное
Место свободное

Случайные картинки
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
CSS: небольшой мануальчик для начинающих
shasha974Дата: Пятница, 16.10.2009, 13:57 | Сообщение # 1


Посты: 42
[ ]
Заходим в свою панель управления сайтом. Далее идем в Управление дизайном - Таблица стилей (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 ===== */

Теперь о том как найти и отредактировать класс в 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;}


  • Страница 1 из 1
  • 1
Поиск:
Посетители за сутки

Статистика Форума
Последние ответы Популярные темы Лучшие пользователи Новые пользователи

Статистика кто посетил в красивом стиле для uCoz

(2)

статистика CW

(0)

Новый вид статистики Ucoz

(0)

Скрипт Наши сервера в одном блоке

(0)

Выдвижная кнопка ВКонтакте

(0)

Flash статистика CW встиле огня

(0)

TRANCE РАДИО

(0)

Информер популярных материалов

(0)

Плеер для проигрывания мп3 на сайте

(0)

Часы для cs

(0)

Заказ скриптов

(44)

Прием игроков в клан

(42)

Настройка (MANI_SERVER.CFG)

(22)

Досчитать до 1000 !

(17)

zBlock (Установка и настройка)

(17)

Досчитай до 5000!

(15)

Если хотити снами сыграть КВ то вам сюда!!!

(14)

Прикольная игра!)))

(13)

Прибавь 10

(12)

Тренировки

(11)

mSx

(442)

ReD_ncux

(69)

shasha974

(42)

V@mPiR

(32)

extreme

(31)

Sanek1801

(21)

ВГД

(20)

Batareyka

(11)

Asif

(10)

kragsburger

(9)

xipex57055

(10.07.2022)

Okey

(21.02.2016)

rusmuzru

(15.09.2015)

support

(13.04.2015)

AlexQuettro

(22.12.2013)

IceLoo

(20.12.2013)

DoG

(19.03.2013)

tubaretka2012

(23.01.2013)

Onlines

(17.01.2013)

GrateDoping55

(14.12.2012)

Реклама:




Реклама на сайте
Web-Design by MSX