FAQ Фоновые изображения для forumhome

Администратор · Регистрация: 27.02.2009

Вот наша страничка forumhome - главная страница форума.

Есть несколько разделов Компьютеры и IT Новости, включающими несколько категорий.

Сделаем фоновые картинки, характеризующие эти два раздела.

Для раздела Компьютеры выберем иконку с системным блоком, а для новостей - картинку с надписью news.
Размеры картинок нужно подобрать так, чтобы они поместились в отведенные для них места (помечены красными прямоугольниками на картинке ниже)

Под раздел Новости - height высоту иконки сделать не больше 85 px
Под раздел компьютеры - height высоту иконки сделать не больше 125 px
А по ширине мы особо не ограничены.

Вот эти две иконки:
computer.png
news.png

Поместим их сразу в папку images/misc/

Теперь идем в Основная таблица CSS и добавим следующие строчки:

PHP код:



#forumbit_bg_5 {background: #d6e2e8 url(/images/misc/news.png) no-repeat 91% 75%; position: relative;}
#forumbit_bg_1 {background: #d6e2e8 url(/images/misc/computer.png) no-repeat 90% 65%; position: relative;}

Тут цифры 1 и 5 - это ID раздела, узнать его можно просто наведя курсор мыши

#d6e2e8 - это фоновый цвет, выбираете его любой
% - это положение картинки, то есть её выравнивание

Ещё нам нужно два изображения, которые выполняют роль прозрачности
alt1lucid.png и alt2lucid.png поместим их тоже в папку images/misc/

alt1lucid.png
alt2lucid.png

И добавим код:

PHP код:



.alt2lucid {
background: transparent url(/images/misc/alt2lucid.png) repeat;
background: rgba(235,248,255,0.7) none;
}
.alt1lucid {
background: transparent url(/images/misc/alt1lucid.png) repeat;
background: rgba(255,255,255,0.7) none;
}

Сохраняем.

И переходим к редактированию шаблонов.

Открываем forumhome_forumbit_level2_post
###############Оригинал##################

PHP код:



<tr align="center">
    <td class="alt2"><img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /></td>
    <td class="alt1Active" align="$stylevar[left]" id="f$forum[forumid]">
        <div>
            <a rel="nofollow" href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a>
            <if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
        </div>
        <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
        <if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
        <if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
    </td>
    <td class="alt2">$forum[lastpostinfo]</td>
    <td class="alt1">$forum[threadcount]</td>
    <td class="alt2">$forum[replycount]</td>
    <if condition="$vboptions['showmoderatorcolumn']">
    <td class="alt1"><div class="smallfont">$forum[moderators]&nbsp;</div></td>
    </if>
</tr>
$childforumbits

################################

Меняем class="alt1" и "alt2" на новый прозрачный класс alt1lucid и alt2lucid соответсвенно

###################Заменяем на это########################

PHP код:



<tr align="center">
     <td class="alt2"><img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /></td>
    <td class="alt1Active" align="$stylevar[left]" id="f$forum[forumid]">
        <div>
            <a rel="nofollow" href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a>
            <if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
        </div>
        <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
        <if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
        <if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
    </td>
    <td class="alt2lucid" nowrap="nowrap"><if condition="$forum[link] != ''">&nbsp;<else />$forum[lastpostinfo]</if></td>
<td class="alt1lucid"><if condition="$forum[link] != ''">&nbsp;<else />$forum[threadcount]</if></td>
<td class="alt2lucid"><if condition="$forum[link] != ''">&nbsp;<else />$forum[replycount]</if></td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="alt1lucid"><div class="smallfont">$forum[moderators]&nbsp;</div></td>
</if>
</tr>
$childforumbits

###############################################

Далее идем в forumhome_forumbit_level1_nopost

#####################Оригинал##############################

PHP код:



<if condition="!$show['collapsable_forums']">
<tbody>
</if>
    <tr>
        <td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
            <if condition="$childforumbits">
            <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
            </if>
            <a rel="nofollow" href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
            <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
            <if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
        </td>
    </tr>
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
<if condition="$childforumbits">
<if condition="!$show['collapsable_forums']">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
</if>
$childforumbits
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
</if>

#######################################################

И меняем полностью на:

########################Заменяем на это############################

PHP код:



<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="1" border="0" width="100%" id="forumbit_bg_$forum[forumid]">
<if condition="!$show['collapsable_forums']">
<tbody>
</if>
    <tr>
        <td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
            <if condition="$childforumbits">
            <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
            </if>
            <a rel="nofollow" href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
            <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
            <if condition="$show['subforums']">

<div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
    
</td>
    </tr>
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
<if condition="$childforumbits">
<if condition="!$show['collapsable_forums']">

<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
<tr align="center">
      <td class="thead">&nbsp;</td>
      <td class="thead" width="60%" align="$stylevar[left]">$vbphrase[forum]</td>
      <td class="thead" width="25%" style="white-space:nowrap">&nbsp;&nbsp;&nbsp;$vbphrase[last_post]&nbsp;&nbsp;&nbsp;</td>
      <td class="thead" width="5%">&nbsp;&nbsp;&nbsp;$vbphrase[threads]&nbsp;&nbsp;&nbsp;</td>
      <td class="thead" width="5%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$vbphrase[posts]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <if condition="$vboptions['showmoderatorcolumn']">
      <td class="thead" width="5%">$vbphrase[moderator]</td>
      </if>
    </tr>
</if>
$childforumbits
<if condition="!$show['collapsable_forums']">
</tbody>
</if>
</if>
</div>

#############################################

И вот что получилось...

by Vector cпециально для pcvector.ru

Пользователь · 02.07.2010, 19:53

Всё отлично

Пользователь · 24.09.2011, 22:54

Голубой цвет колонок можно победить?
Цвета фона менял, цвета прозрачности тоже. Один фиг голубым перекрывает и всё :(

Хелп, плиз

Администратор · 25.09.2011, 15:04

Цитата:

Сообщение от Славка

голубым перекрывает

alt1lucid.png и alt2lucid.png
Измените цвет этих картинок (но оставив прозрачность)

Пользователь · 25.09.2011, 18:24

Менял несколько раз. Не помогало.

Администратор · 25.09.2011, 20:47

А вот это rgba(235,248,255,0.7) изменяли ?

Пользователь · 25.09.2011, 21:40

Упс.... вот где код эржиби! А я уже все проверил на наличие #e3edf3

Сча попробую

Отчитываюсь - всё "ок"
Единственное придётся поиграться с полутонами, тк при наложениях цвет меняется. Но это уже мелочь.

Пользователь · 02.11.2011, 15:54

Vector подскажи где сабака зарыта?

все сделал как в инструкции но картинка с компютором в разделе компьюторы не отображаеться. ID раздела я указал на свой картинки залил все ваши от сюда толку нет цвет фона подгонял и темней и светлей картинку так и так не видно . что еще можно сделать?

Администратор · 02.11.2011, 16:22

Как насчет этих картинок

Цитата:

Ещё нам нужно два изображения, которые выполняют роль прозрачности
alt1lucid.png и alt2lucid.png поместим их тоже в папку images/misc/

alt1lucid.png
alt2lucid.png

Цитата:

Сообщение от Wor

все сделал как в инструкции

значит не всё... еще раз пробегитесь более внимательнее по всему - я делал в дефолтном шаблоне, у вас шаблон другой

Пользователь · 02.11.2011, 17:22

Цитата:

Сообщение от Vector

Как насчет этих картинок

значит не всё... еще раз пробегитесь более внимательнее по всему - я делал в дефолтном шаблоне, у вас шаблон другой

все картинки на месте как по инструкции. они работают и фон меняют это видно только сама картинка с компютором не как не хочет отображаться...

ну шаблон не знаю у меня в принцепе ваши все хаки и моды нормально приживаються...

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Aksis #2
10 МГц Пользователь Вес репутации: 0 Регистрация: 07.09.2009 Адрес: г.Орёл Сообщений: 17 Сказал(а) спасибо: 20 Поблагодарили 1 раз в 1 сообщении	02.07.2010, 19:53 Всё отлично Исправил Aksis; 02.07.2010 в 20:05.

Vector #4
7560 МГц Администратор Вес репутации: 0 Регистрация: 27.02.2009 Адрес: Москва Сообщений: 7,248 Сказал(а) спасибо: 574 Спасибок 2,673 в 1,898 сообщениях	25.09.2011, 15:04 Цитата: Сообщение от Славка голубым перекрывает alt1lucid.png и alt2lucid.png Измените цвет этих картинок (но оставив прозрачность)

Славка #5
20 МГц Пользователь Вес репутации: 0 Регистрация: 12.06.2011 Сообщений: 59 Сказал(а) спасибо: 28 Спасибок 8 в 6 сообщениях	25.09.2011, 18:24 Менял несколько раз. Не помогало.

Vector #6
7560 МГц Администратор Вес репутации: 0 Регистрация: 27.02.2009 Адрес: Москва Сообщений: 7,248 Сказал(а) спасибо: 574 Спасибок 2,673 в 1,898 сообщениях	25.09.2011, 20:47 А вот это rgba(235,248,255,0.7) изменяли ?