--=REKLAMA=--

JA Purity/Obrazek wypełniający całe pole nagłówka

Z Joomla!WikiPL

Cel: wypełnienie całkowite lub niemal całkowite nagłówka pożądanym obrazkiem.

Zmianom będą ulegać pliki

templates/ja_purity/index.php
templates/ja purity/css/template.css


A)


1. Usunięcie z pierwotnego szablonu loga. W tym celu należy otworzyć plik index.php i usunąć wskazany ustęp: Eraselog.jpg

2. Usunięcie prostym, ale skutecznym sposobem tzw. "zalewania obrazka", czyli headermask. W tym celu należy otworzyć plik template.css i przy wierszu 983 usunąć cały ustęp ja-headermask.

Należy otworzyć także plik index.php i usunąć fragment
 
w wierszu 114.

Po wykonaniu operacji obrazek w polu wyświetlających się losowo obrazków będzie miał wyraźnie zaznaczone kontury, nie będzie "zalewany".

3. Usunięcie pola wyświetlających się losowo obrazków po prawej stronie nagłówka. W tym celu wystarczy jedynie usunąć wskazany linią fragment:

Poprawione2.jpg

Po wykonaniu wszystkich powyższych operacji w nagłówku pozostanie jedynie czarne tło (#333333)

4. Ustawienie tła nagłówka jako pożądanego obrazka. W tym celu należy otworzyć plik template.css i zmienić: Tłozmiana.jpg


Po wykonaniu operacji czarne tło (#333333) zastąpione zostanie, po zmianie stanowiącym tło, obrazkiem. Co ważne, obrazek powinien być zapisany w formacie gif (niestety straci przy tym na jakości). Teraz należy jedynie zeskalować obrazek dopasowując go do rozmiarów nagłówka. Wysokość - 80px, Szerokość - metodą prób i błędów.

Ponieważ efekt takiego wypełnienia obrazkiem tła był wg.mnie nieestetyczny, spróbowałem więc innym sposobem:



B)

1. Należy przywrócić wykasowany w punkcie A)1. kod loga.

2. Dodaj odpowiednie parametry w pliku template.css (wiersze 956-963):

    h1.logo a {
    	width: 208px;
    	display: block;
    	background: url(../images/logo.png) no-repeat;
    	height: 80px;
   	position: absolute;		<---- POPRAW TUTAJ
   	top: 10px;			<---- DODAJ TEN WIERSZ
   	left: 10px;			<---- DODAJ TEN WIERSZ
    	z-index: 100;
    }

3. Odpowiednio zmieniając wartość parametru "left" oraz "width", rozciągamy pole przeznaczone na logo(w tym wypadku nasz obrazek) w obszarze nagłówka. Ustaliwszy parametry, skalujemy do nich obrazek i zapisujemy go jako logo.png. Następnie w folderze /images podmieniamy nasz obrazek z pierwotnym obrazkiem loga Joomli o nazwie logo.png. Tak obrazek w nagłówku prezentuje się z ustawieniami "width: 1220px;", "left: 1px;", "top: 10px;" oraz "height: 60px" :

Header.jpg

Dziękujemy za wkład

» Stefan Wajda [zwiastun],