Megoldva Menu egyedi dizájnolása css felülírással gantryban hydrogén sablonnál

  • csicsa55
  • csicsa55 profilkép Témaindító
  • Nem elérhető
  • Joomla rajongó
  • Joomla rajongó
  • Mivan Ottó? Mi a mottó? M(olnár)Ottó
Több
2017 febr. 05 14:23 #1 Írta: csicsa55
csicsa55 létrehozta a témát: Menu egyedi dizájnolása css felülírással gantryban hydrogén sablonnál
Íme az oldal, amin ráncfelvarrást végeztem:

baba-mama-bizi.hu/

A menut kicsit megdizájnoltam. Szeretném, ha a menüpontok rámutatáskor és aktív állapotban teljesen más színnel jelenjenek meg. A gantry dokumentációjában nem találtam leírást, hogy kell az adott osztályokat meghívni.

Íme az idevágó felülírás:

//Menu
.g-main-nav .g-toplevel > li > .g-menu-item-container {
font-size: 14pt;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin:3px;
background: #07E3F9;
background: -webkit-linear-gradient(top, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
background: -moz-linear-gradient(top, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
background: -o-linear-gradient(top, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
background: -ms-linear-gradient(top, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
background: linear-gradient(to bottom, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
-svg-background: linear-gradient(top, #15E6F9 0, #5BEDFB 15%, #24E8F9 50%, #06E3F9 50%, #05B7C7 50%, #06E3F9 95%, #0BE5F9 100%) no-repeat;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border-bottom: 3px solid #F804EC;
}

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2017 febr. 06 06:53 #2 Írta: Zotius
Zotius válaszolt a témára: Menu egyedi dizájnolása css felülírással gantryban hydrogén sablonnál
Az adott elemnek az "alap" állapotán felül három megkülönböztetett állapotot tudsz kezelni: hover, active, focus
A menüelem osztály neve után odaíírva (kettősponttal elválasztva) ezeket az állapotokat is tudod formázni.
Itt egy kis segítség , például:
A {color: red;}
A:hover {color: cyan;}
A:active {color: maroon;}
A:focus {border: 1px solid red;}
A:focus:hover {color: lime;}

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius
A következő felhasználók mondtak köszönetet: csicsa55

Jelentkezz be, hogy te is részt vehess beszélgetésben!

  • csicsa55
  • csicsa55 profilkép Témaindító
  • Nem elérhető
  • Joomla rajongó
  • Joomla rajongó
  • Mivan Ottó? Mi a mottó? M(olnár)Ottó
Több
2017 febr. 06 20:57 #3 Írta: csicsa55
csicsa55 válaszolt a témára: Menu egyedi dizájnolása css felülírással gantryban hydrogén sablonnál
Köszönet. Részemről a topic zárható.

Jelentkezz be, hogy te is részt vehess beszélgetésben!