Bine ati venit pe forumul de suport al Forumgratuit

Pentru a beneficia de tot ceea ce va ofera forumul nostru, va rugam sa va conectati daca sunteti deja membru sau sa va alaturati comunitatii noastre



Creati un forum gratuit ca acesta.

Instalarea unui selector de teme

 :: Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

Instalarea unui selector de teme

Mesaj Scris de ezlidor la data de Sam Mai 15, 2010 4:43 pm

Instalarea unui selector de teme


Indicatii:
- Pentru adaugarea acestui selector e strict necesat detinerea unor cunostinte minime cu privire la limbajele de formare a unui web-site (html, css, php)
- Daca doriti sa modificati codurile, va stafuim sa folositi un fisier Notepad si apoi sa le puneti in template


Obiectiv: Realizand acest tutorial veti putea instala un selector de teme, numarul de teme poate fi stabilit de dvs., iar fiecare membru al forumului (vizitaor/membru/moderator/administrator) poate sa aleaga cum sa se afiseze forumul, dupa bunul plac. Punerea in aplicare a acestui selector necesita urmarea a 3 (trei) pasi:

  • Pasul 1: Pregatirea temelor dorite
  • Pasul 2: Crearea script-ului
  • Pasul 3: Inserarea selectorului pe forumul dvs.


PASUL 1: Pregatirea temelor dorite


Metoda 1: metoda simpla, folosind teme de pe RO.Hitskin.com
Folositi aceasta metoda daca nu cunoasteti limbaj-ul css !

1. Accesati RO.Hitskin.com
2. Alegeti tema care doriti s-o folositi

ATENTIE ! Temele care le adaugati in selector trebuie sa aiba aceiasi versiune cu cea a temei de baza a forumului dvs.


3. Accesati pagina demo a temei respective
4. Copiati ID-ul paginii



5. Accesati adresa paginii css in modul urmator, adaugand-o la adresa forumului dvs.:
Cod:
/141354-ltr.css
http://adresa_forumului_dvs./141354-ltr.css


6. Copiati adresa
Cod:
http://adresa_forumului_dvs./141354-ltr.css

7. Adaugati codul css intr-un fisier Notepad
8. Repetati aceasta manevra pentru toate temele pe care doriti sa le puneti in selectorul dvs.
9. Treceti la PASUL 2


Metoda 2
Folositi aceasta metoda doar daca cunoasteti limbaj-ul css !

1. Deschideti un fisier Notepad in care veti crea codul css
2. Dupa finalizarea codului css, salvati documentul cu extensia .css!
3. Repetati aceasta metoda pentru toate temele pe care doriti sa le faceti

NOTA ! Nu este necesar sa creati de la capat foii css individuale. Puteti copia prima foaie si s-o modificati cu alte culori/imagini.

EXEMPLU: Modificarea culorii de background

In prima tema puteti adauga:
Cod:
body {
background-color:#000000;
}


In a doua tema puteti adauga:
Cod:
body {
background-color:#ca2c2d;
}



4. Incarcati toate foile css pe un server (ex: http://pmsc.free.fr/ sau daca aveti un cont Google Page Creator)
5. Gazduiti fisierele css si notati toate link-urile care vi se ofera.

PASUL 2: Crearea script-ului


1. Creeaza o pagina html



2. Inserati codul de mai jos in continutul paginii HTML si inlocuieste cu link-urile indicate mai sus (la punctul 6 / metoda 1)
Cod:
var type = getCookie('template1');
var temsel = document.getElementById('temsel');
temsel.innerHTML ='<select onchange="changeskin(this.options[this.selectedIndex].value);window.location.reload();"><option> Changer le style </option><option value="valeur1"> Kagamine - Kingyo.Akki </option><option value="valeur2"> School Time - Quierra </option><option value="valeur3"> Web 2.2 rose - Capucine </option></select>';




if (type == 'valeur1')
{
   document.write('<link rel="stylesheet" type="text/css" href="http://adresa_forumului_dvs./141354-ltr.css">');
}
else if (type == 'valeur2')
{
   document.write('<link rel="stylesheet" type="text/css" href="http://adresa_forumului_dvs./141354-ltr.css">');
}
else if (type == 'valeur3')
{
   document.write('<link rel="stylesheet" type="text/css" href="http://adresa_forumului_dvs./141354-ltr.css">');
}


function changeskin(change) {
   var scheme = change;
   var name = 'template1';
   var pathname = location.pathname;
   //var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
   var ExpDate = new Date ();
   ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
   setCookie(name,scheme,ExpDate,'/');
}
function getCookie(name){
   var cname = name + "=";
   var dc = document·cookie;
   if (dc.length > 0) {
      begin = dc.indexOf(cname);
      if (begin != -1) {
         begin += cname.length;
         end = dc.indexOf(";", begin);
         if (end == -1) end = dc.length;
         return unescape(dc.substring(begin, end));
      }
   }
   return null;
}
function setCookie(name, value, expires, path, domain, secure) {
   document·cookie = name + "=" + escape(value) +
   ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
   ((path == null) ? "" : "; path=" + path) +
   ((domain == null) ? "" : "; domain=" + domain) +
   ((secure == null) ? "" : "; secure");
}

ATENTIE ! Nu modificati codurile function. Ele au rolul de a retine tema selectata chiar daca dati o reincarcare a paginii


3. Personalizarea scriptului
Codul este format din 3 parti, modificarea uneia poate erona codul si creea probleme forumului. Nu modificati nimic, decat ceea ce este indicat in acest tutorial

Prima parte:
Cod:
var type = getCookie('template1');
var temsel = document.getElementById('temsel');
temsel.innerHTML ='<select onchange="changeskin(this.options[this.selectedIndex].value);window.location.reload();"><option> Changer le style </option><option value="valeur1"> Kagamine - Kingyo.Akki </option><option value="valeur2"> School Time - Quierra </option><option value="valeur3"> Web 2.2 rose - Capucine </option></select>';

A doua parte:
Cod:
if (type == 'valeur1')
{
   document.write('<link rel="stylesheet" type="text/css" href="http://themeselect.forumactif.com/143387-ltr.css">');
}
else if (type == 'valeur2')
{
   document.write('<link rel="stylesheet" type="text/css" href="http://themeselect.forumactif.com/143694-ltr.css">');
}
else if (type == 'valeur3')
{
   document.write('<link rel="stylesheet" type="text/css" href="http://themeselect.forumactif.com/131817-ltr.css">');
}

A treia parte:
Cod:
function changeskin(change) {
   var scheme = change;
   var name = 'template1';
   var pathname = location.pathname;
   //var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
   var ExpDate = new Date ();
   ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
   setCookie(name,scheme,ExpDate,'/');
}
function getCookie(name){
   var cname = name + "=";
   var dc = document·cookie;
   if (dc.length > 0) {
      begin = dc.indexOf(cname);
      if (begin != -1) {
         begin += cname.length;
         end = dc.indexOf(";", begin);
         if (end == -1) end = dc.length;
         return unescape(dc.substring(begin, end));
      }
   }
   return null;
}
function setCookie(name, value, expires, path, domain, secure) {
   document·cookie = name + "=" + escape(value) +
   ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
   ((path == null) ? "" : "; path=" + path) +
   ((domain == null) ? "" : "; domain=" + domain) +
   ((secure == null) ? "" : "; secure");
}



  • In prima parte schimbati Changer le style cu Schimba stilul forumului / Adauga o noua infatisare la forum / ...
  • Pentru modificarea titlului (temei) si redirectionarea catre tema respectiva, trebuie sa aveti grija la codurile valeuri, astfel incat valeur1 din prima parte sa corespunda cu valeur1 din a doua parte. Aceleasi indicatii si pentru valeur2 si valeur3




4. Pentru a adauga o noua tema (exemplul de sus contine doar 3 teme) trebuie sa adaugati urmatoarele coduri:
Cod:
<option value="valeur4"> Nume dorum </option>
... inainte de codul:
Cod:
</select>';
... din prima parte

Cod:
if (type == 'valeur5')
{
document.write('<link rel="stylesheet" type="text/css" href="http://adresa_forumului_dvs/link_css">');
}
... la sfarsitul partii a 2-a.

5. Repetati aceste coduri pentru a adauga o noua tema in selector.

ATENTIE ! Nu adaugati continuturi care sa contina urmatoarele simboluri: # ( ) . / ? ! ; " ' &


6. Dupa ce ati salvat pagina, intoarceti-va la pagina Administrare pagini HTML si copiati link-ul paginii.


PASUL 3: Instalarea selectorului


Pentru phpBB3 si Invision
Selectorul se poate adauga in descrierea forumului:
Panoul de administrare => General => Forum => Configurare => Descrierea forumului
Inserati codul:
Cod:
<span id="temsel"></span><script type="text/javascript" src="adresa_paginii_create_de_dvs."></script>



Pentru phpBB2 si punBB
Pentru un model simplu, puteti folosi aceiasi metoda ca si la phpbb3 si invision

Pentru phpBB2 - model complicat
Pentru acest model, trebuie sa editati template-ul.
Panoul de administrare => Afisare => Template-uri => General => overall_header_new / Sus
Cautati codul:
Cod:
<td align="center" width="100%" valign="middle">
                    <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>

                    <div class="maintitle">{MAIN_SITENAME}</div>
                   

                    <span class="gen">{SITE_DEscriptION}</span>
                  </td>
... si inserati codul
Cod:
<br>
<br>
<span id="temsel"></span><script type="text/javascript" src="adresa_paginii_create_de_dvs."></script>
... intre codurile de mai jos:
Cod:
<span class="gen">{SITE_DEscriptION}</span>
si
Cod:
</td>


Inregistrati si validati sablonul


Pentru punBB - model complicat
Pentru acest model, trebuie sa editati template-ul.
Panoul de administrare => Afisare => Template-uri => General => overall_header_new / Sus
Cautati codul:
Cod:
<!-- BEGIN switch_desc -->
                  <p id="pun-desc">{switch_desc.SITE_DEscriptION}</p>
                  <!-- END switch_desc -->
              </div>
              <div id="pun-head">
                  <div id="pun-navlinks">
                    <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                    </ul>
                  </div>
              </div>
... si inserati codul
Cod:
<span id="temsel"></span><script type="text/javascript" src="adresa_paginii_create_de_dvs."></script>
... imediat dupa.

Inregistrati si validati sablonul



cheers FELICITARI! ATI ADAUGAT UN SELECTOR DE TEME PE FORUMUL DVS. ! cheers



Important:
- Nu uitati sa adaugati doar teme ce au aceiasi versiune cu tema de baza a forumului dvs.
- Nu introduceti caractere speciale (,:, "?" / # &%)
- Nu va atingeri de partea a treia a scriptului


Exemplu unde puteti vedea selectorul de teme: http://themeselect.forumactif.com/forum.htm

Daca va place o tema, contactati administratorul / autorul temei pentru a cere permisiunea de utilizare

Tutorial realizat de Etana
Tradus si modificat partial de Ezlidor

Numai bine,
Echipa Forumgratuit

Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.

ezlidor
Membru Forumgratuit

Numarul mesajelor: 11521
Varsta: 22
Localizare: Iasi
Data de inscriere: 07/02/2008
Respectarea regulilor:

http://help.forumgratuit.ro

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

 :: Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum