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.

Crearea unui panou pentru chatbox

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Crearea unui panou pentru chatbox

Mesaj 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.

chatbox - Crearea unui panou pentru chatbox A7DjKrf 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:
chatbox - Crearea unui panou pentru chatbox 2bqHEAa

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

chatbox - Crearea unui panou pentru chatbox A7DjKrf 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.

chatbox - Crearea unui panou pentru chatbox A7DjKrf 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');
});

chatbox - Crearea unui panou pentru chatbox A7DjKrf 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

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