Как заменить меню Bartik по умолчанию на Superfish
Поскольку меню Bartik по умолчанию не позволяет мне создавать подменю со стилями, я создал меню Superfish.
Как я могу заменить меню Bartik по умолчанию на Superfish в точном месте?
3
Author: kiamlaluno, 2011-04-26
2 answers
Я нашел отчет, Как применить стили главного меню Bartik к другим модулям меню, подобным Superfish. По сути, хитрость заключается не в том, чтобы применить стили CSS, используемые Superfish, к стилям CSS, используемым темой, а в том, чтобы включить стили CSS, используемые темой, в стили CSS, используемые Superfish.
Шаги, описанные в этом сообщении, следующие (я редактирую их, чтобы изменить формат).
- Создайте новую таблицу стилей (newstylesheet.css) и сохраните ее в ваш каталог файлов.
- Измените настройки блока для Superfish в /admin/структура/блок. Этот список шагов предполагает, что вы используете шаблон, который включает "Строку меню" или аналогичную область блока.
- Переместите блок "Superfish X" в область "Строка меню", изменив значение раскрывающегося списка на "Строка меню".
- Нажмите "Настроить" в разделе "Операции" в крайнем правом углу страницы настроек.
- В разделе "Настройки Superfish" измените "Тип меню" на "Панель навигации".
- Необязательно, выберите "НЕТ" как для "Отбрасывания теней", так и для "Автоматических стрелок", так как для изменения CSS потребуется больше времени, чтобы они отображались правильно.
- В разделе "Дополнительные настройки" добавьте новое расположение таблицы стилей в раздел "Дополнительный CSS".
Это содержимое нового CSS-файла.
/* $Id: whiteTab.css,v 1.0 2011/02/18 05:45:00 erok415 Exp $ */
/*-------------------------------------------------------------*/
/* */
/* Important - Be sure to change all references */
/* from #superfish-3 below to match the number of the */
/* Superfish "X" block region you are using in your */
/* Block Settings. I used block region Superfish 3, */
/* hence I am using #superfish-3 below. */
/* */
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
/* */
/* I have not attempted to use style the 4th level flyout, */
/* Auto-arros or the drop shadow features. */
/* */
/*-------------------------------------------------------------*/
#menu-bar{
margin-bottom:10px;/* Add padding so secondary navigation doesn't run over search sidebar. */
}
sfHover, ul#superfish-3 > li:hover{
background: none repeat scroll 0% 0% transparent; /* Remove the default background on top level tabs in default state and hover state. */
}
ul#superfish-3 li.sfHover li a:hover, ul#superfish-3 li.sfHover li a.active{ /*Secondary Nav: add effect to hover or active state here. */
color:#09F;
width:100%;
}
ul#superfish-3 > li > a{ /* Fist level horizontal navigation. */
margin:4px 2px 0 0; /* Spacing around tabs. */
color: #333;
background: #fff;
background: rgba(255, 255, 255, 1.0);
float: left; /* LTR */
padding:0px 6px 6px 6px;
/* height: 1.8em;
line-height: 2.4em;
padding: 0 0.8em; */
text-decoration: none;
/* text-shadow: 0 0.5px #999; */
font-weight:bold;
-khtml-border-radius-topleft: 8px;
-khtml-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
ul#superfish-3 > li.sfHover {
background: none repeat scroll 0% 0% transparent; /* Remove the default background from the sfHover state. */
}
ul#superfish-3 > li.sfHover > a { /* First level hover and active state. */
margin:4px 2px 0 0; /* Spacing around tabs. */
color: #333;
background: #999;
background: rgba(153, 153, 153, 1.0);
float: left; /* LTR */
padding:0px 6px 6px 6px;
/* height: 1.8em;
line-height: 2.4em;
padding: 0 0.8em; */
text-decoration: none;
/* text-shadow: 0 0.5px #999; */
font-weight:bold;
-khtml-border-radius-topleft: 8px;
-khtml-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/*------------------- Secondary Nav -------------------*/
.sf-navbar > li > ul{ /* Add background color to secondary nab only. */
background:none repeat scroll 0% 0% rgb(51, 51, 51);
background: #333;
}
ul#superfish-3 > li > ul{
left:-15px; /* Align the menu with the left edge of design. */
border-right:30px solid #333;/* Add the background color to the right edge because the style attribute above leaves a blank spot due to global conditions. */
}
ul#superfish-3 > li > ul > li {
left:15px;/*Fix: aligns secondary level nav text with top level nav*/
border:0;
}
ul#superfish-3 > li.sfHover > ul > li > a{ /* Secondary Nav: Remove tab effect from sfHover state applied to lower level nav. */
color:#fff;
background: #333;
-khtml-border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-top: 0px;
border-radius: 0px;
width:100%;
height:2.0em;
line-height:1.1em;
padding:6px 0 0 6px;
margin:0 16px 0 0;
}
ul#superfish-3 > li > ul > li > a{ /* Secondary horizontal navigation. */
color:#fff;
font-weight:bold;
/* text-shadow: 0 0.5px #CCC; */
background: none repeat scroll 0% 0% transparent;
-khtml-border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
padding:0;
}
/*--------------- Third level DropDown navigation ------------*/
ul#superfish-3 > li > ul > li > ul {
-khtml-border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-top: 0px;
border-radius: 0px;
margin:0;
padding:0 0 0 6px;
border:0;
left:-0px;
background: none repeat scroll 0% 0% transparent;
}
ul#superfish-3 > li > ul > li > ul > li {
margin:0px;
border-right:0;
left:0;
border:0;
padding:6px 6px 0px 6px;
background:#333;
}
ul#superfish-3 > li > ul > li > ul > li:hover{
}
ul#superfish-3 > li > ul > li > ul > li > a {
background:#333;
margin:0;
padding:0 6px 0px 6px;
line-height:1.3em;
background:#333;
}
ul#superfish-3 > li > ul > li > ul > li > a:hover {
background: none repeat scroll 0% 0% transparent !important;
}
2
Author: kiamlaluno, 2011-04-26 14:21:30
Спасибо за эти инструкции, но я думаю, что нашел лучший способ приблизить внешний вид Бартика:
Сделайте почти то же самое, что и выше, но для типа меню вместо этого выберите "Горизонтальный", а затем используйте мой код ниже, чтобы стиль фактического CSS напоминал меню Бартика.
Вот мой код SASS, который я назвал "superfish-bartik.scss". Просто не забудьте указать Superfish на этот пользовательский файл в Пути к CSS-файлам, как указано выше.
.block-superfish {
position: absolute; /* position at bottom of header region */
left: 0;
bottom:0;
ul.sf-menu {
background-color: transparent;
li {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(255, 255, 255);
/* RGBa with 0.6 opacity */
background: rgba(255, 255, 255, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF)";
margin: 0 2px;
border-radius: 8px 8px 0 0;
&:hover {
background: rgba(255, 255, 255, 0.9);
}
a {
color: #000;
font: 13px/13px "Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 10px;
text-decoration: none;
}
ul {
margin-top: 3px;
li {
border-radius: 0;
}
}
}
}
А вот CSS, если вы не используете SASS:
.block-superfish {
position: absolute; /* position at bottom of header region */
left: 0;
bottom:0;
}
.block-superfish ul.sf-menu {
background-color: transparent; }
.block-superfish ul.sf-menu li {
/* Fallback for web browsers that doesn't support RGBa */
background: white;
/* RGBa with 0.6 opacity */
background: rgba(255, 255, 255, 0.6);
/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF)";
margin: 0 2px;
border-radius: 8px 8px 0 0; }
.block-superfish ul.sf-menu li:hover {
background: rgba(255, 255, 255, 0.9); }
.block-superfish ul.sf-menu li a {
color: #000;
font: 13px/13px "Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 10px;
text-decoration: none; }
.block-superfish ul.sf-menu li ul {
margin-top: 3px; }
.block-superfish ul.sf-menu li ul li {
border-radius: 0; }
0
Author: PWM, 2014-03-21 02:53:55