Acest tutorial vă prezintă cum puteţi adăuga o imagine de fundal pentru mesajele staff-ului, pentru un grup anume, exact cum este aici, pe forumul de suport.
Pentru început, trebuie să edităm fiecare rang şi să îl ajustăm pentru a fi recunoscut în cadrul codului şi pentru ca imaginea să se seteze automat la întâlnirea acestuia:
Panou de administrare
Utilizatori si grupuri Ranguri Administrarea rangurilor
Facem click pe butonul
sau "Adauga un nou rang".
In rubrica "Titlul rangului:" inseram acest cod:
Dvs. puteti modifica numele clasei , din "Administrator" in "Moderator" s.a.m.d, iar apoi, desigur va trebui sa faceti modificarile de rigoare in codurile din cadrul acestui tutorial, inlocuind vechile clase cu cele noi.
Pentru a asocia imaginea unui grup complet trebuie sa va asigurati ca rang-ul este setat tuturor membrilor din el.
Dupa acestea, vom insera un cod Javascript pentru afisarea imaginii de fundal. Urmati pasii de mai jos pentru a ajunge in zona unde vom efectua aceste modificari:
Panou de Administrare Module HTML si JAVASCRIPT Gestiunea codurilor Javascript
Inainte de a crea un nou cod Javascript, tebuie sa ne asiguram ca optiunea "Activeaza gestiunea codurilor JavaScript :" este setata pe "Da".
In final, facem click pe butonul
" Creati un nou cod Javascript"
In zona "Titlu", puteti pune spre exemplu "Imagine post-uri Administratori".
La zona "Amplasare :" setam pe "Topicuri".
In cele din urma, la "Cod JavaScript", adaugam urmatorul cod:
Apasam pe "Valideaza".
Puteti adauga mai multe linii in codul Javascript, astfel sa faceti efectul si pentru alte rang-uri/grupe, spre exemplu:
Am ajuns si la ultima etapa, adaugarea codului CSS pentru afisarea imaginii de fundal.
Mergem catre:
Panou de Administrare Afisare Imagini si culori 
Culori Foaie de stil CSS
Adaugam acest cod in casuta cea mare:
Daca ati modificat codul Javascript, punand-ul pe cel cu mai multe linii, acum, in loc de acest cod CSS, veti avea:
In cod, zona "bottom right" indica faptul ca situarea codului va fi in partea dreapta jos, adica in coltul postarii.
Inlocuiti "imaginea de fundal" cu url-ul imaginii voastre, care doriti sa se afiseze. Imaginea trebuie sa aiba marimea de 1428*461 pixelis pentru a se afisa corect.
Daca doriti sa modificati numele clasei din CSS, o puteti face, modificand aceasta zona din codul Javascript:
Forumgratuit va pune la dispozitie o gama variata de imagini pentru mesajele staff-ului, disponibile aici.
Sursa: ForumGratuit.Ro
Tutorial scris de Keir.
Cu stima, Braga Catalin ~> fraNNNta - Design
Pentru început, trebuie să edităm fiecare rang şi să îl ajustăm pentru a fi recunoscut în cadrul codului şi pentru ca imaginea să se seteze automat la întâlnirea acestuia:
Panou de administrare
Utilizatori si grupuri Ranguri Administrarea rangurilorFacem click pe butonul
sau "Adauga un nou rang".In rubrica "Titlul rangului:" inseram acest cod:
Cod:
<span class="Administrator">Administrator</span>Dvs. puteti modifica numele clasei , din "Administrator" in "Moderator" s.a.m.d, iar apoi, desigur va trebui sa faceti modificarile de rigoare in codurile din cadrul acestui tutorial, inlocuind vechile clase cu cele noi.Pentru a asocia imaginea unui grup complet trebuie sa va asigurati ca rang-ul este setat tuturor membrilor din el.Dupa acestea, vom insera un cod Javascript pentru afisarea imaginii de fundal. Urmati pasii de mai jos pentru a ajunge in zona unde vom efectua aceste modificari:
Panou de Administrare
Module HTML si JAVASCRIPT Gestiunea codurilor JavascriptInainte de a crea un nou cod Javascript, tebuie sa ne asiguram ca optiunea "Activeaza gestiunea codurilor JavaScript :" este setata pe "Da".In final, facem click pe butonul
" Creati un nou cod Javascript"In zona "Titlu", puteti pune spre exemplu "Imagine post-uri Administratori".
La zona "Amplasare :" setam pe "Topicuri".
In cele din urma, la "Cod JavaScript", adaugam urmatorul cod:
Cod:
$(function() {
$('.Administrator').parent().parent().parent().addClass('ImagineAdministrator');
});Apasam pe "Valideaza".
Puteti adauga mai multe linii in codul Javascript, astfel sa faceti efectul si pentru alte rang-uri/grupe, spre exemplu:Cod:
$(function() {
$('.Administrator').parent().parent().parent().addClass('ImagineAdministrator');
$('.Moderator').parent().parent().parent().addClass('ImagineModerator');
$('.Designer').parent().parent().parent().addClass('ImagineDesigner');
});Am ajuns si la ultima etapa, adaugarea codului CSS pentru afisarea imaginii de fundal.
Mergem catre:
Panou de Administrare
Afisare Imagini si culori Culori Foaie de stil CSSAdaugam acest cod in casuta cea mare:
Cod:
.ImagineAdministrator td.row1 {
background-image: url('Lien du dégradé') !important;
background-position: bottom;
background-repeat: repeat-x;
}
.ImagineAdministrator td.row2 {
background-image: url('Lien du dégradé') !important;
background-position: bottom;
background-repeat: repeat-x;
}Daca ati modificat codul Javascript, punand-ul pe cel cu mai multe linii, acum, in loc de acest cod CSS, veti avea:Cod:
.ImagineAdministrator td.row1 {
background-image: url('Lien du dégradé 1') !important;
background-position: bottom;
background-repeat: repeat-x;
}
.ImagineAdministrator td.row2 {
background-image: url('Lien du dégradé 1') !important;
background-position: bottom;
background-repeat: repeat-x;
}
.ImagineModerator td.row1 {
background-image: url('Lien du dégradé 2') !important;
background-position: bottom;
background-repeat: repeat-x;
}
.ImagineModerator td.row2 {
background-image: url('Lien du dégradé 2') !important;
background-position: bottom;
background-repeat: repeat-x;
}
.ImagineDesigner td.row1 {
background-image: url('Lien du dégradé 3') !important;
background-position: bottom;
background-repeat: repeat-x;
}
.ImagineDesigner td.row2 {
background-image: url('Lien du dégradé 3') !important;
background-position: bottom;
background-repeat: repeat-x;
}In cod, zona "bottom right" indica faptul ca situarea codului va fi in partea dreapta jos, adica in coltul postarii.
Inlocuiti "imaginea de fundal" cu url-ul imaginii voastre, care doriti sa se afiseze. Imaginea trebuie sa aiba marimea de 1428*461 pixelis pentru a se afisa corect.
Daca doriti sa modificati numele clasei din CSS, o puteti face, modificand aceasta zona din codul Javascript:
Cod:
.addClass('ImagineAdministrator');Forumgratuit va pune la dispozitie o gama variata de imagini pentru mesajele staff-ului, disponibile aici.Sursa: ForumGratuit.Ro
Tutorial scris de Keir.
Cu stima, Braga Catalin ~> fraNNNta - Design