Jak zmienić tło w szablonie?

W standardowym kodzie szablonu PrintDesign mamy szare tło z wzorkami - ustawione tak by pokazywało się tuż przy bokach boksu z zawartością bloga. Nie każdemu się to może podoba a jak edytował już kolory menu czy innych elementów w szablonie to warto dopasować sobie także tło.

Jak zmienić obrazek tła?
Należy przejść do Szablon -> Edycja HTML -> kontynuuj -> zaznaczamy "rozszerz szablony widżetów".
Odszukujemy takie coś:

<style type='text/css'>

tuż pod tym mamy taki kod:

body{background:#F4F4F4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhryjCXzCLtBTYts-0pENSVs9Rvzt4uO7GQ7aM_iD-FBYAa3AJHcIGDnX0tCQIcUE5NhkAJ4emd_f-Kh_dRGRzOuqkgjHb188AtE2Jt9Qzkk5wMVR9J5DlWPK_k3_MRYnghta6d5vN9XnA/s1600/background.jpg) center top no-repeat;color:#535353;font-family: Arial, Verdana;font-size: 12px;margin:0px;padding:0px;}

 jest tam URL z grafiką: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhryjCXzCLtBTYts-0pENSVs9Rvzt4uO7GQ7aM_iD-FBYAa3AJHcIGDnX0tCQIcUE5NhkAJ4emd_f-Kh_dRGRzOuqkgjHb188AtE2Jt9Qzkk5wMVR9J5DlWPK_k3_MRYnghta6d5vN9XnA/s1600/background.jpg (1600x781 px) należy zamienić ją na własną. Wartość #f4f4f4 oznacza kolor szary poza obszarem grafiki (czyli jak ktoś ma rozdzielczość 1920 to po bokach widzi ten kolor.

Jak ustawić powtarzający się wzorek?
Ustawiamy odpowiedni URL obrazka a następnie z powyższego kodu kasujemy to:

no-repeat

Niepowtarzające się tło i wyśrodkowane?
Odpowiada za to fragment użyty w kodzie na górze, czyli:

center top no-repeat

Jak ustawić tylko kolor tła?
Jeżeli chcemy mieć tylko kolor, bez żadnych obrazków to cały fragment:

background:#F4F4F4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhryjCXzCLtBTYts-0pENSVs9Rvzt4uO7GQ7aM_iD-FBYAa3AJHcIGDnX0tCQIcUE5NhkAJ4emd_f-Kh_dRGRzOuqkgjHb188AtE2Jt9Qzkk5wMVR9J5DlWPK_k3_MRYnghta6d5vN9XnA/s1600/background.jpg) center top no-repeat;

kasujemy a zamiast tego wklejamy to:

background-color: #eeeeee;

gdzie #eeeeee to wybrany przez nas kolor dla tła bloga.

Jak zrobić tło rozciągające się wraz z ekranem przeglądarki?
przeczytasz: tutaj.

Jak zrobić żeby tło było nieruchome a przesuwała się jedynie ramka bloga?
do znacznika body dopisujemy jeszcze jedną linię:

background-attachment: fixed;

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

Jak poszerzyć nagłówek bloga?

Blogi typu star-poli czy ananasowemsp mają duże nagłówki na całą szerokość bloga. Po wgraniu szablonu PrintDesign i ustawieniu nagłówka za pomocą gadżetu - dostępnego na podstronie Układ - niestety nie osiągamy takiego efektu. Dlaczego?

W standardowej opcji nagłówek tego szablonu składa się z dwóch kolumn, w jednej mamy tytuł lub logo a w drugiej opis bądź banner reklamowy. Nie przewidziano tam możliwości wstawienia wielkiej grafiki.

Jak zatem poszerzyć miejsce na nagłówek?

Trzeba dokonać kilku modyfikacji by zdjęcie dodane w gadżecie pojawiło się na całą szerokość bloga. Należy edytować parę marginesów, zmienić ustawione na sztywno wysokości boksów. Przejdź na forum i przeczytaj => ten temat.

Można też zrobić nagłówek zmieniający się po każdym odświeżeniu strony. Wystarczy przygotować parę obrazków do rotatora (najlepiej bez tła pod postaciami) a następnie udać się na forum i zastosować rozwiązania opisane w drugiej części powyższego tematu.

Instrukcja przewidziana jest dla szablonu Print Design, ale rozwiązań użytych w niej można próbować w pokrewnych skórkach. W przypadku zmiennego nagłówka rozwiązanie jest uniwersalne i da się wprowadzić wszędzie gdzie dostępna jest edycja kodu HTML.

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

PrintDesign - skąd pobrać i jak wgrać szablon na bloga?

Ten temat pasuje raczej na jeden z pierwszych wpisów, ale blog dopiero startuje, więc nie jest jeszcze za późno. Wpis przeznaczony jest dla osób, które chcą mieć taki szablon jak na tym blogu. Taki sam ma star-poli czy ananasowemsp.

Należy pamiętać, że szukamy szablonu na Blogger. Print Design dostępny jest także na platformę Wordpress, dlatego trzeba zwrócić uwagę czy paczka, którą pobieramy ze strony jest wersją naszego theme dla Blogspot.

Poniżej kilka linków do stron, gdzie można pobrać szablon PrintDesign:
http://www.premiumbloggertemplates.com/2011/10/printdesign-premium-blogger-template.html
http://btemplates.com/2011/blogger-template-printdesign/
http://www.templatebloggers.com/2011/11/printdesign.html

Podobny do nich jest np. Bynary (Binary Theme): http://btemplates.com/2012/blogger-template-bynary/demo/ tylko ma rotator na całą szerokość bloga. Drugi to Instinct: http://www.premiumbloggertemplates.com/2011/12/instinct-premium-blogger-template.html


Mamy szablon na dysku i co dalej? Jak wgrać go na bloga?
postępujemy według instrukcji na forum: Jak wgrać szablon na Blogger.

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

Jak rozciągnąć tło nagłówka na blogu?

Odpowiedź na pytanie z komentarza.

Jak rozciągnąć tło pod nagłówkiem tak jak na star-poli oraz ananasowemsp?
To samo pytanie padło także na forum Blogowicza, odsyłam zatem do tego tematu (4 i 5 post).

Przy poszerzaniu bloga i jego elementów (menu boczne, ramka wpisów) w szablonie PrintDesign przydatny może być jeszcze ten wątek.

Jeżeli chcesz wstawić zdjęcie tak żeby było widoczne na całą szerokość nagłówka przeczytaj nowszy wpis na tym blogu => edycja nagłówka PrintDesign.

Przejdź do strony wpisu i dodaj komentarz lub pytanie »