Personalizarea barei de instrumente

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Personalizarea barei de instrumente

Mesaj Scris de Ina la data de Joi 21 Feb - 21:37

Personalizarea barei de instrumente


Bara de instrumente este un modul optional. Despre activarea si functionalitatile pe care vi le ofera, va invitam sa cititi acest tutorial:
http://help.forumgratuit.ro/t40866-functionarea-barei-de-instrumente-si-a-notificarilor

1. Personalizarea cu ajutorul codurilor CSS

Unde adaugam codurile CSS?

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

Puteti folosi unul sau mai multe coduri in acelasi timp, sau puteti combina mai multe coduri care modifica acelasi element.

Coduri CSS:

  • Personalizati aspectul barei de instrumente

    1. Personalizati culoarea de fundal a barei:
      cod:

      Cod:
      #fa_toolbar, #fa_toolbar_hidden {background-color: #xxxxxx !important;}
      Inlocuiti #xxxxxx cu un cod hexadecimal de culoare
    2. Adaugati o imagine de fundal barei de instrumente:
      cod:

      Cod:
      #fa_toolbar, #fa_toolbar_hidden {background: url('http://image_url');}
      http://image_url trebuie inlocuit cu un link catre imaginea de fundal. Dimensiuni recomandate: inaltime 30px si o latime fie destul de mica, incit sa se repete pe orizontala, fie destul de mare incit sa nu se repete indiferent de rezolutia ecranului (ex: 2000x30px)
    3. Schimbati aspectul textului pentru ansamblul link-urilor barei de instrumente:
      cod:

      Cod:
      #fa_toolbar {
      font-size: 14px!important;
      color:#xxxxxx !important;
      font-family:NUME_FONT !important;
      text-shadow:1px 1px 0px #AAAAAA !important;
      font-weight: 900}
      Inlocuiti #xxxxxx cu un cod hexadecimal de culoare care va fi culoarea textelor, NUME_FONT cu denumirea fontului dorit (ex: Arial), font-size cu dimensiunea dorita, la font-weight puteti schimba tipul caracterelor (bold) iar text_shadow va aplica o umbra tuturor textelor. Configurati dimensiunea si culoarea umbrei, schimbind dimensiunile in pixeli si inlocuind #AAAAAA cu un cod hexadecimal de culoare.
    4. Personalizati culoarea de fundal a sagetii care afiseaza/ascunde bara:
      cod:

      Cod:
      #fa_toolbar_hidden {
        background-color: #xxxxxx !important;
      }
      Inlocuiti #xxxxxx cu un cod hexadecimal de culoare
    5. Adaugati o imagine de fundal sagetii care afiseaza/ascunde bara:
      cod:

      Cod:
      #fa_toolbar_hidden {
        background-image: url("http://image_url") !important;
      }
      http://image_url trebuie inlocuit cu un link catre imaginea de fundal a sagetii. Dimensiuni recomandate: 30x30 px.

    6. Inlocuiti sageata de afisare/ascundere a barei
      cod:

      Cod:
      #fa_toolbar #fa_hide {
        background-image: url("LINK_SAGEATA_IN_SUS") !important;
        background-position: 0 0 !important;
      }
      #fa_toolbar_hidden #fa_show {
        background-image: url("LINK_SAGEATA_IN_JOS") !important;
        background-position: 0 0 !important;
      }
      Inlocuiti LINK_SAGEATA_IN_SUS cu link-ul direct al imaginii pentru sageata in sus si LINK_SAGEATA_IN_JOS cu link-ul direct al imaginii pentru sageata in jos. Ambele imagini trebuie sa aiba exact 30x30 pixeli.
      ->


  • Personalizati caseta de cautare

    1. Schimbati culoarea de fundal a casetei de cautare:
      cod:

      Cod:
      #fa_search #fa_textarea {
        background-color: #xxxxxx;
      }
      Inlocuiti #xxxxxx cu un cod de culoare hexadecimal
    2. Adaugati o imagine de fundal casetei de cautare:
      cod:

      Cod:
      #fa_search #fa_textarea {
        background-image: url("http://image_url");
      }
      Inlocuiti http://image_url cu link-ul imaginii de fundal. Dimensiuni recomandate: 200x24 px.

    3. Schimbati culoarea textului din caseta de cautare:
      cod:

      Cod:
      #fa_search #fa_textarea {
        color: #xxxxxx;
      }
      Inlocuiti #xxxxxx cu un cod de culoare hexadecimal
    4. Ascundeti complet caseta de cautare :
      cod:

      Cod:
      #fa_search {
      display: none !important;
      }
    5. Ascundeti lupa din caseta de cautare:
      cod:

      Cod:
      #fa_search #fa_magnifier {
        background-image: none !important;
      }
    6. Schimbati imaginea lupei:
      cod:

      Cod:
      #fa_search #fa_magnifier {
        background-image: url("http://image_url") !important;
      }
      Inlocuiti http://image_url cu link-ul imaginii pentru lupa. Dimensiuni recomandate: max 30x30 px.



  • Personalizati meniurile barei de instrumente

    1. Eliminati complet meniul "Distribuiti":
      cod:

      Cod:
      #fa_toolbar #fa_share {
        display: none !important;
      }
    2. Eliminati unul sau mai multe butoane din meniul "Distribuiti":
      cod:

      Cod:
      #fa_toolbar #fa_fb {
        display: none !important;
      }
      Inlocuiti #fa_fb functie de butonul pe care doriti sa-l ascundeti. Codurile pentru butoanele meniului, de la stinga la dreapta: #fa_fb = Facebook, #fa_twitter = Twitter, #fa_gp = Google+, #fa_mail = e-mail, #fa_rss = flux RSS
    3. Schimbati culoarea textului doar pentru "Distribuiti"
      cod:

      Cod:
      #fa_share #fa_share_text {
        color: #xxxxxx;
      }
      Inlocuiti #xxxxxx cu un cod de culoare hexadecimal
    4. Colorati numarul de notificari primite:
      cod:

      Cod:
      #fa_toolbar #notif_unread {
        color: #xxxxxx !important;
        font-weight: 900;
        margin-left: 3px;
      }
      Inlocuiti #xxxxxx cu un cod de culoare hexadecimal
    5. Colorati meniurile "Bine ati venit" si "Notificari"
      cod:

      Cod:
      #fa_right.welcome #fa_menu #fa_welcome, #fa_right.notification > #fa_notifications {
        background-color: #xxxxxx !important;
        color: #yyyyyy !important;
      }
      #xxxxxx este culoarea fundalului si #yyyyyy este culoarea textului. Ele nu trebuie sa fie identice, altfel nu veti mai vedea textul.
      Ex: devine
    6. Adaugati o culoare de fundal link-urilor din meniurile derulante "Bine ati venit" si "Notificari"
      cod:

      Cod:
      #fa_toolbar #fa_menulist {
        background-color: #xxxxxx;
      }
      #xxxxxx este codul hexadecimal al culorii dorite.
    7. Schimbati culoarea textelor din meniurile derulante "Bine ati venit" si "Notificari"
      cod:

      Cod:
      #fa_toolbar #fa_menulist a {
        color: #xxxxxx !important;
      }
      #xxxxxx este codul hexadecimal al culorii dorite.
    8. Schimbati culoarea de fundal a listei de notificari primite:
      cod:

      Cod:
      #fa_toolbar #fa_right #notif_list {
        background-color: #xxxxxx !important;
      }
      #xxxxxx este codul hexadecimal al culorii dorite.
    9. Schimbati culoarea de fundal doar pentru notificarile necitite:
      cod:

      Cod:
      #fa_toolbar #fa_right #notif_list .unread {
        background-color: #xxxxxx !important;
      }
      #xxxxxx este codul hexadecimal al culorii pentru fundal.
    10. Culori diferite ale scrisului pentru notificarile citite si cele noi:
      cod:

      Cod:
      #fa_toolbar #fa_right #notif_list li .contentText {
        color: #xxxxxx;
      }
      #fa_toolbar #fa_right #notif_list li.unread .contentText {
        color: #yyyyyy;
      }
      #xxxxxx este culoarea textului pentru notificarile citite, iar #yyyyyy este culoarea textului notificarilor noi.
    11. Culori diferite ale link-urilor pentru notificarile citite si cele noi:
      cod:

      Cod:
      #fa_toolbar #fa_right #notif_list li div.contentText.ellipsis a {
        color: #xxxxxx !important;
      }
      #fa_toolbar #fa_right #notif_list li.unread div.contentText.ellipsis a {
        color: #yyyyyy !important;
      }
      #xxxxxx este culoarea link-urilor pentru notificarile citite, iar #yyyyyy este culoarea link-urilor notificarilor noi.
    12. Inlocuiti imaginea pentru stergerea din lista a notificarilor citite
      cod:

      Cod:
      #fa_toolbar #fa_right #notif_list li a.delete {
        background-image: url("LINK_IMAGINE") !important;
        background-position: 0 0 !important;
      }
      Inlocuiti LINK_IMAGINE cu link-ul direct al imaginii dorite. Imaginea trebuie sa aiba maxim 20x20 px.
      Ex: In loc de vom avea


  • Personalizarea ferestrei flotante a notificarilor


    1. Modificati culoarea de fundal si transparenta:
      cod:

      Cod:
      #live_notif .fa_notification {
        background-color: #xxxxxx !important;
        opacity: 0.8 !important;
      }
      #xxxxxx trebuie inlocuit cu un cod hexadecimal de culoare, iar transparenta o modificati schimbind cifrele pentru opacity cu un numar cuprins intre 0 (invizibila) si 1 (fara transparenta) - ex: daca in loc de 0.8 veti scrie 0.5, fereastra va deveni mai transparenta.
    2. Adaugati o imagine de fundal:
      cod:

      Cod:
      #live_notif .fa_notification {
        background-color: transparent !important;
        background-image: url("LINK_IMAGINE") !important;
        opacity: 1 !important;
      }
      Inlocuiti LINK_IMAGINE cu link-ul direct al imaginii de fundal. Dimensiune recomandata: 330x60 px. Daca doriti o fereastra semitransparenta, va trebui sa folositi o imagine tip .png semitransparenta.
    3. Modificati culoarea link-urilor si a textului
      cod:

      Cod:
      #live_notif .content.ellipsis {
        color: CULOARE_TEXT !important;
      }
      #live_notif .content.ellipsis a {
        color: CULOARE_LINK !important;
      }
      Trebuie doar sa inlocuiti CULOARE_TEXT si/sau CULOARE_LINK folosind  coduri hexadecimale de culoare de forma #xxxxxx
    4. Inlocuiti iconul "info" cu un icon dorit de dumneavoastra:
      cod:

      Cod:
      #live_notif .content.ellipsis {
        background-image: url("LINK_IMAGINE") !important;
      }
      Inlocuiti LINK_IMAGINE cu link-ul direct al imaginii dorite, cu dimensiunea de maxim 32x32 px




2. Personalizarea cu ajutorul codurilor JavaScript

Unde adaugam codurile JavaScript?

Panou de Administrare Module HTML & JAVASCRIPT Gestiunea codurilor JavaScript

Creati un nou JavaScript, alegeti un nume pentru el si la "Amplasare" bifati "Toate paginile".

Coduri JavaScript:

  • Ascundeti bara pentru membri si vizitatori:
    cod:

    Cod:
    $('head').append('<style id="toolbar_style" type="text/css">#fa_toolbar { display: none; }</style>');
    $(window).load(function () {
        if (_userdata.user_level == 0) $('#fa_toolbar').remove();
        else $('#toolbar_style').remove();
    });

  • Inlocuiti textul predefinit al link-urilor din meniul "Bine ati venit":
    cod:

    Cod:
    function changeToolbar(word, replacement) {
        for (var name in word) {
            document.getElementById('fa_menulist').innerHTML = document.getElementById('fa_menulist').innerHTML.replace(RegExp(name, 'g'), word[name]);
        }
    }

    $(window).load(function () {
        changeToolbar({
            'Toate Subiectele': 'Topicuri',
            'Toate Mesajele': 'Mesaje'
        });
    });
    Idee Pentru a inlocui textul a mai multor link-uri, adaugati inainte de acest cod:
    Cod:
            'Toate Mesajele': 'Mesaje'
    inca unul exact la fel, doar cu textul diferit, exemplu:
    Cod:
            'Subiectele urmarite': 'Subiecte monitorizate',
    Structura:
    Cod:
            'TEXT VECHI': 'TEXT NOU',



Tutorial scris de Rideem3 si Günther, tradus de MBeatrice si Ina

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
Ina
Membru activ

feminin

Mesaje : 13738
Varsta : 45
Data īnscrierii : 05/03/2009
Multumiri : 79
Niciun avertisment

http://www.goblenul.com

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum