Добавление блока

02-20-2010, 07:51 AM

На официальном форуме эта тема уже есть, но тут походу нет.

Опишу как добавить блок.

Иногда нужно добавить блок для рекламы, в буллетине 4 это сделать немного сложнее чем в тройке, поэтому покажу как я это сделал, просто как пример.

Пример.

Это сам код. Его вставляем именно туда где блок должен отображаться.

Code:

<!-- Bloc Perso Allan -->
<br />
<div id="bloc_perso">
        <ul>
            <li>
    <div class="block smaller">
        <div class="blocksubhead">
            <img src="images/site_icons/event-alert.png" alt="" />
            <span class="blocktitle">Наши спонсоры</span>
        </div>
        <div id="blocperso" class="blockbody floatcontainer">
<ul class="blockrow">
                <li class="avatarcontent floatcontainer">
                    <div id="test1" align="center">
<a href="ссылка" target="_blank"><img class="реклама" src="адрес картинки" border="0" alt="название" /></a>


<a href="ссылка" title="название" target="_blank"><img class="реклама" src="адрес картинки" border="0" alt="название" /></a>
<hr />

<a href="ссылка" title="название" target="_blank"><img src="адрес картинки" border="0" alt="название" /></a>
                    </div>
                                </li>    
            </ul>
        </div>
    </div>
    <div class="underblock"></div>
</li>
        </ul>

    </div>
<div class="underblock"></div>
<br />
<!-- Bloc Perso Allan -->

--------------------------------------

Далее вам надо вставить в шаблон CSS код.

Если вы хотите что бы блок отображался правильно на каждой странице, то CSS код можно вставить в шаблон additional.css

Внимание, для CSS кода в булке сделаны свои шаблоны. Для этого в шаблонах найдите категорию Шаблоны CSS

Как пример, если вы добавили блок на главной странице (шаблон Forumhome), то CSS вы должны добавить в шаблон Forumhome.css

Code:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* BLOC PERSO ALLAN */
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#bloc_perso {
    float:left;
    width:{vb:stylevar forum_sidebar_width};
    padding:17px 0;
    margin-bottom:3em;

}
#bloc_perso .block {
    margin-bottom:4px;
    padding:6px;
    background:{vb:stylevar forum_sidebar_background};
    -moz-border-radius-top{vb:stylevar left}:{vb:stylevar border_radius};
    -moz-border-radius-top{vb:stylevar right}:{vb:stylevar border_radius};
    -webkit-border-top-left-radius: {vb:stylevar border_radius};
    -webkit-border-top-right-radius: {vb:stylevar border_radius};
}
#bloc_perso .blockbody {
    color: {vb:stylevar forum_sidebar_content_color};
    background:{vb:stylevar forum_sidebar_content_background.backgroundColor};
    -moz-border-radius:{vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    padding:0;
    border:{vb:stylevar forum_sidebar_content_border};
}
#bloc_perso .blockrow {
    border-top:1px solid {vb:stylevar forum_sidebar_content_background.backgroundColor}; /* makes the bevel look part of the background */
    -moz-border-radius:{vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    background:{vb:stylevar forum_sidebar_content_background};
    _background-image: none;
}
#bloc_perso .underblock {
    height:{vb:stylevar forum_sidebar_content_separator_height};
    background:{vb:stylevar forum_sidebar_content_separator_background};
}

#bloc_perso .blockrow,
#bloc_perso .blocksubhead {
    padding:10px 6px 10px 6px;
    color: {vb:stylevar forum_sidebar_header_color};
}
#bloc_perso .blocksubhead {
    background:transparent none;
    height:{vb:math {vb:stylevar mid_fontSize}*{vb:stylevar line_height} + 2px };
    padding: 5px 6px;
    border:none;
    outline:none;
    font-weight:bold;
}
#bloc_perso > ul {
    background-color:{vb:stylevar forum_sidebar_background.backgroundColor};
    border:{vb:stylevar forum_sidebar_border};
    -moz-border-radius:{vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    -moz-box-shadow:-2px 2px 2px {vb:stylevar shadow_color};
    float:{vb:stylevar left};
    width:100%;
}

--------------------------------------