Создание меню в блоге.
Очень просто!
Поверьте, что если делать именно так как я расскажу, то у вас появится меню, подобное моему сверху, да оно неказистое, но я ведь вместе с вами облагораживаю блог и поверьте если всё-всё запихнуть в блог - тоже ничего хорошего не получится.
Приступим.
Перед всем этим сохраняем свой старый HTML- читаем первый пункт, во избежании различных осложнений с вашей стороны.
Ищем в тексте HTML кода вашего шаблона такие строки выделенные синим:
<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>
а красные вставляем между ними, это мы обозначили, что появился на свет 'menubar'.
Теперь в CSS-части определяем свойства его, вставлять нужно только в CSS, короче туда, где идёт много определений с такими вот значками #, вставлять обязательно одним блоком:
#menubar h2 {display:none;}
#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}
#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}
#menubar a:hover {
background-color: $headerCornersColor;
}
Заголовка у нашего 'menubar' не будет, а зачем заголовок в меню? Там будут только опции, которые вы сможете добавить в макете.
Сохраняемся, упс и проблема или упс и нормально?
В некоторых шаблонах при сохранении ругается админка. Приблизительно так:
"Invalid variable declaration in page skin: Variable is used but not defined. Input: headerTextColor"
Если так, то это лечится, просто нужно описать переменную, а лучше две переменные, чтобы наверняка, вписываем в код сверху, где описываются переменные:
<Variable name="headerCornersColor" description="Цвет фона меню"
type="color" default="#fff" value="#e6e6e6">
<Variable name="headerTextColor" description="Цвет текста меню"
type="color" default="#c60" value="#5588aa">
Сохраняемся, теперь уж ничто ругаться на будет.
Все изменения цветов буут возможны как обычно, через настройки цветов и шрифтов из админки, кто усёк может побаловаться со шрифтами вводя переменную для шрифта. В общем флаг всем в руки!
Пива всем!
0 коммент.:
Отправить комментарий