Как сделать в стандартной теме меню как на форуме avast ?

[Edward]

Здравствуйте!

Интересует такой вопрос: Как сделать в стандартной теме на SMF 2.0.2 меню как на форуме avast ?
Вот скриншот этого меню на форуме аваст(ссылка на сам форум: http://forum.avast.com/index.php) http://yadi.sk/d/Ks16OpVM0MAL3

Как такое меню можно реализовать? в каких файлах копать? или мод какой поставить можно?
п.с. только начал изучать SMF

Спасибо.

[karavan]

А чем оно особенное, то меню, на форуме аваста?

[Edward]

А чем оно особенное, то меню, на форуме аваста?

Красивей смотрится, приятней и понятней для пользователей будет, по сравнению со стандартным..

ну так кто знает где править файлы чтобы добиться такого результата?

[Фисташка]

Как сделать в стандартной теме на SMF 2.0.2 меню как на форуме avast ?

п.с. только начал изучать SMF
Спасибо.

Украсть!

HTML

<div id="main_menu">
<ul class="dropmenu" id="menu_nav">
<li id="button_home">
<a class="active firstlevel" href="http://">
<span class="last firstlevel">Home</span>
</a>
</li>
<li id="button_help">
<a class="firstlevel" href="http://">
<span class="firstlevel">Help</span>
</a>
</li>
<li id="button_search">
<a class="firstlevel" href="">
<span class="firstlevel">Search</span>
</a>
</li>
<li id="button_pm">
<a class="firstlevel" href="http://">
<span class="firstlevel">My Messages</span>
</a>
<ul>
<li>
<a href="http://">
<span>Read your messages</span>
</a>
</li>
<li>
<a href="http://">
<span class="last">Send a message</span>
</a>
</li>
</ul>
</li>
<li id="button_login">
<a class="firstlevel" href="http://">
<span class="firstlevel">Login</span>
</a>
</li>
<li id="button_register">
<a class="firstlevel" href="http://">
<span class="last firstlevel">Register</span>
</a>
</li>
</ul>
</div>

CSS

#main_menu
{
   padding: 0 0.5em;
   float: left;
   margin: 0;
/*width: 98%;*/
   height: 41px;
   font-weight: bold;
   text-transform: uppercase;
   background: url(../images/theme/topmenu-bg.gif) no-repeat top left;
   width: 790px;
}
.dropmenu, .dropmenu UL
{
   list-style: none;
   line-height: 1em;
   padding: 0;
   margin: 0;
}
.dropmenu
{
   padding: 0 0.5em;
}
.dropmenu A
{
   display: block;
   color: #000;
   text-decoration: none;
}
.dropmenu A SPAN
{
   display: block;
   padding: 0 0 0 5px;
   font-size: 0.9em;
}
/*the background's first level only*/
.dropmenu LI A.firstlevel
{
/*margin-right: 8px;*/
}
.dropmenu LI A.firstlevel SPAN.firstlevel
{
   display: block;
   position: relative;
/*left: -5px;*/
   padding: 10px;
/*height: 22px;*/
   line-height: 19px;
   white-space: pre;
   border-left: 1px solid #FEDA79;
   border-right: 1px solid #D27D22;
}
#button_home A SPAN
{
   border-left: none;
}
#button_logout A SPAN
{
   border-right: none;
}
.dropmenu LI
{
   float: left;
   padding: 0;
   margin: 0;
   position: relative;
}
.dropmenu LI UL
{
   z-index: 90;
   display: none;
   position: absolute;
   width: 19.2em;
   font-weight: normal;
   border-bottom: 1px solid #999;
   background: url(../images/theme/menu_gfx.png) no-repeat 0 -130px;
   padding: 7px 0 0;
}
.dropmenu LI LI
{
   width: 19em;
   margin: 0;
   border-left: 1px solid #999;
   border-right: 1px solid #999;
}
.dropmenu LI LI A SPAN
{
   display: block;
   padding: 8px;
}
.dropmenu LI UL UL
{
   margin: -1.8em 0 0 13em;
}
/*the active button*/
.dropmenu LI A.active
{
   background: #303741;
/*url(../images/theme/menu_gfx.png) no-repeat 100% 0;*/
   color: #FFF;
   font-weight: bold;
   height: 40px;
}
.dropmenu LI A.active SPAN.firstlevel
{
   background: #303741;
/*(../images/theme/menu_gfx.png) no-repeat 0 0;*/
}
/*the hover effects*/
.dropmenu LI A.firstlevel:hover, .dropmenu LI:hover A.firstlevel
{
/*background: url(../images/theme/menu_gfx.png) no-repeat 100% -30px;*/
   background: #303741;
   color: #FFF;
   cursor: pointer;
   text-decoration: none;
}
.dropmenu LI A.firstlevel:hover SPAN.firstlevel, .dropmenu LI:hover A.firstlevel SPAN.firstlevel
{
/*background: url(../images/theme/menu_gfx.png) no-repeat 0 -30px;*/
}
/*the hover effects on level2 and 3*/
.dropmenu LI LI A:hover, .dropmenu LI LI:hover>A
{
   background: #D4DBE4;
   color: #000;
   text-decoration: none;
}
.dropmenu LI:hover UL UL, .dropmenu LI:hover UL UL UL
{
   top: -999em;
}
.dropmenu LI LI:hover UL
{
   top: auto;
}
.dropmenu LI:hover UL
{
   display: block;
}
.dropmenu LI LI.additional_items
{
   background-color: #FFF;
}
/*The dropdown menu toggle image*/
#menu_toggle
{
   float: right;
   margin-right: 10px;
   padding-top: 3px;
}
#menu_toggle SPAN
{
   position: relative;
   right: 5000px;
}

п.с. Параллельно изучайте CSS и HTML
Пожалуйста

[karavan]

Фисташка аплодирую стоя 

[GeorG]

Фисташка добрая, и почему-то ответила. Вот ответ на ваш вопрос:

(да, я злой)


Я надеюсь, мой ответ, тоже будет в пользу...

[Edward]

Фисташка добрая, и почему-то ответила. Вот ответ на ваш вопрос:

(да, я злой)


Я надеюсь, мой ответ, тоже будет в пользу...

Спасибо,
1) значит достаточно изменить css файл?
2) как изменить со стандартного вида(там логотип находится SMF) на такой, скриншот http://yadi.sk/d/8COuE8oa0OwrZ ? Чтобы ссылки были, а не логотип в правой верхней части?

[Анатолий]

Но код от Фисташки не работает в IE.

[Alek]

А где редактировать надо и что надо изменить??? Чтобы было меню как у Avast

Вам недоступны вложения в этом разделе.

[GeorG]

Стили в файле ../Themes/ваша тема/css/index.css

[Alek]

Стили в файле ../Themes/ваша тема/css/index.css

Что нужно там изменить???

[kak2z]

Что нужно там изменить???

много всего... на пальцах не объяснишь так просто...
легче Вам тему новую поставить)

[GeorG]

Что нужно там изменить???

У них же тоже СМФ, так что можно бессовестно залезть к ним в файл стилей https://forum.avast.com/Themes/default/css/index.css и скопипастить от туда нужное.

От:

Код Выделить Развернуть

/* Styles for the standard dropdown menus.
------------------------------------------------------- */До:

Код Выделить Развернуть

/* Styles for the standard button lists.
------------------------------------------------------- */
Заменить свой код (в тех строчках), тем что был скомунизден.

А ну да, ещё файл https://forum.avast.com/Themes/default/images/theme/topmenu-bg.gif бросить к себе в папку темы ../Themes/ваша тема/images/theme/topmenu-bg.gif

Но так как он короткий, его надо бы удлинить в фотошопе, что бы вот такой фигни не было:


Длину в стилях увеличить, в идентификаторе #main_menu с max-width: 790px; на чего нибудь более существенное.

Модераторам: удалите вложения, что-то они как-то неправильно у меня залились и не удаляются.