Iconite pentru utilizatori in functie de grupul din care fac parte

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Iconite pentru utilizatori in functie de grupul din care fac parte

Mesaj Scris de Cassius Dio la data de Joi 25 Iul - 22:02

Iconite pentru utilizatori in functie de grupul din care fac parte

Bun gasit! Foarte fericit

1. Introducere:

Sageată Cu scopul de a va oferi servicii cat mai calitative si facilita optiunile platformei Forumgratuit.ro, va vom prezenta un alt tutorial cu ajutorul caruia veti avea ocazia sa plasati iconite membrilor in functie de grupul din care acestia fac parte. Aplicarea automata a pictogramelor in fata numelor de utilizator se va baza exclusiv pe culoarea grupurilor.

2. Verificarea grupurilor:

Sageată Avand in vedere faptul ca codul functioneaza pe baza culorii grupurilor, trebuie sa verificati mai intai codurile HEX a acestor grupuri. Pentru a face acest lucru, vizitati:
Panou de Administrare ~> Utilizatori & Grupuri ~> Grupuri ~> Administrarea Grupurilor
Alegeti grupurile membrii carora vor purta cate o iconita in fata numelui.

Sa presupunem ca doriti sa aplicati iconitele membrilor grupurilor Moderatori si Administatori. Deschideti aceste grupuri in tab-uri noi, si copiati culorile lor (cu tot cu #).
Atentie: Pentru ca tutorialul sa aiba efect, verificati sa fie bifata casuta Da de la rubrica Aplicati culoarea, membrilor acestui grup?.

Exemplu grupul Administratori:


Exemplu grupul Moderatori:


Asadar, odata ce ati aflat culorile acestora puteti trece la urmatoare etapa.

3. Adaugarea codurilor JavaScript:

Sageată Pentru adaugarea codurilor JavaScript, va trebui sa vizitati:
Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript
Faceti click pe butonul Creati un nou cod JavaScript.

Completati rubricile ce urmeaza astfel:

  • Titlu: Iconite automate
  • Amplasare: Toate paginile
  • Cod JavaScript: Adaugati codul de mai jos...

Cod:
$(function(){
  var iconoNickPorColorGrupo = new Array();

  //########## ZONA EDITABLE ################################################################################

  var anchoIconoDeNick = 16; // <-- Marimea in pixeli a iconitelor

  iconoNickPorColorGrupo["#D12E2E"] = "http://i83.servimg.com/u/f83/17/45/19/77/corona10.png"; // <-- De exemplu Grupul de Administratori

  iconoNickPorColorGrupo["#18A81D"] = "http://i83.servimg.com/u/f83/17/45/19/77/star10.png"; // <-- De exemplu Grupul de Moderatori

  //########## FIN ZONA EDITABLE ############################################################################
  
  $("a[href^='/u']>span").each(function(index){      
      var strstyle = $(this).attr("style");      
      if(strstyle != undefined) {
        var strcolor = strstyle.split(":")[1];
        if(iconoNickPorColorGrupo[strcolor]) {
        $(this).closest("a[href^='/u']")
            .css({"background": "url(" + iconoNickPorColorGrupo[strcolor] + ") no-repeat left", "padding-left": (anchoIconoDeNick+1) + "px", "display": "inline-block"});
        }
      }
  });
});

4. Modificarea codurilor:

Sageată In continuare veti invata cum sa modificati codurile astfel incat sa puteti adauga orice iconita oricarui grup doriti. Va rog sa cititi cu atentie ce scrie mai jos.

  • anchoIconoDeNick = 16 Aceasta variabila defineste marimea in pixeli a iconitelor pe care doriti sa le atribuiti. Indiferent de marimile originale a imaginilor, aceasta le va redimensiona conform numarului ales si va genera spatiul necesar intre numele de utilizator si iconita pentru a nu se intercala.
  • iconoNickPorColorGrupo["#D12E2E"] = "http://i83.servimg.com/u/f83/17/45/19/77/corona10.png" Variabilile scrise sub aceasta forma sunt nu altceva decat alegerea iconitelor pentru membrii grupurilor cu anumite culori. Aceasta, de exemplu, adauga o coroana pentru membrii grupului de culoarea #D12E2E. Daca ati ales culorile grupurilor ca cele prezentate la pasul 2, acestia vor fi membrii grupului de Administratori.

In aceasta ordine de idei, nu trebuie decat sa inlocuiti culorile hexadecimale (HEX) cu cele ale grupurilor, iar adresele imaginilor cu cele dorite de dumneavoastra. In cazul in care doriti sa definiti iconite pentru membrii mai multor grupuri pur si simplu adaugati, sub aceasta forma, o noua variabila:
Cod:
iconoNickPorColorGrupo["#CULOARE"] = "ADRESA IMAGINE";
Doar adaugati culoarea valida a unui grup si adresa imaginii care doriti s-o atribuiti membrilor grupului respectiv. Asadar, in loc de:
Cod:
  //########## ZONA EDITABLE ################################################################################

  var anchoIconoDeNick = 16; // <-- Marimea in pixeli a iconitelor

  iconoNickPorColorGrupo["#D12E2E"] = "http://i83.servimg.com/u/f83/17/45/19/77/corona10.png"; // <-- De exemplu Grupul de Administratori

  iconoNickPorColorGrupo["#18A81D"] = "http://i83.servimg.com/u/f83/17/45/19/77/star10.png"; // <-- De exemplu Grupul de Moderatori

  //########## FIN ZONA EDITABLE ############################################################################
veti obtine:
Cod:
  //########## ZONA EDITABLE ################################################################################

  var anchoIconoDeNick = 16;

  iconoNickPorColorGrupo["#D12E2E"] = "http://i83.servimg.com/u/f83/17/45/19/77/corona10.png";

  iconoNickPorColorGrupo["#18A81D"] = "http://i83.servimg.com/u/f83/17/45/19/77/star10.png";

  iconoNickPorColorGrupo["#CULOARE"] = "ADRESA IMAGINE";

  //########## FIN ZONA EDITABLE ############################################################################

Ati reusit! sunny 
Tutorial scris de Turbodeif, tradus de Cassius Dio

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.
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Multumiri : 83
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