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
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
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: