Culori diferite pentru topicurile speciale

Scris de Cassius Dio Lun Mar 25, 2013 5:53 pm

Culori diferite pentru topicurile speciale

Bun gasit! Foarte fericit

Cu ajutorul acestui tutorial puteti adauga o culoare de fundal diferita pentru celulele ce contin topic-uri speciale, precum cele care au o anumita iconita (rezolvat, in progres etc.) sau cele care sunt blocate, au atins pragul de topic popular dar si altele.

Tutorialul este disponibil pentru toate versiunile de forum.

Sageată

1. Aplicarea codurilor JavaScript:
Intai de toate, vizitati:

Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript

Faceti click pe butonul Creati un nou cod JavaScript.

Completati rubricile astfel:

Titlu: Fundal pentru topic-uri speciale
Amplasare: Subforumuri
Cod JavaScript: In functie de versiunea forumului...

phpBB2, PunBB si Invision:

Cod:: $(document).ready(function() { /* Adaugarea unei clase pentru celulele cu anunt */ $('img[src="Link imagine anunt"]').closest('tr').addClass('annonce'); /* Adaugarea unei clase pentru celulele cu post-it */ $('img[src="Link imagine post-it"]').closest('tr').addClass('post-it'); });

phpBB3:

Cod:: $(document).ready(function() { /* Adaugarea unei clase pentru celulele cu anunt */ $("dl.icon[style*='Link imagine anunt']").addClass("annonce"); /* Adaugarea unei clase pentru celulele cu post-it */ $("dl.icon[style*='Link imagine post-it']").addClass("post-it"); });

Modificarile necesare:
In cadrul codurilor de mai sus, trebuie sa adaugati link-urile catre imaginile necesare:
- Link imagine anunt : adresa URL catre imaginea de anunt;
- Link imagine post-it : adresa URL catre imaginea post-it.

Dupa ce ati efectuat modificarile necesare, faceti click pe butonul Valideaza.

Sageată

2. Aplicarea codurilor CSS:
Vizitati:

Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS

Adaugati, in functie de versiunea de forum pe care o folositi, urmatoarele coduri...
phpBB2, PunBB si Invision:

Cod:: /* Modificarea culorii pentru celulele cu anunt */ tr.annonce td { background-color: #culoare !important; } /* Modificarea culorii pentru celulele cu post-it */ tr.post-it td { background-color: #culoare !important; }

phpBB3:

Cod:: /* Modificarea culorii pentru celulele cu anunt */ dl.annonce { background-color: #culoare; } /* Modificarea culorii pentru celulele cu post-it */ dl.post-it { background-color: #culoare; }/

Modificarile necesare:
In cadrul codurilor de mai sus, trebuie sa adaugati culorile dorite pentru topic-urile speciale. Asadar, inlocuiti #culoare cu un cod sau nume de culoare HTML. Puteti folosi si aceasta lista:
https://help.forumgratuit.ro/t15-coduri-culori

3. Aplicarea codurilor de mai sus si pentru alte tipuri de topic-uri:
Cum spuneam si mai sus, puteti folosi acest tutorial nu numai pentru topic-urile de tip anunt si post-it, ci si pentru cele care au iconite gen rezolvat, in progres etc, dar si pentru anunturile globale, topic-urile cu statutul "popular".

Codurile JavaScript ar arata, in functie de versiunea forumului pe care o folositi, aproximativ ca cele de mai jos...
phpBB2, PunBB, Invision:

Cod:: $(document).ready(function() { /* Adaugarea unei clase pentru celulele cu iconita "rezolvat" */ $('img[src="Link imagine rezolvat"]').closest('tr').addClass('resolu'); /* Adaugarea unei clase pentru celulele cu iconita "in progres" */ $('img[src="Link imagine in progres"]').closest('tr').addClass('progress'); });

phpBB3:

Cod:: $(document).ready(function() { /* Adaugarea unei clase pentru celulele cu iconita "rezolvat" */ $("dd.dterm[style*='Link imagine rezolvat']").closest("dl.icon").addClass("resolu"); /* Adaugarea unei clase pentru celulele cu iconita "in progres" */ $("dd.dterm[style*='Link imagine in progres']").closest("dl.icon").addClass("progress"); });

Pentru versiunea phpBB3: Codul phpBB3 de mai sus este valid numai pentru iconitele pentru mesaje (rezolvat, in progres etc). Daca doriti sa il folositi pentru cele blocate sau care au atins pragul de topic popular codul pe care trebuie sa il folositi este exact ca si cel de la pasul 1, cel CSS respectiv de la pasul 2. Tot ce trebuie sa modificati din el este numele clasei atribuite si adresa URL a imaginii.

Codurile CSS ar arata, in functie de versiunea forumului cam asa...
phpBB2, PunBB si Invision:

Cod:: /* Modificarea culorii pentru celulele cu anunt */ tr.resolu td { background-color: #culoare !important; } /* Modificarea culorii pentru celulele cu post-it */ tr.progress td { background-color: #culoare !important; }

phpBB3:

Cod:: /* Modificarea culorii pentru celulele cu anunt */ dl.resolu { background-color: #culoare; } /* Modificarea culorii pentru celulele cu post-it */ dl.progress { background-color: #culoare; }/

Modificarile necesare:
Atat pentru codurile JavaScript cat si pentru cele CSS modificarile pe care trebuie sa le efectuati corespund cu cele de la pasul 1 si 2. Atentie la editarea codurilor!