#2 Kodujemy layout pod MyBB - HTML5 i CSS3

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:

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:

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:

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:

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.

#2 Kodujemy layout pod MyBB – HTML5 i CSS3