Създаване на първия въпрос в своите CMS Drupal 7
Днес ние започваме цикъла на уроци, посветени на темите за създаването в CMS Drupal 7. В този урок ще се създаде проста тема за CMS Drupal 7.
Ще се опитаме да се оцени силата ГНУ Drupal 7. Ние няма да сме в този урок, за да създадете шаблонни файлове, HTML - оформление и PHP файлове. И като се използват предвидените CMS Drupal 7 предварително определен набор от шаблонни файлове. Тези шаблони автоматично ще бъдат приложени към темата. Дайте име на тема, разработена от, например Mutheme (може да даде всяко име). Сега в папка localsesrver \ домейни от \ Localhost \ Drupal \ сайтове \ всички \ теми ще създаде папка със същото име като на темата.
име = Mytheme (тема име)
сърцевина = 7.x (версия Drupal)
двигател = phptemplate (ядро Drupal)
Кликнете върху Запазване. All. Първата ни тема вече функционира. Сега нека се обърнем към нашия сайт в CMS Drupal 7. Кликнете върху Външен вид и да видим новата ни тема. Включете го по подразбиране.
Отиди на началната страница. Не е много хубава, но тя работи. Сега се опитайте да донесе хармония и рационализираме елементи на страницата. За това ние трябва познания по CSS. В Mytheme папка, създайте CSS папка и там, създайте style.css файл.
Сега трябва да се знае, CMS Drupal 7 от този файл. Това, което бих Drupal го прилага към нашата тема. Отвори Notepad ++ mytheme.info файл и добавяне на код стилови на [всички] [] = CSS / style.css. Запазете промените.
По принцип по отношение на CMS Drupal 7 за този урок сме готови. Сега ние трябва да се справят с CSS използвате браузъра Mozilla Firefox и разширения Firebug. Този инструмент ви позволява да работите със структурата на сайта. Не само да го видите, но и да гледате правите промени в движение. Предполагаме, че сте инсталирали и следователно да продължат напред. Нека да видим кода, генериран от нас страници CMS Drupal 7. За да направите това, отворете на главната страница на сайта си с нашата нова тема в браузъра Mozilla. Кликнете на страницата, щракнете с десния бутон и от контекстното меню изберете Източник на страницата. Виждаме структурата на документа. Ние сме заинтересовани от
Как да използвате разширението аз няма Firebug. Мисля, че лесно можете да намерите информация по тази тема. И можете да видите структурата на документа за HTML.
тяло фон-цвят: #ffffcc;
>
Не забравяйте да се спаси.
Една дума, като кликнете върху тялото, в дясно, вижте нашия стил на маса. Сега ние виждаме, че CMS Drupal 7 използва стилове. Аз няма да навлизам в всички блокове
#main ширина: 960 пкс;
марж: автоматичен;
>
Блок тръгна в друга позиция.
Разглобяване на цялото оформление на блока не е темата на този урок. Току-що даде пълен код style.css файла. Но можете да видите и разберете Стилът се прилага с помощта на Firebug поставените разширения.
Тук е style.css на файл с код
тяло фон-цвят: #ffffcc;
>
#main ширина: 960 пкс;
марж: автоматичен;
>
#page фон цвят: #ffffcc;
>
# Ширина Пропускане-връзка: 960 пкс;
марж-наляво: автоматичен;
марж-надясно: автоматичен;
фон-цвят: #ffffcc;
>
#header ширина: 960 пкс;
фон-цвят: #ffffcc;
марж-наляво: автоматичен;
марж-надясно: автоматичен;
марж-нагоре: 10px;
височина: 40px;
подложка покрив: 10px;
гранично-отгоре: 3px твърдо # 000;
гранично-отдолу: 3px твърдо # 000;
>
#logo плава: ляво;
марж ляв: 20px;
>
а # лого текст декорация: няма;
>
# Име-и-мото поплавъка: ляво;
марж ляв: 100px;
>
# Сайт-назоват текст декорация: няма;
>
ширина #navigation: 960 пкс;
марж-надясно: автоматичен;
марж-наляво: автоматичен;
фон-цвят: #ffffcc;
височина: 45px;
>
#navigation h2 дисплей: няма;
>
ул # главния-меню фон-цвят: #eee;
височина: 25 пкс;
текстови декорация: няма;
подложка-отгоре: 5px;
>
ул # главния-меню ли текстови декорация: няма;
вата-надясно: 10px;
>
ул # вторично меню фон-цвят: # 333;
височина: 25 пкс;
>
ул # вторично меню ли текстови декорация: няма;
Цвят: #fff;
вата-надясно: 10px;
височина: 25 пкс;
гранично-надясно: 1 пиксел твърдо #fff;
>
ул # вторичен-меню: навъртам цвят: # ff0000;
>
# Main-обвивка ясно: и двете;
фон-цвят: #ffffff;
ширина: 960 пкс;
марж-надясно: автоматичен;
марж-наляво: автоматичен;
>
#content ширина: 775px;
плаваш: право;
уплътнение ляв: 15px;
>
# Sidebar и първи поплавъка: ляво;
ширина: 130px;
марж: 0px;
подложка: 20px;
фон-цвят: #eee;
>
ширина #footer: 920px;
подложка: 20px;
марж-надясно: автоматичен;
марж-наляво: автоматичен;
ясно: и двете;
мин-височина: 100 пиксела;
фон цвят: # 333;
Цвят: #fff;
>
#footer цвят: #fff;
>
А ето какво се случи: