Jak zrobić sidebox na mybb

Z ToProste
Skocz do: nawigacji, wyszukiwania
podpis grafiki

Jak zrobić sidebox - zwijany panel na forum mybb - niżej przedstawiam krok, po kroku jak zrobić chowany panel taki jak na obrazku lub na przykładzie forumreklamowego. 


Przed edycją szablonów zapoznaj się z Zasadami bezpiecznej edycji stylów MyBB
Robisz to na WŁASNĄ odpowiedzialność! Czyli, że ja nie ponoszę żadnej odpowiedzialności za ewentualne szkody!


Krok 1

  • Pobierz paczkę zawierając pliki strzałek i funkcje javascript niezbędne do działania.
    • Zawartość paczki:
      • /images/arrowleft.png
      • /images/arrowright.png
      • /jscripts/jquery.cookie.js
      • /jscripts/sidebar.js
  • Rozpakuj jej zawartość do głównego katalogu zawierającego pliki skryptu forum (tylko katalogi images i jscripts).


Krok 2

Zmiana zawartości pliku index.

  • ACP -> Style i szablony -> Szablony -> Twój styl forum -> Strona główna - Szablony -> index
  • Zamień zawartość pliku index - wklej kod:
    • lub kod z pliku index.txt z paczki.

Sidebox z prawej strony

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
    lang.no_new_posts = "{$lang->no_new_posts}";
    lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
<style type="text/css">
/* Kod odpowiadajacy za strzalki */
.buttons {
    /* Strzalka w prawo - zwijanie */
    background: url(images/arrowright.png) no-repeat; /* url strzalki */
    width: 16px; /* szerokosc ikony */
    height: 16px; /* wysokosc ikony */
    display: block;
    cursor: pointer;
}
 
.clickedbuttons {
    /* Strzalka w lewo - rozwijanie */
    background: url(images/arrowleft.png) no-repeat; /* url strzalki */
    width: 16px; /* szerokosc ikony */
    height: 16px; /* wysokosc ikony */
    display: block;
    cursor: pointer;
}
</style>
</head>
<body>
{$header}
<a class="buttons" style="float: right;"></a> <!-- polozenie strzalki w prawo - zwijanie -->
<a class="clickedbuttons" style="float: right;"></a> <!-- polozenie strzalki w lewo - rozwijanie -->
<br class="clear" />
<div class="sidebar" style="float: right;width: 19%;"> <!-- polozenie sideboxa i jego szerkosc przy aktywowaniu -->
 
 <!-- Kod panelu sideboxa --> 
 
   <!-- Aby dodać nowy panel, powiel ten kod w obrebie warstwy sideboxa -->
 <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
  <tr>
   <td class="thead">
    <strong>Tytuł</strong>
   </td>
  </tr>
  <tr>
   <td class="trow1">
    Treść
   </td>
  </tr>
 </table>
 <!-- Koniec kodu panelu sideboxa -->
 
 <!-- 
   Tu wstaw powielony kod panlu sideboxa jesli chcesz dodac nowy panel
 -->
 
</div> <!-- Koniec warstwy sideboxa -->
 
<div class="forums" style="float: left;width: 80%;"> <!-- polozenie forum i jego szerkosc przy aktywowaniu sideboxa -->
{$forums}
</div>
<br class="clear" />
{$boardstats}
 
<dl class="forum_legend smalltext">
    <dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" 
        title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <dd>{$lang->new_posts}</dd>
 
    <dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" 
        title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <dd>{$lang->no_new_posts}</dd>
 
    <dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" 
        title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
    <dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>


Sidebox z lewej strony

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
    lang.no_new_posts = "{$lang->no_new_posts}";
    lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
<style type="text/css">
/* Kod odpowiadajacy za strzalki */
.buttons {
    /* Strzalka w lewo - rozwijanie */
    background: url(images/arrowleft.png) no-repeat; /* url strzalki */
    width: 16px; /* szerokosc ikony */
    height: 16px; /* wysokosc ikony */
    display: block;
    cursor: pointer;
}
 
.clickedbuttons {
    /* Strzalka w prawo - zwijanie */
    background: url(images/arrowright.png) no-repeat; /* url strzalki */
    width: 16px; /* szerokosc ikony */
    height: 16px; /* wysokosc ikony */
    display: block;
    cursor: pointer;
}
</style>
</head>
<body>
{$header}
<a class="buttons" style="float: left;"></a> <!-- polozenie strzalki w prawo - zwijanie -->
<a class="clickedbuttons" style="float: left;"></a> <!-- polozenie strzalki w lewo - rozwijanie -->
<br class="clear" />
<div class="sidebar" style="float: left;width: 19%;"> <!-- polozenie sideboxa i jego szerkosc przy aktywowaniu -->
 
 <!-- Kod panelu sideboxa --> 
 
   <!-- Aby dodać nowy panel, powiel ten kod w obrebie warstwy sideboxa -->
 <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
  <tr>
   <td class="thead">
    <strong>Tytuł</strong>
   </td>
  </tr>
  <tr>
   <td class="trow1">
    Treść
   </td>
  </tr>
 </table>
 <!-- Koniec kodu panelu sideboxa -->
 
 <!-- 
   Tu wstaw powielony kod panlu sideboxa jesli chcesz dodac nowy panel
 -->
 
</div> <!-- Koniec warstwy sideboxa -->
 
<div class="forums" style="float: right;width: 80%;"> <!-- polozenie forum i jego szerkosc przy aktywowaniu sideboxa -->
{$forums}
</div>
<br class="clear" />
{$boardstats}
 
<dl class="forum_legend smalltext">
    <dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" 
        title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <dd>{$lang->new_posts}</dd>
 
    <dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" 
        title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <dd>{$lang->no_new_posts}</dd>
 
    <dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" 
        title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
    <dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>


  • Zapisz i wróć do listy.


Krok 3

Zmiana zawartości pliku headerinclude.

  • ACP -> Style i szablony -> Szablony -> Twój styl forum -> Niezgrupowane szablony -> headerinclude
  • W pliku headerinclude odnajdź wiersz zawierający: {$stylesheets} i przed nim dodaj - wklej kod:
    • lub kod z pliku headerinclude.txt z paczki.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar.js"></script>
  • Zapisz zmiany


Pliki zewnętrzne

Zobacz też

<htmlet>zobacz-tez</htmlet>

Źródło „http://to.proste.info.pl/index.php?title=Jak_zrobić_sidebox_na_mybb&oldid=2570”