Culori diferite pentru topicurile speciale

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Culori diferite pentru topicurile speciale

Mesaj Scris de Cassius Dio la data de Lun 25 Mar - 17:53

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:
http://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");
});

Exclamare 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!

Tutorial scris de Matriochka, tradus si completat de SGSS

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.

Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data de inscriere : 13/07/2012
Multumiri : 78
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum