Файлы template.css и menu.css. Урок 5

Вы познакомились с файлом index.php и теперь знаете, что этот файл определят расположение элементов сайта в соответствующих блоках <DIV>. У каждого блока определен свой уникальный ID – идентификатор. На основании этих идентификаторов и будет задаваться уникальное визуальное оформление каждого блока при помощи каскадных таблиц стилей CSS.

В каждом шаблоне должен находится файл содержащий таблицы стилей для оформления сайта. В шаблоне Likom, таких файлов два - template.css и menu.css. CSS – код шаблона был разделен на два файла для удобства пользования и работы.  Template.css содержит таблицы стилей для всех элементов сайта, кроме меню, которые находятся в файле menu.css.

Подобных файлов CSS в шаблоне может быть различное количество. Если вы решили разделить CSS – код на несколько файлов, обязательно пропишите их названия  в index.php и templateDetails.xml.

Необходимо отметить, что в таблицах прописан не только стиль оформления блоков и их позиционирование, но и стиль модулей, элементов и компонентов сайта, которые выводятся в этом блоке.

Описывать код файлов template.css и menu.css в статье, я не буду, он достаточно подробно прокомментирован в самих файлах. Откройте файлы в программе Dreamweaver и изучите код. Если вы не обладаете хорошими знаниями в области CSS, то узнать, что обозначает тот или иной параметр элемента, вам поможет полезный справочник «HTML, CSS, PHP».

Основное достоинство таблиц стилей CSS , заключается в том, что вы можете полностью поменять дизайн всего сайта в короткие сроки, при этом, не изменяя код страницы. Попробуйте поэкспериментировать с кодом и посмотрите, что у вас получится.

Как быстро изменить дизайн шаблона мы поговорим на следующем уроке.

< Файл index.php. Урок 4   Как изменить дизайн сайта. Изменение блоковой схемы шаблона. Урок 6 >
 

Комментарии 

 
# Елизавета 13.03.2011 20:05
У меня меню выглядит не так ,как на картинки вашего шаблона. Подскажите пожалуйста,в чем дело? У меня просто ссылки и белый фон.
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 17.03.2011 21:08
Надо посмотреть файл menu.css именно там определяется, как выводится меню. Если фон белый, значит вы где-то напартачили вот код, форматирующий блок вывода меню:
#topmenu {
overflow:hidden ;
height:30px;
}
/*оформление модуля меню*/
.moduletabletabs {
font:bold 14px Arial, Helvetica, sans-serif;
text-transform: uppercase;
overflow:hidden ;
text-align:center;
background-color:#3b98b0;
}
Ответить | Ответить с цитатой | Цитировать
 
 
# Елизавета 26.03.2011 15:46
Спасибо большое за ответ.радобралась Но у меня новая проблема. название статьи и сам ее текст выполнены одним шрифтом,как поменять название,чтобы оно было другого цвета. Это,как я понимаю h1?
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 26.03.2011 20:24
Елизавета,если вы используете за основу мой шаблон, то внимательно изучите CSS код, он полностью прокоменнтирова н. За вывод заголовков статей отвечает класс
componentheadin g.
Ответить | Ответить с цитатой | Цитировать
 
 
# steffany_187 06.06.2012 16:43
Здравствуйте,сп асибо большое за уроки.
У меня вот какой вопрос,хочу сделать древовидное меню в верхнем меню,расположен ным user2. Главное меню получается древовидным,а вот с верхнем проблемы.
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 06.06.2012 20:52
Включите в горизонтальном меню 2 уровень вложенности , это в менеджере модулей. И в таблицах стилей опишите класс .moduletable(суф фикс меню) ul li.parent ul
Ответить | Ответить с цитатой | Цитировать
 
 
# steffany_187 06.06.2012 23:55
Простите,я в этом деле новичок,у меня не получилось сделать по вашему комментарию. В вашем шаблоне я ничего не меняла кроме цветов и длины и ширины. В настройках изменила последний уровень на 2.
в menu.css описала класс .moduletableTABS ul li.parent ul
.moduletabletabs ul li.parent ul {
font:bold 14px Arial, Helvetica, sans-serif;
text-transform: uppercase;
overflow:hidden ;
text-align:center;
background-color:#d1d5d6;
}
Ответить | Ответить с цитатой | Цитировать
 

Ликбез для чайников