it-swarm-eu.dev

Jak nahradit výchozí nabídku Bartik Superfishem

Protože výchozí nabídka Bartik mi neumožňuje vytvářet podnabídku se styly, vytvořil jsem nabídku Superfish.
Jak mohu nahradit výchozí nabídku Bartik za Superfish na přesném místě?

3
jone

Našel jsem zprávu Jak aplikovat styly hlavního menu Bartika na jiné moduly nabídky podobné Superfish . Trikem v podstatě není aplikovat styly CSS používané Superfishem na styly CSS používané motivem, ale zahrnout styly CSS použité motivem do stylů CSS používaných Superfishem.

Kroky hlášené v tomto příspěvku jsou následující (upravuji je, abych změnil formát).

  • Vytvořte nový list stylů (NewStyleSheet.css) a uložte jej do adresáře souboru.
  • Upravte nastavení bloku pro Superfish v/admin/structure/block. Tento seznam kroků předpokládá, že používáte šablonu, která obsahuje „panel nabídek“ nebo podobnou oblast bloků.
    • Přesuňte blok „Superfish X“ do oblasti „Menu Bar“ změnou hodnoty v rozbalovací nabídce na „Menu Bar“.
    • V pravé části stránky nastavení klikněte na „Konfigurovat“ pod položkou „Operace“.
    • V části „Nastavení Superfish“ změňte „Typ nabídky“ na „NavBar“.
    • Volitelně vyberte „NE“ u „Vržených stínů“ i „Automatické šipky“, protože by to trvalo déle, než by se CSS upravilo tak, aby se správně zobrazovalo.
    • V části Pokročilá nastavení přidejte nové umístění stylů do „Extra CSS“.

Toto je obsah nového souboru 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
kiamlaluno

Díky za tyto pokyny, ale myslím, že jsem našel lepší způsob, jak přiblížit Bartikův vzhled:

Proveďte téměř totéž jako výše, ale pro typ nabídky vyberte místo toho „horizontální“ a poté pomocí mého kódu níže vytvořte styl skutečné CSS připomínají Bartikovy nabídky.

Tady je můj SASS kód, který jsem nazval 'superfish-bartik.scss'. Ujistěte se, že Superfish směřuje k tomuto vlastnímu souboru v Cesta k souborům CSS , jak je uvedeno výše.

.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;
            }
        }
    }
}

A tady je CSS, pokud nepoužíváte 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
PWM