Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.
Forum gratuit: forum de suport al utilizatorilor

Forum gratuit: ajutor și asistență pentru utilizatorii Forumgratuit. Creează și administrează un forum performant. Descoperă funcţionalităţile, tutorialele și ponturile de pe Forumul de suport!

Imagine de fundal pentru mesajele staff-ului

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Imagine de fundal pentru mesajele staff-ului

Mesaj Scris de Keir Dum Sept 09, 2012 12:15 pm

Imagine de fundal pentru mesajele staff-ului(phpBB3)

Salutare tuturor Salut!,

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 imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Utilizatori si grupuri imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Ranguri imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Administrarea rangurilor
Facem click pe  butonul Modificare sau "Adauga un nou rang".
In rubrica "Titlul rangului:" inseram acest cod:
Cod:
<span class="Administrator">Administrator</span>

imagine - Imagine de fundal pentru mesajele staff-ului 09615175839Dvs. 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.


imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Pentru 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 imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Module imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 HTML si JAVASCRIPT  imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Gestiunea codurilor Javascript

imagine - Imagine de fundal pentru mesajele staff-ului 09615175839Inainte 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 "Adauga 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().parent().parent().addClass('ImagineAdministrator');
});

Apasam pe "Valideaza".

Am ajuns si la ultima etapa, adaugarea codului CSS pentru afisarea imaginii de fundal.
Mergem catre:
Panou de Administrare imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Afisare imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Imagini si culori  imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Culori imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Foaie de stil CSS
Adaugam acest cod in casuta cea mare:
Cod:
        div.ImagineAdministrator {
          background-image: url("imaginea de fundal");
          background-position: bottom right;
        }
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');

imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Forumgratuit va pune la dispozitie o gama variata de imagini pentru mesajele staff-ului, disponibile aici.


Numai bine! Noroc


Tutorial realizat de Keir, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit
Keir

Keir
Membru onorific
Membru onorific

Mesaje : 6632
Varsta : 26
Localizare : Buzau
Data înscrierii : 28/12/2011
Mulțumiri : 68
Internet Explorer phpBB3

http://neotalk.wikiforum.ro/
Keir a fost mulțumit de autorul acestui subiect.

Tutorial Re: Imagine de fundal pentru mesajele staff-ului

Mesaj Scris de Keir Dum Sept 09, 2012 8:38 pm

Imagine de fundal pentru mesajele staff-ului(phpBB2)



Salutare tuturor Salut!,

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 imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Utilizatori si grupuri imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Ranguri imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Administrarea rangurilor
Facem click pe butonul Modificare sau "Adauga un nou rang".
In rubrica "Titlul rangului:" inseram acest cod:
Cod:
<span class="Administrator">Administrator</span>

imagine - Imagine de fundal pentru mesajele staff-ului 09615175839Dvs. 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.


imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Pentru 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 imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Module imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 HTML si JAVASCRIPT imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Gestiunea codurilor Javascript

imagine - Imagine de fundal pentru mesajele staff-ului 09615175839Inainte 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 "Adauga 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".

imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Puteti 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 imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Afisare imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Imagini si culori imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Culori imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Foaie de stil CSS
Adaugam 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;
        }

imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Daca 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');

imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Forumgratuit va pune la dispozitie o gama variata de imagini pentru mesajele staff-ului, disponibile aici.



Tutorial realizat de Keir, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit

Keir

Keir
Membru onorific
Membru onorific

Mesaje : 6632
Varsta : 26
Localizare : Buzau
Data înscrierii : 28/12/2011
Mulțumiri : 68
Internet Explorer phpBB3

http://neotalk.wikiforum.ro/
Keir a fost mulțumit de autorul acestui subiect.

Tutorial Re: Imagine de fundal pentru mesajele staff-ului

Mesaj Scris de Cassius Dio Mier Mai 08, 2013 10:56 am

Imagine de fundal pentru mesajele staff-ului(PunBB)


Salutare tuturor Salut!,

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 imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Utilizatori si grupuri imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Ranguri imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Administrarea rangurilor
Facem click pe butonul Modificare sau "Adauga un nou rang".
In rubrica "Titlul rangului:" inseram acest cod:
Cod:
<span class="Administrator">Administrator</span>

imagine - Imagine de fundal pentru mesajele staff-ului 09615175839Dvs. 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.


imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Pentru 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 imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Module imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 HTML si JAVASCRIPT imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Gestiunea codurilor Javascript

imagine - Imagine de fundal pentru mesajele staff-ului 09615175839Inainte 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 "Adauga 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').closest('.post').addClass('ImagineAdministrator');
        });

Apasam pe "Valideaza".

imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Puteti adauga mai multe linii in codul Javascript, astfel sa faceti efectul si pentru alte rang-uri/grupe, spre exemplu:


Cod:
$(function() {
        $('.Administrator').closest('.post').addClass('ImagineAdministrator');
        $('.Moderator').closest('.post').addClass('ImagineModerator');
        $('.Designer').closest('.post').addClass('ImagineDesigner');
        });

Am ajuns si la ultima etapa, adaugarea codului CSS pentru afisarea imaginii de fundal.
Mergem catre:
Panou de Administrare imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Afisare imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Imagini si culori imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Culori imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Foaie de stil CSS
Adaugam acest cod in casuta cea mare:
Cod:
        .ImagineAdministrator .postmain {
        background-image: url('Lien du dégradé 1') !important;
        background-position: bottom;
        background-repeat: repeat-x;
        }

imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Daca ati modificat codul Javascript, punand-ul pe cel cu mai multe linii, acum, in loc de acest cod CSS, veti avea:


Cod:
      .ImagineAdministrator .postmain {
        background-image: url('Lien du dégradé 1') !important;
        background-position: bottom;
        background-repeat: repeat-x;
        }
       
        .ImagineModerator .postmain {
        background-image: url('Lien du dégradé 2') !important;
        background-position: bottom;
        background-repeat: repeat-x;
        }
       
        .ImagineDesigner .postmain {
        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');



Tutorial realizat de Keir, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit
Cassius Dio

Cassius Dio
Membru onorific
Membru onorific

Mesaje : 10826
Varsta : 26
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Mulțumiri : 84
Internet Explorer phpBB3

http://beatles.forummo.com/
Cassius Dio a fost mulțumit de autorul acestui subiect.

Tutorial Re: Imagine de fundal pentru mesajele staff-ului

Mesaj Scris de Cassius Dio Mier Mai 08, 2013 11:04 am

Imagine de fundal pentru mesajele staff-ului(Invision)



Salutare tuturor Salut!,

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 imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Utilizatori si grupuri imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Ranguri imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Administrarea rangurilor
Facem click pe butonul Modificare sau "Adauga un nou rang".
In rubrica "Titlul rangului:" inseram acest cod:
Cod:
<span class="Administrator">Administrator</span>

imagine - Imagine de fundal pentru mesajele staff-ului 09615175839Dvs. 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.


imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Pentru 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 imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Module imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 HTML si JAVASCRIPT imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Gestiunea codurilor Javascript

imagine - Imagine de fundal pentru mesajele staff-ului 09615175839Inainte 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 "Adauga 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').closest('.post').addClass('ImagineAdministrator');
        });

Apasam pe "Valideaza".

imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Puteti adauga mai multe linii in codul Javascript, astfel sa faceti efectul si pentru alte rang-uri/grupe, spre exemplu:


Cod:
$(function() {
        $('.Administrator').closest('.post').addClass('ImagineAdministrator');
        $('.Moderator').closest('.post').addClass('ImagineModerator');
        $('.Designer').closest('.post').addClass('ImagineDesigner');
        });

Am ajuns si la ultima etapa, adaugarea codului CSS pentru afisarea imaginii de fundal.
Mergem catre:
Panou de Administrare imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Afisare imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Imagini si culori imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Culori imagine - Imagine de fundal pentru mesajele staff-ului Arrow10 Foaie de stil CSS
Adaugam acest cod in casuta cea mare:
Cod:
        .ImagineAdministrator .post-container {
        background-image: url('Lien du dégradé 1') !important;
        background-position: bottom;
        background-repeat: repeat-x;
        }

imagine - Imagine de fundal pentru mesajele staff-ului 09615175912Daca ati modificat codul Javascript, punand-ul pe cel cu mai multe linii, acum, in loc de acest cod CSS, veti avea:


Cod:
      .ImagineAdministrator .post-container {
        background-image: url('Lien du dégradé 1') !important;
        background-position: bottom;
        background-repeat: repeat-x;
        }
       
        .ImagineModerator .post-container {
        background-image: url('Lien du dégradé 2') !important;
        background-position: bottom;
        background-repeat: repeat-x;
        }
       
        .ImagineDesigner .post-container {
        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');




Tutorial realizat de Keir, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit
Cassius Dio

Cassius Dio
Membru onorific
Membru onorific

Mesaje : 10826
Varsta : 26
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Mulțumiri : 84
Internet Explorer phpBB3

http://beatles.forummo.com/
Cassius Dio a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum