Crearea primului subiect în CMS sale 7 drupal

Astăzi vom începe ciclul de lecții dedicate subiectelor de creare în CMS Drupal 7. În acest tutorial, vom crea o temă simplă pentru CMS 7 Drupal.

Vom încerca să estimeze puterea theming drupal 7. Noi nu vom fi în acest tutorial pentru a crea fișiere șablon, HTML - aspect și fișiere PHP. Și folosind CMS furnizate DRUPAL 7 set predefinit de fișiere șablon. Aceste modele vor fi aplicate automat subiectul. Nume tema dezvoltat, de exemplu Mutheme (poate da orice nume). Acum, în \ folderul domeniile localsesrver \ localhost \ drupal \ site-uri \ toate \ teme vor crea un dosar cu același nume ca temă.

name = Mytheme (nume temă)
core = 7.x (versiunea Drupal)
motor = phptemplate (drupal core)

Faceți clic pe Salvare. Toate. Primul nostru subiect este deja operațional. Acum, să ne întoarcem la site-ul nostru la CMS drupal 7. Faceți clic pe Aspect și a vedea noul nostru temă. Porniți-l în mod implicit.

Du-te la pagina de start. Nu este foarte frumos, dar funcționează. Acum, încercați să aducă armonie și de a simplifica elementele noastre pe pagină. Pentru aceasta avem nevoie de cunoștințe de CSS. În dosarul Mytheme, creați un dosar CSS și există, de a crea un fișier style.css.

Acum, trebuie să știți CMS 7 DRUPAL a acestui fișier. Ce mi-ar DRUPAL aplicat la subiectul nostru. Deschideți Notepad ++ fișier mytheme.info și adăugați foile de stil de cod [toate] [] = CSS / style.css. Salvați modificările.

În principiu, în ceea ce privește CMS 7 pentru DRUPAL acest tutorial am terminat. Acum avem de a face cu CSS folosind browser-ul Mozilla Firefox și Firebug extensiile sale. Acest instrument vă permite să lucrați cu structura site-ului. Nu numai ao vizualiza, dar, de asemenea, sa ma uit la a face modificări pe zbor. Presupunem că ați instalat și, prin urmare, mergi mai departe. Să vedem codul generat de pagini CMS Drupal 7. Pentru aceasta, deschide pagina principala a site-ului dvs. cu noul nostru temă în browser-ul Mozilla. Faceți clic pe pagina, clic dreapta și din meniul contextual, selectați Sursă pagină. Vedem structura documentului. Suntem interesați

cu aydishnikami și clasele lor. prin care să stiluri din fișierul css folosit aici.

Cum de a utiliza extensia nu va Firebug. Cred că puteți găsi cu ușurință informații cu privire la acest subiect. Și puteți vizualiza structura documentului HTML.

corp culoare de fundal: #ffffcc;
>

Nu uitați să salvați.

Un cuvânt, făcând clic pe corp, pe partea dreapta a se vedea stilul nostru de masă. Acum vedem că CMS 7 utilizează drupal foaia de stil. Nu voi intra în toate blocurile

, dar ai știut deja că se aplică acestor unități prin intermediul aydishniki clase și stiluri, vom forma pagina noastră în forma cerută. Uită-te la div bloc = »principal». Câte blocuri implică. Să-i dea dimensiunea și marginile.

latime #main: 960 x;
margin: auto;
>

Block a luat o poziție diferită.

Dezasambla întregul aspect al blocului nu este subiectul acestei lecții. Eu dau doar întregul fișier cu cod style.css. Dar puteți vedea și de a înțelege stilul este aplicat cu ajutorul Firebug extensii set.

Aici este style.css fișier de cod

corp culoare de fundal: #ffffcc;
>
latime #main: 960 x;
margin: auto;
>
#page culoare de fundal: #ffffcc;
>
# Salt-link lățime: 960 x;
margin-left: auto;
marja de-dreapta: auto;
culoare de fundal: #ffffcc;
>
latime #header: 960 x;
culoare de fundal: #ffffcc;
margin-left: auto;
marja de-dreapta: auto;
margin-top: 10px;
înălțime: 40px;
padding-top: 10px;
border-top: 3px solid # 000;
border-bottom: 3px solid # 000;
>
#logo float: left;
margin-left: 20px;
>
# un logo text-decoration: none;
>
# Numele-și sloganul float: left;
margin-left: 100px;
>
# Site-name un text-decoration: none;
>
latime #navigation: 960 x;
marja de-dreapta: auto;
margin-left: auto;
culoare de fundal: #ffffcc;
înălțime: 45px;
>
afișare #navigation h2: nici unul;
>
# ul principal meniu de fundal de culoare: #eee;
înălțime: 25px;
text-decoration: none;
padding-top: 5px;
>
ul # principal meniu li un text-decoration: none;
padding-dreapta: 10px;
>
ul #-meniu secundar background-color: # 333;
înălțime: 25px;
>
ul #-meniu secundar li un text-decoration: none;
Culoare: #fff;
padding-dreapta: 10px;
înălțime: 25px;
border-dreapta: #fff solid 1px;
>
ul #-meniu secundar o: culoare Hover: # FF0000;
>
# Main-înveliș clar: ambele;
culoare de fundal: #FFFFFF;
lățime: 960 x;
marja de-dreapta: auto;
margin-left: auto;
>
latime #content: 775px;
float: right;
padding-left: 15px;
>
# Bara laterală primul float: left;
lățime: 130 x;
margin: 0px;
padding: 20px;
culoare de fundal: #eee;
>
latime #footer: 920px;
padding: 20px;
marja de-dreapta: auto;
margin-left: auto;
clar: ambele;
min-height: 100px;
background-color: # 333;
Culoare: #fff;
>
#footer o culoare: #fff;
>

Și iată ce sa întâmplat: