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.

Propria paleta de culori

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Propria paleta de culori

Mesaj Scris de Cassius Dio Dum Iul 28, 2013 4:13 pm

Propria paleta de culori

Bun gasit! Foarte fericit

1. Introducere:

Idee Acest tutorial va permite sa creati propriul set de culori pentru a putea fi utilizat in cadrul forumului. Setul de culori are un design unic care va permite sa alegeti culorile in functie si de luminozitatea acestora, asa cum, pe vertical, culorile incep de la unele mai inchise si continua in jos cu unele mai deschise la culoare. Actualele culori pot fi modificate, sau completate, daca este cazul. Aceste actiuni insa, nu sunt recomandate decat pentru utilizatorii ma experimentati in coduri HTML si JavaScript. Efectul tutorialului va fi disponibil pentru orice versiune de forum, atat in casuta de raspuns rapid, cat si in cadrul raspunsului complex, in modul simplu de editare si in cel WYSIWYG.

Propria paleta de culori Image_23

2. Alegerea paletei de culori:

Pentru ca tutorialul sa functioneze corect, este strict necesar sa alegem tipul de palata de culori care sa ne permita sa aducem modificarile necesare. Asadar, vom vizita:
Panou de Administrare ~> General ~> Mesaje si emailuri ~> Configurare
La rubrica Tipul paletei de culori vom selecta Simpla.

Vom face click pe butonul Inregistrare pentru a salva modificarile efectuate.

3. Instalarea codurilor JavaScript:

Pentru a instala aceste coduri, vom vizita:
Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript
Vom face click pe Creati un nou cod JavaScript, si vom completa rubricile astfel:

  • Titlu: Paleta de culori
  • Amplasare: Toate paginile
  • Cod JavaScript: Adaugam codul de mai jos...

Cod:
$(function(){$(function(){

   if ($("#text_editor_textarea").length != 0) {
     $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
       var mColorBasic = [],
         html = $('<div />');
        
// inceput lista culori - puteti adauga propriile culori
      
       mColorBasic["negru"] = "#000000";
       mColorBasic["albastru inchis"] = "#00008B";
       mColorBasic["teal"] = "#008080";
       mColorBasic["verde inchis"] = "#006400";
       mColorBasic["indigo"] = "#4B0082";
       mColorBasic["purpuriu"] = "#DC143C";
       mColorBasic["portocaliu"] = "#FF4500";
       mColorBasic["maro"] = "#663300";

       mColorBasic["gri inchis"] = "#666666";
       mColorBasic["albastru regal"] = "#4169E1";
       mColorBasic["turcoaz inchis"] = "#00CED1";
       mColorBasic["verde"] = "#008000";
       mColorBasic["violet"] = "#9400D3";
       mColorBasic["rosu"] = "#FF0000";
       mColorBasic["oranj"] = "#FF9933";
       mColorBasic["sienna"] = "#A0522D";

       mColorBasic["gri deschis"] = "#D3D3D3";
       mColorBasic["albastru ceruleum"] = "#87CEEB";
       mColorBasic["cyan"] = "#00FFFF";
       mColorBasic["lime"] = "#32CD32";
       mColorBasic["orhidee"] = "#DA70D6";
       mColorBasic["somon"] = "#FA8072";
       mColorBasic["auriu"] = "#FFD700";
       mColorBasic["peru"] = "#CD853F";

       mColorBasic["alb"] = "#ffffff";
       mColorBasic["turcoaz deschis"] = "#AFEEEE";
       mColorBasic["verde acvamarin"] = "#7FFFD4";
       mColorBasic["verde deschis"] = "#98FB98";
       mColorBasic["roz"] = "#FFC0CB";
       mColorBasic["piersic deschis"] = "#FFDAB9";
       mColorBasic["galben"] = "#FFFF00";
       mColorBasic["lemniu"] = "#DEB887";
      
// sfarsit lista culori
      
       for(key in mColorBasic) html.append('<div class="color-option" title="' + key + '"><span color="' + mColorBasic[key] + '" style="background-color: ' + mColorBasic[key] + ' !important;"></span></div>');
      
       html.find('span').click(function(e) {
         callback($(this).attr('color'));
         editor.closeDropDown(true);
         e.preventDefault();
       });
      
       editor.createDropDown(caller, "color-picker", html);
     }    
   }
})});
Pentru a adauga o noua culoare, vom adauga o line de cod conform urmatorului model:
Cod:
mColorBasic["nume culoare"] = "#cod culoare";
- in loc de nume culoare adaugati numele culorii pe care doriti s-o creati;
- in loc de #cod culoare adaugati codul culorii pe care doriti s-o creati.

Exclamare Va rugam sa evitati aceste modificari daca nu sunteti experimentat in coduri HTML si JavaScript. Orice mica greseala poate duce la o afisare eronata a paginii. Daca aveti cunostinte in domeniu, asigurati-va de corectitudinea scrierii codurilor.

Dupa ce am efectuat modificarile necesare, le salvam facand click pe butonul Valideaza.

4. Instalarea codurilor CSS:

Pentru a instala, in final, codurile CSS, vom vizita:
Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS
Pentru ca sa nu intalnim erori de afisare si sa obtinem aspectul prezentat la primul pas, vom adauga urmatorul cod:
Cod:
/* paleta de culori personalizata */

.color-option {
display: inline-block !important;
width: 15px !important;  /* latimea iconitei unei culori */
height: 15px !important;  /* latimea iconitei unei culori */
border: 2px solid #fff !important;  /* chenarul din jurul unei iconite */
margin: 3px !important;   /* spatiul dintre iconite */
box-shadow: 0 0 2px #778899;   /* umbra unei iconite */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important;  /* latimea iconitei unei culori */
height: 15px !important;  /* inaltimea iconitei unei culori */
}
.color-option, .color-option span {
border-radius: 2px;  /* colturi rotunjite */  
}

/* paleta de culori - de latimea acesteia depinde cate culori vor fi adaugate pe fiecare rand in parte */
.sceditor-dropdown.sceditor-color-picker {
width: 200px !important;  /* latimea paletei de culori */
height: 100px !important;  /* inaltimea paletei de culori */
padding: 5px !important;
border-radius: 5px !important;
}
Facem click pe butonul Valideaza.

Atata tot! Noroc
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

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum