--=REKLAMA=--
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:
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ąć fragmentPo 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:
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ć:
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" :