[Статья] Оформление разделов в стиле "metro"

08-20-2013, 02:50 PM

Фанам metro посвящается

Для начала добавьте css из аттача в ваш стиль.

В шаблоне forumhome находим и удаляем:

Code:

<thead>
    <tr align="center">
      <td class="thead">&nbsp;</td>
      <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
      <td class="thead">$vbphrase[last_post]</td>
      <td class="thead">$vbphrase[threads]</td>
      <td class="thead">$vbphrase[posts]</td>
      <if condition="$vboptions['showmoderatorcolumn']">
      <td class="thead">$vbphrase[moderator]</td>
      </if>
    </tr>
</thead>

В шаблоне forumdisplay находим:

Code:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center" style="border-bottom-width:0px">
<tr>
    <td class="tcat" width="100%">$vbphrase[subforums]<span class="normal"> : $foruminfo[title]</span></td>
    <if condition="$show['forumsearch']">
    <td class="vbmenu_control" id="forumsearch.subforums" nowrap="nowrap"><a href="search.php?$session[sessionurl]f=$foruminfo[forumid]" rel="nofollow">$vbphrase[search_this_forum]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("forumsearch.subforums"); </script></if></td>
    </if>
</tr>
</table>
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
    <tr align="center">
      <td class="thead">&nbsp;</td>
      <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
      <td class="thead">$vbphrase[last_post]</td>
      <td class="thead">$vbphrase[threads]</td>
      <td class="thead">$vbphrase[posts]</td>
      <if condition="$vboptions[showmoderatorcolumn]">
      <td class="thead">$vbphrase[moderator]</td>
      </if>
    </tr>
</thead>
$forumbits
</table>

Заменяем на:

Code:

$forumbits

В шаблоне forumhome_forumbit_level1_nopost всё заменить на:

Code:

<div class="forumhead">
        <h2>
            <span><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></span>
        </h2>
    </div>
        <if condition="$show['forumdescription'] OR $show['subforums']">
        <div>
            <if condition="$show['forumdescription']"><p>$forum[description]</p></if>
            <if condition="$show['subforums']">
                $forum[subforums]
            </if>
        </div>
        </if>
    <if condition="$childforumbits">
    <div id="$forum[forumid]" class="childforum">
        $childforumbits
    </div>
    </if>

В шаблонах forumhome_forumbit_level1_post и forumhome_forumbit_level2_post всё заменить на:

Code:

<div class="metro" alt="$forum[title]">
<div class="metro-content">
<img src="iconbox/$forum[forumid].png" style="float:left"><br><br>
</div>
<span class="lastpost">
            <div>
                $forum[lastpostinfo]
            </div>
</span>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><div class="name">$forum[title]</div></a><div class="theme"><strong>$forum[threadcount]</strong> / <small>$forum[replycount]</small>
</div>
</div>

В аттаче находятся неск. картинок для разделов. Вы, конечно, можете нарисовать свои.
Номер картинки соответствует ID раздела форума...
Размеры блоков разделов меняются ес-но в css.
Также, с помощью css, вы можете сделать их разными цветами.
Для этого в css прописываем:

Code:

.metro[alt="Название раздела"]{background-color:#цвет}

Пример цветного:

Инструкция написана для дефолтного стиля, поэтому если у вас нестандартные стили - могут потребоваться доп. изменения etc...

P.S. Аватарки выводятся с помощью хака kerk'а - тема тут

08-28-2013, 06:08 AM

очень даже хорошо.

01-28-2017, 04:00 AM

thank you

03-23-2017, 09:24 AM

Нубский вопрос, а в какую папку собственно сам аттач загружать?
Где редактировать шаблоны разобрался методом тыка, вроде бы получилось, а вот куда грузить изображения понять не могу:(

MrPepper добавил 23.03.2017 в 08:24

Quote:

Originally Posted by MrPepper

Нубский вопрос, а в какую папку собственно сам аттач загружать?
Где редактировать шаблоны разобрался методом тыка, вроде бы получилось, а вот куда грузить изображения понять не могу:(

Разобрался, напишу, может кому пригодится...

Quote:

Originally Posted by OlgaB

Для начала добавьте css из аттача в ваш стиль.

Управление стилями => Основная табилца CSS => Дополнительные определения CSS (cюда нужно вписать код из файла css.txt)
А папку с изображениями "iconbox" заливаем в корневую директорию.