PDA

Zobacz pełną wersję : Jak zrobić "elastyczny" pasek banera w szablonie beez20?



Super_mousee
25-07-2013, 09:55
Witam,

Mam Joomlę 2.5.11 i używam szablonów beez5 i beez20 trochę przerobionych.

Chciałabym w moim szablonie beez_20_danka_1280_domyślne zmodyfikować ten pasek na którym jest teraz baner w pliku /cc.joomla/images/panel-iso-1280a.gif. Ten gif to granatowy pasek o szerokości 1280px z logo po lewej i napisem Panel ISO 9001 na środku, pasek jest w kolorze typu gradient pomiędzy granatowym a ciemnoniebieskim. Na ten banner "wchodzi" jeszcze div z Joomli po prawej stronie z "rozmiar tekstu i szukajką.

Chodzi mi o to, że jakkolwiek szablon jest na width:1280px czyli pod monitor 17 lub 19 cali to jednak może być wyświetlany na mniejszym monitorze np. 15 cali starszego notebooka z 1024px lub na większym monitorze 24 cale i 1920px.
Pasek bannera jest zrobiony na sztywno na 1280px i na mniejszym ekranie jest tego paska za dużo a na większym za mało.

Nie jestem pewna jak mogłabym wkodować w szablon w miejsce paska bannera - zwykły div z gradientem koloru np pomiędzy darkblue i blue, który podobnie jak jasnoniebieski pasek z menu poziomym poniżej tego bannera wyświetla się "elastycznie" w zależności od monitora (podobnie jak reszta strony z listą od formularza fabrik) - czyli, żeby wyświetlało się na całą szerokość strony z marginesami np. margin-left: 20px; margin-right: 20px;

Potem chciałabym na tle tego diva:
umieścić po lewej (margin:left: 100px;) obrazek: logo1.jpg
umieścić na środku (<center>) obrazek : nazwa_panelu1.jpg
po prawej powinno zostać: ten div z "rozmiar tekstu" i "Szukaj"

Może ktoś mógłby podpowiedzieć kroki i w jakich plikach i podpowiedzieć trochę kodu?

Załączam skany z monitorów o: 1280px (OK), 1024px(źle), 1920px(źle)

Super_mousee
25-07-2013, 12:42
Nie jest to proste, żeby zrobić na tle gradientowym obrazki, i aby pasek był tak długi jak szerokość danego monitora.
Próbowałam w pliku /css/nature.css
dodać kod, a wkleić banner o długości 1050px; (czyli dostosowany do najmniejszej 15 cali szeroikości 1024px - ale wtedy pod bannerem tło przestaje być nawet na FF gradientowe i widać dosztukowanie na tych większych monitorach 1280px i 1920px,

.logoheader
{
border-top:solid 1px transparent;
color:#fff;
background-color: #00005e;
height: 174px;
background: -moz-linear-gradient(center top , #00005e, #3f78bd) repeat scroll 0 0 #e7e7e7;
background: -webkit-gradient(linear, left top, left bottom, from(#00005e),
to(#3f78bd) );
/* background:url(..|images|nature|bar.jpg) repeat-x top left; */

}

Super_mousee
26-07-2013, 11:59
temat jest rozwiązany, źle podklejałam to gradientowe tło i dlatego mi się nie wyświetlało, szkoda czytać ten wątek - najlepiej usunąć jak można ;-)