Ustawienia strony - kilka pytań

[katakan]

Witam,

od rana dzisiaj pracuję z moim szablonem i mam dwa pytania, strona dostępna tutaj (http://www.jakubki.cba.pl):
- mam dwa menu, jedno w poziomie tuż nad zmieniającym się banerem i drugie pionowe poniżej. Pierwsze jest przewidziane jako menu, to pionowe pełni bardziej rolę pomocniczą.
Jak zauważycie, w poziomym podstrony fajnie się rozwijają, natomiast w pionowym są - moge je z poziomu modułu schować, ale nie ma tam mechanizmu rozwijania jak wyżej - da się to tam również umieścić?

- drugie pytanie dotyczy modułów i komponentów które chciałbym mieć dostępne w menu pod określonym odsyłaczem. O co chodzi? - w menu jak widzicie, mam podstronę Kamera na żywo, pobrałem odpowiedni moduł do obsługi kamery ale nie wiem jak go scalić z pozycją w menu. Chciałbym aby klikając w kamerę na żywo otwierała się podstrona z kamerą na środku. Tworząc w menu podstronę, mogę wybrać różne kategorie (artykuły, kontakty itd) ale nie mam dostępu do modułów i komponentów - jak to powiązać? czy ścieżka php w menu (kamera na żywo) powinna kierować się do zainstalowanego modułu (tutaj kamera)?

Tyle, dzięki za pomoc.
Pozdrawiam

[pawelSafiStudio]

Witaj,

Ad1. Możesz to zrobić przy pomocy modifkacji CSS. Poszukaj w google o CSS dla rozwijanego menu poziomego/pionowego.
Ad2. Podczas dodawania elementu menu, na liście typów łącza powinien pojawić się zainstalowany komponent. Jeśli się nie pojawił, to autor komponentu nie przewidział takiej możliwości. Możesz ew. wybrać łącze URL i podać bezpośredni link do komponentu. Jeśli chodzi o moduł, możesz w modułach przypisać dla jakich elementów menu dany moduł ma się pojawiać. Bezpośrednich łączy do modułów nie zrobisz.

Pozdrawiam.

[katakan]

Są w google różne poradniki, które często łączą ze sobą html z css. Nie wiem jak się poruszać tutaj w przypadku modułów.
Znalzłaem poradniki o instalowaniu dodatkowego modułu menu extend.
Jednak potrzebna jest mi pomoc w tym temacie, bo nie wiem jak to ruszyć.
Z góry dzięki.

[pawelSafiStudio]

A w czym problem, aby dopisać CSS dla tego co generuje Ci moduł menu ?

[katakan]

Hej,
czyli chodzi o to aby zrobić Przyrostek klas CSS modułu ?
W tym celu tworze nowy plik w notatniku z właściwym kodem. Odnśnik do pliku w ustawieniach modułu?

Poszukam jakiegoś gotowego kodu. Zastawnawiałem się, czy nie można skopiować tego co jest obecnie przy górnym menu?
Pozdrawiam

[pawelSafiStudio]

Nie wiem czy ja nie rozumiem Ciebie, czy po prostu dopiero zaczynasz z Joomla!
Jeśli znasz CSS to wystarczy zrobić modyfikację CSS szablonu, bez prefixów, suffixów (chociaż można to wykorzystać). Możesz posilać się CSS'em z górnego menu. Nie wiem o co Ci chodzi z nowym plikiem w notatniku ?

[katakan]

Dobra, to po kolei bo bajzel się robi. Zaczynam z joomla ale szybko sie uczę.
Pytanie zasadnicze, odpowiedzialnym za wyświetlanie się menu i jego sposób jest główny css (styles)? a jeżeli nie to jaki? bo pod folderem modules mam tylko php i javę.
Pozdrawiam

[pawelSafiStudio]

Proponuję zapoznać się z wiki.joomla.pl. To na start. Tam poznasz strukturę katalogów dla modułów, szablonów etc.
Za wyświetlanie może odpowiadać CSS szablonu, lub też CSS modułu jeśli korzystasz z modułu, który wczytuje własny CSS. Dodatkowo możesz nadpisać wygląd modułu w szablonie.
Zainstaluj sobie FireBuga i zobacz który CSS odpowiada za elementy strony, które chcesz zmodyfikować. Następnie modyfikuj. Jeśli to nie wystarczy to nadpisz moduł w szablonie i dostosuj go tak by jego drzewo HTML zdawało egzamin zarówno dla górnego menu jak i bocznego. Chociaż jak patrzyłem na Twoją stronę to modyfikacja CSS wystarczy.

[katakan]

Cześć,

staram się zrobić coś z tym menu, ale nie wiem jak to ruszyć, szukam klikam, w gotowych skryptach jest coś innego, tutaj coś innego. Chce przerobić ten css aby wykonać to menu w jednym pliku styles.css
Na czym stoimy?, za oba menu odpowiada ten fragment kodu (styles.css):


.topmenu {float:right; background:#e1e1e1; padding: 5px; border: 1px solid #fff; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; webkit-bottom-right-radius: 7px; webkit-bottom-left-radius: 7px ;}
.topmenu ul {margin:0; padding:0; float:left; -moz-border-radius: 5px; border-radius: 5px;}
.topmenu ul li {list-style:none;float:left;height:100%;position:relativ e;}
.topmenu ul li a { display:block;padding:0 10px 0 10px; margin:0; height:20px; line-height:20px; -moz-transition: color 0.3s ease 0s, background 0.3s ease 0s; -webkit-transition: 0.3s ease 0s; -o-transition: 0.3s ease 0s;
background: none;color: #555;display: block;position: relative;text-align: left;
text-transform: uppercase; font-size:12px;font-weight:normal; font-family: 'Cuprum', sans-serif; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; webkit-bottom-right-radius: 7px; webkit-bottom-left-radius: 7px ;}
.topmenu ul li.active {}
.topmenu ul li.active a {}
.topmenu ul li:hover {}
.topmenu ul li a:hover{ text-decoration:none; font-weight:normal; font-size:12px; color:#fff;text-shadow:none;}
.topmenu ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}
.topmenu ul li:hover ul, #menu ul li.sfHover ul {left:0;}
.topmenu ul li ul li {padding:0;height:auto;width:180px; margin:0; border:none;}
.topmenu ul li:hover ul li a {text-shadow:none;}
.topmenu ul li:hover ul li { background:none;}
.topmenu ul li:hover ul li a, .topmenu ul li ul li a, .topmenu ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:11px;font-weight:normal;text-shadow:none;}
.topmenu ul li ul li a:hover, .topmenu ul li ul li.active a, .topmenu ul li.active ul li a:hover, .topmenu ul li.active ul li.active a {margin:0; padding:0 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:11px;text-shadow:none;}
.topmenu ul li ul ul, .topmenu ul li:hover ul ul, .topmenu ul li:hover ul ul ul, .topmenu ul li:hover ul ul ul ul, .topmenu ul li.sfHover ul ul, .topmenu ul li.sfHover ul ul ul, .topmenu ul li.sfHover ul ul ul ul {left:-999em;}

#slide-w { margin:0; padding:0; background:#EAEAEA url(../images/bg.png) 0 0 repeat-x; border-bottom:1px solid #d6d6d6;border-top:1px solid #f5f5f5;}
#slide { width:960px; margin:0 auto;}

/* Navigation */
#nav {}
#navl {}
#navr {background: url("../images/mainmenu.png") repeat-x scroll 0 0 transparent;font-family: 'Cuprum',sans-serif;height: 55px;margin-top: -29px;width: 981px;}
#nav {z-index:10; position:relative;}
#nav-left { float:left; width:100%;}
#nav-right { float:right; width:20%;}
#nav ul {margin-left: 3px; padding:0; float:left;}
#nav ul li {list-style:none;float:left;height:100%;position:relativ e; padding-right:1px; margin:0;}
#nav ul li a { display:block;padding:0 15px 0 15px; text-shadow: none; line-height:42px; color:#555; text-decoration:none;font-size:17px;font-weight:normal; border-radius:6px; border-right:1px solid #e1e1e1;}
#nav ul li.active {}
#nav ul li.active a, #nav ul li a:hover {color:#ccff00; text-shadow: none; background:url(../images/mainmenu-h.png) 0 0 repeat-x; }
#nav ul li:hover {}
#nav ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}
#nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}
#nav ul li ul li {padding: 0; height:auto; width:180px; margin:0 auto; border:0; text-align: left; }
#nav ul li ul li:hover ul {left:180px; top:0}
#nav ul li:hover ul li a {text-shadow:none;}
#nav ul li:hover ul li { background:none;}
#nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a; border-right:0; color:#d1d1d1; font-size:12px;font-weight:normal;text-shadow:none; -moz-border-radius: 0px; border-radius: 0px;}
#nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {text-align: left; padding:0px 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:12px;text-shadow:none;}
#nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}
#nav ul li ul li ul li{padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}

/* Sidebar */
#leftbar-w {padding:5px;width:200px;float:left;}
#addthis {float:center; padding-left: 12px; padding-top: 0px;}
#rightbar-w {padding:5px;width:200px;float:right; }
#sidebar {padding:0}
#sidebar .module {margin-bottom: 15px;padding: 5px;}
#sidebar .module-title {font-size:17px;font-weight:100; padding-left:7px; margin:0; background: #f3f3f3; border-left: 6px solid #94e100; color: #555; font-family: 'Cuprum', sans-serif;}
#sidebar .module-title h3 {line-height: 11px;}
#sidebar .module-body {background:#fff; margin-top: 5px;}
#sidebar .module-body p{padding:0; margin:0;}
#sidebar ul li { margin:0 5px; padding:0;}
#sidebar .module ul.menu{margin:5px 0 0 0; padding:0;list-style:none; padding:0; list-style-type:none;}
#sidebar .module ul.menu li{ list-style:none; list-style-type:none;margin:0; padding:0; }
.topmenu ul li a{background-color:#f1f1f1;border-bottom: 1px solid #FFFFFF;color: #575757;display: block;padding: 3px 15px 3px 5px;text-decoration: none; text-align: left;}
#sidebar .module ul.menu li a:hover { color: #575757; background: url(../images/sidehover.jpg) 100% -50px no-repeat #fff;}
#sidebar .module ul.menu li.active a{color:#058CA1;}
#sidebar .module ul.menu li ul {margin:0;}
#sidebar .module ul.menu li ul li {background:none; border:none; margin: 0 0 0 15px; }
#sidebar .module ul.menu li ul li a{ border: 0; color:#999; background:none;text-align:left; padding-left: 11px;}
#sidebar .module ul.menu li ul li a:hover{color: #575757; background: url(../images/sidehover.jpg) 100% -50px no-repeat #fff; }
#sidebar .module ul.menu li.active ul li a{color: #6e99c2;}
#sidebar .module ul.menu li ul li.active a, #sidebar .module ul.menu li.active ul li a:hover{color:#134E8B;}

W firebugu pokazuje mi dokładnie, że menu poziome to linia 75, pionowe na dole 105 i tyle. Są to zupełnie dwie różne części kodu i nie wiem jak to scalić aby na dole menu się rozwijało. Jak to zaadaptować? Wiki joomle mam za sobą i wiele tam odpowiedzi w tej kwestii nie ma, nie znam sie na css na tyle aby to samemu rozkminąć, pomocy.

[ugly kid joe]

następny majster. może najpierw skorzystaj z gotowych rozwiązań, a potem gdzieś sobie ćwicz swoje, kiedy już będziesz wiedział o co ci chodzi.


http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems

[katakan]

ale to jest chyba jasna sprawa, chce mieć menu pionowe w takiej funkcjonalności jak poziomie. Kolega wyżej pisał, że się da, to po co stosować gotowe komponenty, które i tak trzeba będzie dostosowywać do layoutu?

[pawelSafiStudio]

Hmm,

niestety nie mogę zrobić tego za Ciebie, bo nie od tego tu jestem. Ale wskaże Ci drogę. Zgodnie z tym co napisałeś css jest opisany w dwóch różnych miejscach. Ten z #nav masz ok bo się rozwija. Ten z #sidebar masz nie ok bo się nie rozwija. Poszukaj w necie rozwijane menu css. Podpowiedź css:


#sidebar ul.menu li{
position: relative;
}
#sidebar ul.menu li ul{
position: absolute;
left: -9999px;
top: -9999px;
}
#sidebar ul.menu li:hover ul{
left: 100px;
top: 0px;
}

Niestety więcej podpowiedzieć nie mogę. To są podstawy CSS.