Меню слева, как в социальной сети Вконтакте

Модули и плагины для vii (студяги)!
Ответить
Аватара пользователя
glGizma
Site Admin
Сообщения: 214
Зарегистрирован: Ср сен 27, 2017 2:20 pm

Меню слева, как в социальной сети Вконтакте

Сообщение glGizma » Сб фев 01, 2020 7:35 am

Открываем файл: main.tpl (templates/{Ваш%шаблон}/main.tpl) и ставим в нужное место код:

Код: Выделить всё

[logged]<div id="side_bar" class="fl_l">
<ol>
<li><table id="myprofile_table" cellspacing="0" cellpadding="0"><tbody><tr><td id="myprofile_wrap"><a href="{my-page-link}" onClick="Page.Go(this.href); return false" class="left_row"><span class="left_label inl_bl">Моя Страница</span></a></td> <td id="myprofile_edit_wrap"><a href="/editmypage" onClick="Page.Go(this.href); $('.profileMenu').hide(); return false;" id="myprofile_edit" class="left_row"><span class="left_label inl_bl">ред.</span></a></td></tr></tbody></table></li>
<li><a href="/friends{requests-link}" onClick="Page.Go(this.href); return false" id="requests_link" class="left_row"><span class="left_count_pad"> <span class="left_count_wrap fl_r"><span class="inl_bl left_count" id="new_requests">{demands}</span></span> </span><span class="left_label inl_bl">Мои Друзья</span></a></li>
<li><a href="/albums/{my-id}" onClick="Page.Go(this.href); return false" id="requests_link_new_photos" class="left_row"> <span class="left_count_wrap fl_r"><span class="inl_bl left_count" id="new_photos">{new_photos}</span></span> <span class="left_label inl_bl">Мои Фотографии<span></span></a></li>
<li><a href="/videos" onClick="Page.Go(this.href); return false" class="left_row"><span class="left_label inl_bl">Мои Видеозаписи</span></a></li>
<li><a href="/audio" onClick="Page.Go(this.href); return false" class="left_row"><span class="left_label inl_bl">Мои Аудиозаписи</span></a></li>
<li><a href="/messages" onClick="Page.Go(this.href); return false" class="left_row"><span class="left_count_pad left_count_persist"> <span class="left_count_wrap fl_r"><span class="inl_bl left_count" id="new_msg">{msg}</span></span> </span><span class="left_label inl_bl">Мои Сообщения</span></a></li>
<li><a href="/groups" onClick="Page.Go(this.href); return false" class="left_row"><span class="left_label inl_bl">Мои Группы</span></a></li>
<li><a href="/notes" onClick="Page.Go(this.href); return false" class="left_row"><span class="left_label inl_bl">Мои Заметки<span></span></a></li>
<li><a href="/fave" onClick="Page.Go(this.href); return false" class="left_row"><span class="left_count_pad"></span><span class="left_label inl_bl">Мои Закладки</span></a></li>
<li><a href="/settings" onClick="Page.Go(this.href); return false" class="left_row"><span class="left_label inl_bl">Мои Настройки</span></a></li>
<div class="more_div"></div><li><a href="/news" onClick="Page.Go(this.href); return false" class="left_row"><span class="left_count_pad"></span><span class="left_label inl_bl">Лента</span></a></li>
</ol></div>[/logged]
Открываем файл: style.css и в самый низ вставляем код:

Код: Выделить всё

/* Меню слева */

#left_ads {
position: relative;
width: 118px;
}
#left_blocks {
width: 118px;
}
#side_bar {
background: #FFF;
border-bottom-left-radius: 5px;
padding: 5px 0 10px 4px;
width: 136px;
}
#side_bar .inl_bl {
vertical-align: baseline;
}
#side_bar .left_count_wrap .inl_bl {
vertical-align: top;
}
#side_bar .more_div {
margin-top: 3px;
padding-top: 3px;
border-top: 1px solid #E7EAED;
}
#side_bar ol li a.more {
padding-left: 29px;
border-top: 0px;
}
#side_bar ol li a.more:hover {
border-top: 0px;
}

#side_bar ol {
list-style: none;
margin: 0px 0px 10px;
padding: 0px;
}
#side_bar ol li {
font-size: 1.0em;
}
#side_bar ol li.clearFix {
*margin-bottom:-2px;
}
#side_bar ol li .left_row {
border: 0;
background: #FFF;
display: block;
padding: 0px 0px 0px 6px;
white-space: nowrap;
}
#side_bar ol li .left_row:hover {
background: #E1E7ED;
text-decoration: none;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#side_bar ol li #myprofile,
#side_bar ol li #myprofile_edit {
padding: 0px 6px;
}
#myprofile_edit {
color: gray;
width: auto;
}
#myprofile_edit:hover {
color: #67829E;
}
#myprofile_table,
#myprofile_wrap {
width: 100%;
}
.font_medium #side_bar #myprofile_edit_wrap {
display: none;
}
.font_medium #side_bar ol li #myprofile {
float: none;
width: auto;
padding: 0px 0px 0px 6px;
}
#side_bar .left_label {
padding: 4px 0;
height: 13px;
}
.font_medium #side_bar .left_label {
height: 15px;
}
.left_count_wrap {
margin: 1px !important;
zoom: 1;
padding: 4px !important;
vertical-align: top;
color: #45688E;
/*background: #D5DDE5;*/
font-weight: bold;
font-style: normal !important;
font-size: 10px;
line-height: 11px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: background-color 200ms linear, color 200ms linear;
-moz-transition: background-color 200ms linear, color 200ms linear;
-o-transition: background-color 200ms linear, color 200ms linear;
transition: background-color 200ms linear, color 200ms linear;
}
.font_medium .left_count_wrap {
font-size: 11px;
margin: 2px 1px 2px 0px !important;
}
a:hover .left_count_wrap {
/*background: #D5DDE5;*/
}

.left_void {
display: none !important;
}
a:hover .left_count_persist .left_void,
.left_nav_over .left_count_pad .left_void {
display: inline-block !important;
color: #6887A8;
height: 11px;
}
.left_count_pad .left_count_wrap:hover {
background-color: #BBC7D3;
}
.left_nav_over .left_count_pad .left_count_wrap {
background-color: #597DA3 !important;
color: #FFF !important;
}
.left_count_wrap .counter_anim_wrap {
height: 11px;
}
#side_bar .left_count_wrap .inl_bl {
vertical-align: top;
}
.fl_l { float: left; }
.inl_bl {display:-moz-inline-stack; display:inline-block; _overflow:hidden; vertical-align: top; zoom:1; *display:inline;}
Вложения
(52).jpg
(52).jpg (725.21 КБ) 6970 просмотров

Ответить