Kaip pasidaryti unikalų modulio atvaizdavimą. Modulio class sufiksas
Sekmadienis, 18 Gruodis 2011 22:48
Parašė Rimvydas
Peržiūrų: 432
Joomloje modulių atvaizdavimą apibrėžia modulio klasės sufiksas. Tai galingas “įrankis” kurį naudojant praktiškai galima atvaizduoti kiekvieną modulį nepriklausomai vienas nuo kito t.y. taip kaip mes norim. Vienintelis reikalavimas, kad tai padaryt yra css žinios. Apie css subtilybes čia nekalbėsime tai atskira tema ir šis straipsnelis skirtas tiems kas jau žino css pagrindus. Modulio klasės sufiksas įvedamas modulio parametruose tam skirtoje vietoje. Jei šis laukelis tuščias vadinasi sufiksas nepriskirtas ir galioja bendros taisyklės. Paprastai rašomas priekyje dedant brūkšnelį nors tai nėra taisyklė galima palikti ir tuščia tarpą, tačiau taip parašius ir po to nagrinėjant kodą paprasčiau pastebimas.
Dabar sukursime modulio stilių kuris skiriasi nuo jau turimų t.y. visai nauja nemodifikuojant esamų . Pavyzdį pateiksiu naudodamas standartinį Joomla 1.5 ver. šabloną JA_Purity . Noriu atkreipti dėmesį į tai, kad visa tai galioja ir Joomla 1.7 versijai praktiškai jokio skirtumo nėra. Busimam moduliui uždėsime rėmelį, pavadinimui foną, pavadinimą patalpinsime toliau nuo krašto, šriftas modulyje bus pasviręs, raudonos spalvos žodžiu modulis akivaizdžiai skirsis nuo esamų. Pirmiausia naudodamiesi Firebug pažiūrime kuri modulio klasė atsakinga už esamų modulių atvaizdavimą.
Matome, kad tai standartinė class moduletable . Taigi norėdami moduliui suteikti savą sufiksą pirmiausiai turime priskirti priešdėlį pvz.: _new1 ir mūsų modulio klasė bus
moduletable_new1 . Einame į modulių tvarkyklę ir pridedame naują modulį pvz.: mod_custom . ir priskiriame jam sufiksą _new1.
Toliau atidarome templates.css failą ir pabaigoje parašome:
1 2 3 4 |
.moduletable_new1 { border:2px solid; border-color:#006599; } |
1 2 3 4 5 6 |
.moduletable_new1 h3 { margin:0px; padding-left:80px; background: url(../images/bg1.jpg) repeat ; color:#FFF; } |
1 2 3 4 5 |
.moduletable_new1 p{ padding:0px 5px; color: #FF0000; font-style: italic; } |
Turime rezultatą :
Jei dabar pažiūrėsime tinklapio kodą pamatysime naują klase <div class="moduletable_new1"> .
Aišku norint padaryti gražų ir unikalų modulio atvaizdavimą reikia aprašyti daugiau stiliaus elementų, tačiau šio straipsnelio tikslas paaiškinti esme, o kai ji aiški smulkmenas jau galima dėlioti. Sukurtą stilių galima naudoti bet kuriam moduliui. Pabandykite suteikti pvz.:Meniu moduliui. Matome, kad stilius pritaikytas tik iš dalies , nes meniu modulyje yra naudojami sąrašai, o sukurtame stiliuje neaprašytos nei <ul> nei <li> gairės. Tai tiek trumpai neišsiplečiant apie modulių sufiksus.
Joomla123.lt is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.