jQuery stylesheet switcher for phpbb

Zestawy graficznych dodatków do wykorzystania na forum: emotikon, awatarów, obrazów rang itp.
Aviator
Administrator
Posty: 2089
Rejestracja: 07 czerwca 2011, 22:14
Lokalizacja: ZS

jQuery stylesheet switcher for phpbb

Post autor: Aviator » 08 maja 2012, 23:54

jQuery stylesheet switcher for phpbb

Dzięki temu dodatkowi każdy z użytkowników będzie mógł wybrać swój własny schemat kolorów stylu forum.

Autor: Christian Bullock

Tłumaczenie: Psikus

Styl: Prosilver
style.jpg
(81.66 KiB) Pobrany 24392 razy
stylesheet-switcher.zip
(14.77 KiB) Pobrany 571 razy
Kopiowanie plików
Skopiuj: /stylesheet-switcher/jquery.switcher.cookie.js do /styles/prosilver/template/
Skopiuj: /stylesheet-switcher/blank.css do /styles/prosilver/theme/
Skopiuj: /stylesheet-switcher/colours do /styles/prosilver/theme/
Skopiuj: /stylesheet-switcher/red.png do /styles/prosilver/theme/images/
Skopiuj: /stylesheet-switcher/violet.png do /styles/prosilver/theme/images/
Skopiuj: /stylesheet-switcher/green.png do /styles/prosilver/theme/images/
Skopiuj: /stylesheet-switcher/default.png do /styles/prosilver/theme/images/

Otwórz: /styles/prosilver/template/overall_header.html
Znajdź:

Kod: Zaznacz cały

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>
Dodaj po w nowe linii:

Kod: Zaznacz cały

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- If the above line is already present, don't add it again -->
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.switcher.cookie.js"></script>
Znajdź:

Kod: Zaznacz cały

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
    <link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->
Dodaj po w nowe linii:

Kod: Zaznacz cały

<link rel="stylesheet" href="{T_THEME_PATH}/blank.css" type="text/css" class="colour-switcher" />
Znajdź:

Kod: Zaznacz cały

<a name="start_here"></a>
Dodaj po w nowe linii:

Kod: Zaznacz cały

<div class="navbar">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="linklist rightside">
            <li><strong>Kolor:</strong></li>
            <li><a href="#" rel="{T_THEME_PATH}/colours/red.css" class="switch" rel="nofollow"><img src="{T_THEME_PATH}/images/red.png" width="12" height="12" alt="Czerwony" title="Czerwony" /></a> &bull; </li>
            <li><a href="#" rel="{T_THEME_PATH}/colours/green.css" class="switch" rel="nofollow"><img src="{T_THEME_PATH}/images/green.png" width="12" height="12" alt="Zielony" title="Zielony"/></a> &bull; </li>
            <li><a href="#" rel="{T_THEME_PATH}/colours/violet.css" class="switch" rel="nofollow"><img src="{T_THEME_PATH}/images/violet.png" width="12" height="12" alt="Fioletowy" title="Fioletowy"/></a> &bull; </li>
            <li><a href="#" rel="{T_STYLESHEET_LINK}" class="switch" rel="nofollow"><img src="{T_THEME_PATH}/images/default.png" width="12" height="12" alt="Domyślny" title="Domyślny"/></a></li>
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>
Osadzenie jQuery
Otwórz: /styles/prosilver/template/overall_header.html
Znajdź:

Kod: Zaznacz cały

<link rel="stylesheet" href="{T_THEME_PATH}/blank.css" type="text/css" class="colour-switcher" />
Dodaj po w nowe linii:

Kod: Zaznacz cały

<script type="text/javascript">
      if($.cookie("colour-choice")) {
         $("link.colour-switcher").attr("href",$.cookie("colour-choice"));
      }
   $(document).ready(function() {
      $("a.switch").click(function() {
         $("link.colour-switcher").attr("href",$(this).attr('rel'));
         $.cookie("colour-choice",$(this).attr('rel'), {expires: 365, path: '/'});
         return false;
      });
   });
</script>
Zapisz pliki i wyślij na FTP.
Przejdź do Panelu Administratora i odśwież szablony, motywy i zestawy obrazków stylu.

Informacja
Dodatek ma zdefiniowane tylko zmianę tła. Jeżeli znasz się na CSS będziesz mógł dodać kolejne zmiany definiujące każdą część Twojego stylu.
-=Jeżeli w moim poście brakuje znaków diakrytycznych, oznacza to, że posta wyklepałem przez telefon=-

Zablokowany

Wróć do „Komponenty”