Crearea unui panou pentru chatbox

Scris de Cassius Dio Mar Mar 05, 2013 1:24 pm

Crearea unui panou pentru chatbox

Acest tutorial va explica cum puteti adauga un panou lateral in care puteti plasa chatbox-ul forumlui.

^{Codul pentru chatbox:}

- Pentru pozitionarea panoului in partea stanga, folositi urmatorul cod:

cod:

- Pentru pozitionarea panoului in partea dreapta, folositi urmatorul cod:

cod:

Asta nu e tot insa, trebuie sa modificati urmatoarele imagini:
https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png - "Deschide";
https://i.servimg.com/u/f81/11/21/85/73/fermer10.png - "Inchide".
Inlocuiti link-urile acestor imagini din codul JavaScript de mai sus. Atentie mare la editarea codului, sa nu stergeti in plus ghilimelele sau alte caractere prezente in cod.

Exemple:

Rezultat:
- cind panoul este inchis:
Crearea unui panou pentru chatbox 2bqHEAa

- cind panoul este deschis:
Crearea unui panou pentru chatbox RdHuVCD

^{Adaugarea propriului continut in acest panou:}

Daca doriti sa adaugati orice alt continut in loc de chatbox-ul de mai sus, puteti folosi unul dintre codurile de mai jos.

- Pentru pozitionarea panoului in partea stanga, folositi urmatorul cod:

cod:

- Pentru pozitionarea panoului in partea dreapta, folositi urmatorul cod:

cod:

Tot ce trebuie sa faceti este sa inlocuiti "Text" cu orice continut doriti: text, imagini, link-uri, coduri etc.

^{Personalizarea panoului:}

Puteti modifica oricand panoul cu ajutorul unor coduri CSS in cazul in care doriti sa faceti acest lucru.

- Schimbarea latimii si inaltimii acestuia:

Cod:: #panneau{ width: 800px !important; height: 400px !important; }

width = latime; height = inaltime. Modificati valorile in pixeli.

- Schimbarea culorii sau imaginii de fundal:

Cod:: .panoufix{ background-color: #FFF !important; background-image: url(Link imagine) !important; }

Inlocuiti #FFF cu o culoare hexadecimala; si Link imagine cu adresa URL a imaginii de fundal dorite.

- Schimbarea pozitiei:

Cod:: .panoufix{ bottom: 10px !important; }

10px defineste in acest caz spatiul gol lasat din jos in sus. Modificati valoarea in pixeli pentru un spatiu mai mare sau mai mic.

- Schimbarea culorilor textului:

Cod:: .panoufix{ color: #333 !important; }

Inlocuiti #333 cu o culoare hexadecimala.

Pentru functionalitatea codurilor CSS de mai sus trebuie sa adaugati urmatorul cod in Gestiunea codurilor JavaScript (pe langa cele de mai sus):

Cod:: $(document).ready(function(){ $('#panneau').parent().parent().parent().parent().addClass('panoufix'); });

^{Instalarea codurilor:}

Codurile CSS se adauga in:

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

Codurile JavaScript se adauga in:

Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript