10. Wstawianie nagłówka i jego edycja

Jak dodać nagłówek na bloga używając kodów CSS? Dzisiaj odpowiem Wam na to pytanie. Samo wstawienie nagłówka nie jest trudne. Schody zaczynają się dopiero przy zgraniu go z układem bloga.

Najpierw pokażę Wam jak wstawić nagłówek do układu otwartego. Wszystkie układy macie scharakteryzowane w oddzielnym artykule.

Za przykład posłuży nam jeden z moich nagłówków: przykładowy nagłówek. 

Po przygotowaniu sobie bloga w projektancie motywów bloggera wchodzimy w zaawansowane i klikamy w Dodaj arkusz CSS. Jak widać pole jest puste. Musimy je zapełnić kodami. Nagłówki do układów otwartych zawsze dodaję używając selektora body. Kod wygląda następująco:

body {

     background-image: url(https://orig00.deviantart.net/185a/f/2016/026/c/8/with_you_i_m_alive_by_oreuis-d9peemx.png);

}

background-image definiuje zdjęcie tła. Po dwukropku wpisana jest wartość url(link do nagłówka). 

Nagłówek jest dodany, ale nie wygląda estetycznie. Jest ucięty w połowie, a pod nim jest czarne tło. 

Najpierw zajmiemy się kolorem tła, aby było jednolite. Do tego posłuży nam kod background-color.

body {

    background-image: url(https://orig00.deviantart.net/185a/f/2016/026/c/8/with_you_i_m_alive_by_oreuis-d9peemx.png) ;

     background-color: #0b626c ;

}

Wpisana wartość po hashtagu to kod html koloru, który pobrałam z zamalowanym krawędzi nagłówka. Aby taki kolor pobrać należy posłużyć się próbnikiem koloru, który znajduje się w każdym programie graficznym lub dodać do przeglądarki wtyczkę z nim. 

Kolor tła jest już jednolity, jednak wciąż pozostaje ucięty, a na nim znajdują się kolumny. Nagłówek należy umiejscowić. Posłuży nam do tego kod na pozycję tła background-position.

body {

     background-image: url(https://orig00.deviantart.net/185a/f/2016/026/c/8/with_you_i_m_alive_by_oreuis-d9peemx.png) ;

     background-color: #0b626c ;

     background-position: top center ;

}

top center oznacza, że nagłówek ma być wyśrodkowany i zaczynać się od góry. W zależności od układu nagłówka można używać innych wartości. Zamiast top wpisać bottom, a zamiast center, right albo left. 

Kiedy nagłówek wygląda już w porządku należy przesunąć wszystkie kolumny w dół. Zamiast jednak bawić się pozycjonowaniem kolumn, ja używam kodu, który ustawia wysokość nagłówka. 

.header {

     height: 480px ;

}

Jak widać został użyty drugi selektor .header. Przypomnę tylko, że grafikę wstawiliśmy w body, czyli w blogu. Nagłówek, czyli nasz .header, domyślnie jest pusty, jednak możemy określić jego wysokość. W tym przypadku height: 480px.

Tym oto sposobem mamy wstawiony nagłówek do układu otwartego. Jeśli chcemy wstawić nagłówek wyrównany do prawej bądź lewej strony wystarczy zmienić wartości w background-position.

wersja wideo:

To nie koniec instrukcji, bo mamy jeszcze nagłówki innego typu. W układzie otwartym nie musimy bawić się pozycjonowaniem kolumn. Sprawy się komplikują gdy do czynienia mamy z układem zamkniętym. Załóżmy, że chcemy by nasz nagłówek był na długość posta. (przykładowy nagłówek)

Tym razem grafikę wstawiamy w .header, nie w body. Używamy jednak podobnych wartości:

.header {
     background-image: url(http://funkyimg.com/i/2JLii.png) ;
}

Nagłówka jeszcze dobrze nie widać, bo nie wpisaliśmy jego wymiarów. W przeciwieństwie do body, w .header trzeba napisać wysokość i szerokość pracy. W tym przypadku jest to 600px na 450px.

.header {
     background-image: url(http://funkyimg.com/i/2JLii.png) ;
     height: 450px ;
     width: 600px ;
}

width odpowiada za szerokość, a height za wysokość.

Aby widzieć rzeczywisty rozmiar kolumn należy dodać im kolor. Np.

.column-center-inner {
     background: #6f121e ;
}

.column-right-inner {
    background: #6f121e !important ;
}

Kiedy kolumna środkowa, czyli ta zawierająca post oraz kolumna prawa mają swoje tła, bez problemu widzimy, że nie pasują wymiarami do nagłówka. Jak temu zaradzić? Kolumna środkowa powinna mieć tą samą szerokość co nagłówek, czyli 600px.

.column-center-inner {
     background: #6f121e ;
     width: 600px ;
}

Domyślnie w każdym elemencie bloga jest margines wewnętrzny, przez co kolumna, mimo po wpisaniu kodu na szerokość jest dłuższa od nagłówka. Aby się tego pozbyć wystarczy dać wartość 0px dla marginesu wewnętrznego.

.column-center-inner {
     background: #6f121e ;
     width: 600px ;
     padding: 0px !important ;
}

Teraz trzeba tylko przesunąć kolumny tak by przylegały do nagłówka. Nadajemy kolumnie pozycję relatywną (o pozycjach pojawi się artykuł) i przesuwamy ją za pomocą wartości left (bądź right) i top (bądź bottom).

.column-center-inner {
     background: #6f121e ;
     width: 600px; 
     padding: 0px !important ;
     position: relative ;
     left: 16px ;
     top: -30px ;
}

.column-right-inner {
    background: #6f121e !important ;
     position: relative ;
     top: -480px ;
     left: -44px ;
}

Krawędzie kolumn idealnie przylegają krawędziami nagłówka, tworząc spójną całość.

wersja wideo:

Mam nadzieję, że instrukcja okaże się przydatna. W razie pytań piszcie śmiało, postaram się na nie odpowiedzieć. Mile widziane propozycje na kolejne artykuły.