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!

Data/ora curentă este: Dum Apr 28, 2024 1:41 pm

2 rezultate gasite pentru COD

Propria paleta de culori

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.

Tag cod pe Forum gratuit: forum de suport al utilizatorilor 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

Tutorial realizat de Cassius Dio, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit
Scris de Cassius Dio
la data de Dum Iul 28, 2013 4:13 pm
 
Cauta in: Tutoriale
Subiect: Propria paleta de culori
Raspunsuri: 0
Vizualizari: 7732

Personalizarea selectiei de text

Personalizarea selectiei de  text

Doriti sa va schimbati culoarea selectiei de text pe forumul dumneavoastra?
Acum puteti s-o personalizati cum doriti!

   Ce este selectia de text?
   Daca nu recunoasteti termenul, selectia de text (in stare nemodificata) este aceasta:
   Tag cod pe Forum gratuit: forum de suport al utilizatorilor Select10
   Puteti sa-i schimbati culorile cum doriti, ca in exemplul de mai jos:
   Tag cod pe Forum gratuit: forum de suport al utilizatorilor Schimb10
   
Cum fac asta?

Disponibil pentru toate versiunile de forum !

   Mai intai, navigam catre foaia de stil CSS:
   
Tag cod pe Forum gratuit: forum de suport al utilizatorilor Go-jum10Panou de administrare Tag cod pe Forum gratuit: forum de suport al utilizatorilor Arrow10Afisare Tag cod pe Forum gratuit: forum de suport al utilizatorilor Arrow10Tag cod pe Forum gratuit: forum de suport al utilizatorilor Images_couleursImagini si culori Tag cod pe Forum gratuit: forum de suport al utilizatorilor Arrow10Culori Tag cod pe Forum gratuit: forum de suport al utilizatorilor Arrow10Foaie de stil CSS

   Si lipiti in foaie urmatorul cod:
   
Cod:
::selection      { background:#COD CULOARE HEX; color:#fff; /* Chrome, Safari si Opera */ }
::-moz-selection { background:#COD CULOARE HEX; color:#fff; /* Firefox */ }

   
Cum il personalizez?

   Dumneavoastra trebuie sa modificati doar codurile ingrosate de mai jos, punand culoarea dorita sub forma de cod hexadecimal.
   
Tag cod pe Forum gratuit: forum de suport al utilizatorilor Page_c10::selection      { background:{#}COD{/#} CULOARE HEX; color:{#}fff{/#}; /* Chrome, Safari si Opera */ }
   ::-moz-selection { background:{#}COD{/#} CULOARE HEX; color:{#}fff{/#}; /* Firefox */ }

   {#}COD{/#} CULOARE HEX - reprezinta culoarea fundalului selectiei (acel rosu inchis in exemplul de mai sus).
   {#}fff{/#} - reprezinta culoarea textului selectat (alb in exemplu).

   Succes!  Noroc


Tutorial realizat de Cosmin.., actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit
Scris de Cosmin..
la data de Vin Apr 20, 2012 10:43 pm
 
Cauta in: Tutoriale
Subiect: Personalizarea selectiei de text
Raspunsuri: 0
Vizualizari: 4778

Sus

Mergi direct la: