Scris de Cassius Dio Dum Iul 28, 2013 4:13 pm
Bun gasit! 
1. Introducere:
 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.
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.
 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! 
|
Acasa
Propria paleta de culori
Subiecte similare