Как это сделать?

Dana Domirani пишет:На 94% повторить могу.

Код:

/* новый блок в приветствии*/

/* блок-заголовок с фоном */
.doptitle {
display: block;
width: 800px;
height: 300px;
background: transparent url('http://i44.servimg.com/u/f44/16/54/26/99/cvbn10.jpg') no-repeat center;
margin: 0 auto;
}

/* контейнер с кнопками 'галерея' и 'виджеты' */
.dopmenu {
display: block;
position: relative;
top: 250px;
right: 20px;
}

/* настройки кнопок 'галерея' и 'виджеты' */
#dopbutt01, #dopbutt02 {
display: block;
float: right;
width: 190px;
height: 43px;
line-height: 43px;
cursor: pointer;
background: transparent url('http://i44.servimg.com/u/f44/16/54/26/99/fggf110.png') no-repeat top center;
text-align:center;
color: #6A83B1 !important;
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 0 2px #1E242C;
}

/* кнопки под мышью */
#dopbutt01:hover, #dopbutt02:hover {
background: transparent url('http://i44.servimg.com/u/f44/16/54/26/99/fggf110.png') no-repeat bottom center;
color: #212834 !important;
text-shadow: -1px -1px 1px #6A83B1;
}

/* общие свойства блоков с содержимым */
#dpblock1, #dpblock2 {
margin: 5px 0;
border: 1px solid #6A83B1;
border-left-width: 4px;
display: none;
}

/* фон 1-ого раскрывающегося блока про галерею */
#dpblock1 {
background: #fff url('http://i44.servimg.com/u/f44/16/54/26/99/five_g11.png') no-repeat 5px 0px;
padding: 5px;
height: 250px;
}

/* фон 2-ого раскрывающегося блока про виджеты */
#dpblock2 {
padding: 5px;
background: #fff url('http://savepic.org/2309526.png') no-repeat 5px bottom;
}

/* маскировка виджетов 'активные' и 'популярные' темы в правой колонке */
#content-container div#right #dopmod1, #content-container div#right #dopmod2 {
display: none;
}


Код:

      <div id="stats">
         <p class="right">{TOTAL_POSTS}</p>
         <p>{TOTAL_USERS}</p>
         <p>{NEWEST_USER}</p>
      </div>
      <div id="onlinelist">
         <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
         <p class="right">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
         </p>
         <p>{TOTAL_USERS_ONLINE}<br />
         {RECORD_USERS}

         <br />
         {LOGGED_IN_USER_LIST}

         {L_ONLINE_USERS}
         {L_CONNECTED_MEMBERS}<br />
         {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
         <div class="clear"></div>

         <p>{LEGEND} : {GROUP_LEGEND}</p>

      </div>

Код:

<table class="general_box"><tr><td>
<h2><img src="http://i71.servimg.com/u/f71/14/71/65/95/commen10.png">  Кто Онлайн?</h2>
[<a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>]<br />
{TOTAL_USERS_ONLINE}<br />
{LOGGED_IN_USER_LIST}
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />

<br /><h2><img src="http://i71.servimg.com/u/f71/14/71/65/95/cake10.png">  Дни Рождения Пользователей</h2>
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
<br /><h2><img src="http://i71.servimg.com/u/f71/14/71/65/95/house10.png">  Список Групп Пользователей</h2>
{GROUP_LEGEND}

</td><td width="40%" valign="top">
<div id="stats"><h2><img src="http://romzett.ru/public/style_images/master/stat.png">  Статистика форума</h2>
<br />
<p><img src="http://i71.servimg.com/u/f71/14/71/65/95/email10.png">  {TOTAL_POSTS}</p>
<p><img src="http://i71.servimg.com/u/f71/14/71/65/95/user10.png">  {TOTAL_USERS}</p>
<p class="terve"><img src="http://i71.servimg.com/u/f71/14/71/65/95/user_a10.png">  {NEWEST_USER}</p>
<p><img src="http://i71.servimg.com/u/f71/14/71/65/95/chart_10.png">  {RECORD_USERS}</p>
</div>
</td></tr></table>

Код:

table.general_box {
    background-color: #EEF3F8;
    border: 1px solid #D5DDE5;
    border-bottom: 4px solid #D5DDE5;
width: 100%;
padding: 5px;
}

Код:

<a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

<div class="doptitle">
<div class="dopmenu">
<span id="dopbutt03">Третья кнопка</span>
<span id="dopbutt02">Виджеты</span>
<span id="dopbutt01">Галерея</span>
</div>
</div>

<div id="dpblock2">
Кажется, что это просто списки, пустые буквы, взявшиеся вычислить превосходство одних тем над другими. А на самом деле... так оно и есть!
</div>
<div id="dpblock3">
Тут произвольный текст. Можно создать в Генераторе светских бесед
</div>

/* настройки кнопок 'галерея' и 'виджеты' */
#dopbutt01, #dopbutt02, #dopbutt03 {
display: block;
float: right;
width: 190px;
height: 43px;
line-height: 43px;
cursor: pointer;
background: transparent url('http://i44.servimg.com/u/f44/16/54/26/99/fggf110.png') no-repeat top center;
text-align:center;
color: #6A83B1 !important;
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 0 2px #1E242C;
}

/* кнопки под мышью */
#dopbutt01:hover, #dopbutt02:hover, #dopbutt03:hover {
background: transparent url('http://i44.servimg.com/u/f44/16/54/26/99/fggf110.png') no-repeat bottom center;
color: #212834 !important;
text-shadow: -1px -1px 1px #6A83B1;
}

/* общие свойства блоков с содержимым */
#dpblock1, #dpblock2, #dpblock3 {
margin: 5px 0;
border: 1px solid #6A83B1;
border-left-width: 4px;
display: none;
}

Код:

jQuery("#dopbutt02").click(function(){
jQuery('#dpblock2').slideToggle(300);
return false
});

Код:

jQuery("#dopbutt03").click(function(){
jQuery('#dpblock3').slideToggle(300);
return false
});

/* фон 1-ого раскрывающегося блока про галерею */
#dpblock1 {
background: #fff url('http://cdn1.iconfinder.com/data/icons/yooicons_set09_halloween/128/cheshire_cat.png') no-repeat 5px 0px;
padding: 5px;
height: 250px;
}

/* фон 1-ого раскрывающегося блока про галерею */
#dpblock1 {
background: #fff url('http://cdn1.iconfinder.com/data/icons/yooicons_set09_halloween/128/cheshire_cat.png') no-repeat 5px 0px;
padding: 5px;
height: 250px;
}

#dpblock1 {
background: white url('http://cdn1.iconfinder.com/data/icons/woothemes/PNG/signal.png') no-repeat 5px 0px;
padding: 5px;
height: 250px;
}

#dpblock1 {
background: white url('http://cdn1.iconfinder.com/data/icons/woothemes/PNG/signal.png') no-repeat 5px 0px;
padding: 5px;
height: 250px;
}