Create CSS module for Joomla

Dizajn i razvoj Joomla! internet stranice ne mora biti frustrirajuće iskustvo. U većini slučajeva i nije, ali ponekad, ovisno o različitim faktorima, možemo se naći u situaciji da ne možemo na jednostavan način primijeniti CSS dizajn na stranicu ili njene dijelove (module i komponente). Joomla! pruža različita rješenja za ovaj problem a jedno od tih rješenja je primjena CSS klase na modul preko CSS Sufiksa modula.

No, to i dalje ne rješava problem gdje upisati kod. Ponekad se dešava da kod ne bude prepoznat. Trebamo li ga smjestiti u root mapu, template mapu ili mapu gdje se nalaze moduli? Trebamo li naš kod upisati u CSS datoteku modula riskirajući njegovo brisanje prilikom sljedeće nadogradnje? Ako ga smestimo u custom mapu (Gantry), kako i gdje da upišemo putanju do njega?

Ovo su stvarni problemi ali postoji jednostavno rješenje za njih koje možda nećemo koristiti u svakoj prilici ali može biti izuzetno korisno u nekim situacijama.

Naš CSS kod možemo napisati u Prilagođenom HTML modulu koji možemo dodijeliti pojedinačnoj stranici ili cijelom web site-u putem opcije Dodjeljivanje izbornika. U tom slučaju ovaj modul se ponaša kao i svaka druga CSS datoteka. CSS kod je potrebno napisati između style tagova onako kako bismo to učinili u .html dokumentu.

Ne smijemo zaboraviti jednu sitnu ali veoma bitnu pojedinost: potrebno je isključiti tekstualni editor u administraciji Joomle (Osnovni Editor-->Editor - Bez editora) jer WYSIWYG editori mogu brisati HTML tagove čime se briše i naš kod. Nakon toga CSS klase možemo primijeniti na paragrafe, spanove, divove, ili na cijele module preko spomenutog sufiksa.

Da bi CSS kod bio pohranjen potrebno je isključiti TinyMCE editor

Da bi CSS kod mogao biti pohranjen potrebno je isključiti TinyMCE editor

Na primjer, u galeriji ove stranice možete vidjeti kako ovo radi u praksi. Slike u galeriji su crno-bijele sve dok kursor miša ne prijeđe preko njih. Kada se kursor smakne sa slika one ponovo gube boju. Ovo je CSS animacija napisana u prilagođenom HTML modulu jednostavnog naziva CSS koji je dodijeljen stranici galerije. Slike su posebni Sigplus moduli (posebne galerije smještena na jednoj stranici). Klasa .grayscale, grayscale: hover primijenjena je preko opcije CSS Sufiks modula koja se nalazi u traci Napredno u postavkama modula. I to je sve što je potrebno kako bi CSS bio primijenjen.

Na kraju sumarizirajmo:

  • Isključite tekstualni editor (Sustav-->Globalna Konfiguracija--Osnovni Editor *-->Bez editora)

  • CSS kod upisujemo u Prilagođeni HTML (Upravljanje Modulima-->Novo-->Prilagođeni HTML)

  • CSS modul se objavljuje kao i svaki drugi modul (Status: Objavljeno, Pozicija: odaberite poziciju modula, Dodjeljivanje izbornika: pojedinačna stranica ili cijeli web site). Dodijelite CSS klase člancima, slikama ili modulima (CSS Sufiks modula za cijeli modul u postavkama: Napredno--> CSS Sufiks modula. NAPOMENA: ako dodjeljujete više od jedne klase ne odvajajte klase zarezima.

Nakon ovoga možete ponovo koristiti neki od tekstualnih editora no ne zaboravite ga isključiti ako želite prepraviti CSS kod.

Ova internet stranica koristi kolačiće (cookies) radi statistike posjećenosti.

Koristeći ovu internet stranicu slažete se da se kolačići koriste u spomenute svrhe. Detaljnije

Razumijem

Kolačići (eng., cookies) koriste se radi praćenja statistike posjećenosti putem Google Analytics i Webmaster tools alata. Informacije o posjetiteljima se neće koristiti u bilo koje druge svrhe.