testowa

Nadszedł czas na drugą część poradnika „Kodujemy layout pod MyBB – HTML5 i CSS3”.

Poprzednia część dostępna TUTAJ.

W tej części zajmiemy się kodowaniem kilku elementów z naszego layoutu.

Zaczniemy od tła i szerokości forum:

  • W tym celu przechodzimy do ACP -> Style i szablony -> Nasz styl -> global.css
  • Wybieramy selektor „body” i po lewej stronie zmieniamy Tło (background) z „#fff” na „#F8F8F8” i zapisujemy zmiany.
  • Tak samo postępujemy z selektorem „content”.
  • Aby zmienić szerokość forum przechodzimy do selektora „.wrapper” i po lewej stronie ustawiamy Szerokość (width) na 65%.

Nadszedł czas na zmianę loga i dopasowaniem wymiarów górnej części naszego szablonu:

  • Ściągamy logo (Kliknij tutaj) i wgrywamy je poprzez ftp do naszego folderu, który utworzyliśmy w pierwszej części wpisu. Moja lokalizacja wygląda tak: images/estheme
  • Wchodzimy do ACP -> Style i szablony -> Nasz styl znajdujemy tam „Logo forum” i podajemy ścieżkę do naszego loga np: images/twojszablon/logo.png.
  • Gdy już zrobiliśmy powyższe kroki nasze logo powinno ulec zmianie.

Wracamy do naszych kodów CSS a dokładniej do global.css. Tak więc standardowo wchodzimy w ACP -> Style i szablony -> Nasz styl -> global.css

Tym razem w selektorze szukamy „#logo„.

  • Tło zostawiamy bez zmian. Usuwamy tylko całą zawartość z „Dodatkowe atrybuty CSS„. Zostawiając jedynie:
padding: 0;

Nasz kod powinien wyglądać tak jak na screenie poniżej:

MyBB #logo CSS

W ten sposób wysokość naszego TOP będzie zależna od wysokości loga (w tym wypadku 70px).

Mimo tego w dalszym ciągu coś nam nie pasuje. Trzeba znowu wybrać się na wycieczkę tym razem do selektora „#logo ul.top_links„.

Tutaj również zbytnio się nie namęczymy gdyż wystarczy cały kod margin, który znajduje się w Dodatkowych atrybutach CSS  zamienić na podany poniżej:

margin: -18px 5px 0 0;

Aktualna, cała nasza zawartość Dodatkowych atrybutów powinna wyglądać:

text-align: right;
margin: -18px 5px 0 0;

 

Menu zajmiemy się w kolejnej części.

 

Teraz zajmiemy się środkową częścią naszego szablonu a mianowicie:

środek MyBB

Zaczniemy od usunięcia „.tcat” w tym celu musimy przejść do ACP -> Style i szablony -> Szablony Twojego stylu -> Opis działu – szablony -> forumbit_depth1_cat.

Tam szukamy i usuwamy:

<tr>
<td class="tcat" colspan="2"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
<td class="tcat" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>

Zapisujemy i przechodzimy do ACP -> Style i szablony -> Szablony Twojego stylu -> Opis działu – szablony -> forumbit_depth2_forum.

Tutaj ustawimy sobie, aby nasza liczba postów i tematów wyświetlała się tak jak na layoucie.

W tym celu usuwamy całą dostępną tam zawartość i wstawiamy:

<tr>
<td class="{$bgcolor}" align="center" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>
<td class="{$bgcolor}">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']} POSTÓW W {$threads}{$unapproved['unapproved_threads']} TEMATACH</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap; width:30%;">{$lastpost}</td>
</tr>

W ten sposób uzyskamy taki efekt:

Postów i tematów

 

Edycja belki (Thead), ACP -> Style i szablony -> Twój styl -> global.css i tutaj wybieramy selektor: .thead

 

Po lewej stronie ustawiamy:

  • Tło (background): #fff          <- Odpowiada za kolor belki (w tym wypadku biały).
  • Kolor (color): #818181         <- Odpowiada za kolor czcionki na belce (w tym wypadku szary).

Po prawej stronie:

  • Dodatkowe atrybuty CSS:
border-bottom: 1px solid #e7e7e7;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 22px;
padding-right: 22px;
text-transform: uppercase;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height: 44px;

 

W podanych poniżej selektorach zmieniamy Kolor (color) na #818181

  • .thead a:link
  • .thead a:visited

W selektorze, który również podam poniżej Kolor (color) zmieniamy na #00a651 oraz w Dekoracja tekstu (text-decoration) wpisujemy: none (jeżeli ktoś chce przykładowo efekt podkreślenia linku poprzez najechanie na niego to można wpisać: underline)

  • .thead a:hover, .thead a:active

 

Przejdźmy do trow1 oraz trow2, ACP -> Style i szablony -> Twój styl -> global.css i w selektorze wybieramy:

  • .trow1
  • .trow2

 

Ich zawartość zmieniamy na:

Tło (background): #fff

Kolor (color): #818181

Waga czcionki (font-weight): bold

Dodatkowe atrybuty CSS:

border-bottom: 1px solid #e7e7e7;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

Ostatnią rzeczą, którą się dzisiaj zajmiemy będzie .tborder, ACP -> Style i szablony -> Twój styl -> global.css -> selektor .tborder

Tło (background): #fff

Szerokość (width): 100%

Dodatkowe atrybuty CSS:

margin: auto auto;
padding: 1px;
-webkit-box-shadow: 0px 0px 20px 2px #DCDCDC;
-moz-box-shadow: 0px 0px 20px 2px #DCDCDC;
box-shadow: 0px 0px 20px 2px #DCDCDC;

 

Na dzisiaj to już koniec 🙂

Po dzisiejszej pracy nasz szablon powinien prezentować się tak:

Efekt pracy część 2

Ciężko wszystko wytłumaczyć więc niektóre rzeczy pomijałem. Gdyby ktoś jednak miał jakiś problem proszę śmiało pisać, chętnie pomogę 🙂
Efekt dzisiejszej pracy do pobrania: TUTAJ

 

Zakaz kopiowania poradnika bez mojej zgody.

  • Witam.
    Wszystko pięknie,ale nie lepiej zaoszczędzić czas używając jakiegoś edytora i edytujac pliki z poziomu FTP?

    • Niestety w MyBB nie da się edytować plików z poziomu FTP. Style i szablony są trzymane w bazie. Jedyną opcją jest edycja pliku .XML bądź właśnie poprzez Panel Administratora (ta opcja wydaje mi się wygodniejsza). Prawdopodobnie w MyBB 2.0 będzie można edytować pliki z poziomu FTP.

      • Edycja templatki w MYSQL? Nie wiem czy to głupizna, czy jakaś nowa moda:P
        Nie miałem do czynienia z MyBB, ale chyba standardem jest, że szablon to zbiór plików php , css itp
        🙂

        • Jak widać w MyBB nie. Swoją drogą edycja z poziomu ACP nie jest taka zła.