PDA

Zobacz pełną wersję : Zmiana wyglądu guzików mega menu


Maks
05-09-2011, 23:00
Witam. Wiecie gdzie zmienić wygląd mega menu w szablonie Ja Purity II ? Chodzi mi o zmianę z tych guzików

http://img43.imageshack.us/img43/9081/megamenu.png (http://imageshack.us/photo/my-images/43/megamenu.png/)

Na takie coś

http://img171.imageshack.us/img171/3691/button2g.png (http://imageshack.us/photo/my-images/171/button2g.png/)

oczywiście w środku ikonka i tekst.

Jak wie ktoś gdzie co zmodyfikować to niech się podzieli rozwiązaniem :)
zwiastun
05-09-2011, 23:02
Firebug wie, zapytaj go!
Maks
05-09-2011, 23:32
Już sprawdzałem kod ale nie firebugiem tylko "zbadaj element" z menu kontekstowego. Wiem że jest to menu.css (pisałeś też o tym gdzieś na forum gdy szukałem rozwiązania i tyle sie dowiedziałem). Wiem też że to część od 20 linijki kodu w tym pliku która wygląda tak



/* lv - 0
-----------------------------------*/
/* Styling ---*/

ul.level0 {
border-right: 1px solid #666666;
float: left;
margin: 0;
padding: 0;
}

ul.level0 li.mega {
background: none;
display: block;
float: left;
margin: 0;
padding: 0;
}

ul.level0 li.mega a.mega {
border-left: 1px solid #666666;
border-right: 1px solid #333333;
color: #cccccc;
display: block;
font-weight: bold;
line-height: normal;
margin: 0;
padding: 8px 15px;
text-decoration: none;
}

ul.level0 li.mega .has-image {
padding-left: 25px;
display: block;
background-repeat: no-repeat;
background-position: left top;
}

ul.level0 li.mega span.menu-title { display: block; }

ul.level0 li.mega span.menu-desc {
display: block;
font-weight: normal;
font-size: 92%;
color: #999;
}

ul.level0 li.mega a img {
float: left;
padding-right: 5px;
}

ul.level0 li.over, ul.level0 li.haschild-over {
background: url(../../images/grad1-mask.png) repeat-x top #666666;
}

ul.level0 li.haschild a.mega span.menu-title,
ul.level0 li.haschild-over a.mega span.menu-title {
background: url(../../images/arrow3.png) no-repeat left center;
padding-left: 12px;
}

ul.level0 li.haschild a.mega span.menu-desc,
ul.level0 li.haschild-over a.mega span.menu-desc {
padding-left: 12px;
}

ul.level0 li.active {
background: url(../../images/grad1-mask.png) repeat-x top #006699;

Tylko które konkretnie części edytować aby stworzyć obramowanie jak chciałem a dodatkowo każdy guzik z osobna wyglądał tak samo ?
zwiastun
06-09-2011, 00:23
Dlatego Ci polecałem Firebuga (i FF), bo choć narzędzie w Chrome jest podobne, to jednak nie to samo. Znajdziesz i obrazki, i kod, który trzeba edytować.
Maks
07-09-2011, 19:50
Patrze i dalej nie wiem jak to ruszyć. Mam coś takiego


ul.level0 li.haschild a.mega span.menu-desc, ul.level0 li.haschild-over a.mega span.menu-desc {
padding-left: 12px;
}
mega.css (wiersz 78)
ul.level0 li.mega span.menu-desc {
color: #999999;
display: block;
font-size: 92%;
font-weight: normal;
}
mega.css (wiersz 56)
span.menu-desc {
color: #999999;
display: block;
font-size: 92%;
font-weight: normal;
}
template.css (wiersz 1034)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
}
addons.css (wiersz 18)
Dziedziczony zspan.has-image
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
addons.css (wiersz 18)
Dziedziczony za#menu13.mega /component/content/
ul.level0 li.mega a.mega {
color: #CCCCCC;
font-weight: bold;
line-height: normal;
text-decoration: none;
}
mega.css (wiersz 35)
.ja-megamenu a.over, .ja-megamenu a.active {
color: #FFFFFF !important;
}
mega.css (wiersz 13)
a {
color: #006699;
text-decoration: underline;
}
template.css (wiersz 35)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
addons.css (wiersz 18)
Dziedziczony zli.mega
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
addons.css (wiersz 18)
Dziedziczony zul.megamenu
ul {
list-style: none outside none;
}
addons.css (wiersz 45)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
addons.css (wiersz 18)
Dziedziczony zdiv.ja-megamenu
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
addons.css (wiersz 18)
Dziedziczony zdiv.main
#ja-mainnav .main {
font-size: 12px;
}
template.css (wiersz 1022)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
addons.css (wiersz 18)
Dziedziczony zdiv#ja-mainnav.wrap
#ja-mainnav {
line-height: 1;
}
template.css (wiersz 1014)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
addons.css (wiersz 18)
Dziedziczony zdiv#ja-wrapper
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
addons.css (wiersz 18)
Dziedziczony zbody#bd.fs3
body#bd {
color: #333333;
}
template.css (wiersz 20)
body.fs3 {
font-size: 12px;
}
template.css (wiersz 26)
body {
color: #000000;
font-family: "Segoe UI",Arial,Helvetica,sans-serif;
line-height: 1.5;
}
template.css (wiersz 13)
body {
line-height: 1;
}
addons.css (wiersz 34)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
addons.css (wiersz 18)
Dziedziczony zhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}

I dalej nie wiem co podmienić aby dodać / zmienić ten button na grafikę jak chciałem :obojetny:
zwiastun
07-09-2011, 20:17
To zostaw to w spokoju albo wybierz się na kurs projektowania szablonów. Ja też chciałbym mieć wiele, ale nie mam, bo mnie na to nie stać.
Zmiana "tych guzików" na "takie" wymaga przebudowy całego tego menu. A w gruncie rzeczy jest poronionym pomysłem.
Jeśli chce się wykonywać takie prace, trzeba posiąść taką wiedzę i umiejętności w zakresie CSS, żeby sobie poradzić bez zadawania pytań na poziomie, na jakim je zadajesz.
To nie jest zadanie dla nowicjuszy.
Maks
07-09-2011, 23:59
Trzeba było tak od razu że roboty więcej niż to warte ! Do zamknięcia, poszukam może innego szablonu "z gotowym" guzikiem.
a_m
08-09-2011, 00:14
szukanie szablonu dla guzika, to dopiero warte zachodu; nie wiem czy szybciej nie "rozkminisz" tego firebugiem + ogarniesz przy okazji podstawy css
Maks
08-09-2011, 00:21
Nie no, źle się wyraziłem, nie będę dla guzika zmieniał szablonu i wszystkiego ale może zmienię coś, poszukam dodatku, alternatywy dla tego pomysłu bo wykonanie nie należy do najłatwiejszych.
Ucze się html/css (poluje też na książkę) ale tutaj potrzeba czasu. Ten szablon jest rozbudowany galancie jak na moje zdolności więc nie wiem czy to ogarnę i zmienię, w każdym razie pokombinuję z pomocą do niego na zagranicznym forum tego szablonu i jakoś się to zmieni, jak nie da rady to trudno.
Wiem że w sieci pełno jest kursów ale ja jakoś wolę z książki się uczyć niż czytać na lapie.
a_m
08-09-2011, 00:38
forum, to nie miejsce na takie poradniki, ogólnie - grafikę "rozcinasz" jeden element np. dla li, drugi dla li a, zobacz - firebugiem - jak jest zroboine menu na np. rockettheme (tam, gdzie jest zaokrąglony guzioł); inne rozwiązanie - nauka css3