Edycja Szablonu Print Design i podobnych do niego.

Odpowiadam na pytania zadawane tylko w komentarzach pod wpisami!

 

piątek, 27 kwietnia 2012

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;
Przydało się? Polub i poleć znajomym:

19 komentarzy:

  1. Jak zrobić tło żeby środek był np. biały zlewający się z szablonem a boki w jakimś wzorku ?

    OdpowiedzUsuń
  2. to zadanie dla grafika ;) trzeba skorzystać z gradientu i ustawić go po bokach białego elementu, wtedy będzie przenikał w tło pod nim.

    OdpowiedzUsuń
  3. Nie mogę tego zrobić u siebie. Szukałem nawet wyrywkowo kodu który podałeś ale niestety. Lubię bawić się grafiką, więc mógłbym poszaleć nieco z moim "nibyblogiem" ale coż :((
    Jakaś podpowiedź dodatkowa ?
    http://free-all-passwords.blogspot.com/

    OdpowiedzUsuń
  4. w widokach dynamicznych tło zmieniasz w Szablon -> dostosuj -> tło

    OdpowiedzUsuń
  5. Dzięki za szybką odpowiedź ;]
    Być może źle patrzę ale tam do zmiany jest tylko kolor tła posta [chciałem dać na tło jakiś PNG].
    Popróbuję jeszcze z tym CSSem - może coś mi wyjdzie [bokiem ;] - jeszcze mi się klawiatura sypnęła nieco - SHIFTy nie działają, jeno CAPSLOCK - masakra jakaś ;]
    Ewentualnie mnie naprostuj jeżeli masz jeszcze ochotę i możesz coś doradzić.
    Jeszcze raz thx

    OdpowiedzUsuń
  6. Gdzie dokładnie znajduje się ten kod?

    OdpowiedzUsuń
  7. Znalazłem, ale u mnie nie ma w ogóle w pobliżu tego kodu style type='text/css' .

    OdpowiedzUsuń
  8. Gdzie dopisać to background-attachment: fixed;?
    Dopisywałem obok body, obok no-repeat i nic nie działało

    OdpowiedzUsuń
  9. style dopisujemy do znaczników wewnątrz klamry {} - przypatrz się jak wyglądają inne style w szablonie i zrób według tego schematu.

    OdpowiedzUsuń
  10. A mniej więcej na jakiej wysokości jest ten kod. Szukałam dwa razy i nie znalazłam.

    OdpowiedzUsuń
  11. hej, ja mam pytanie - szukam pomocy juz wszedzie mam nadzieje, ze tutaj moja droga sie skonczy ;-) mam dynamiczny szablon i ciagle znika mi tło (jak to przy dynamicznym szablonie ;-). ja je ustawiam, zatwierdzam, ono sie pojawia- ale kiedy chce wyswietlic bloga, juz go nie ma. juz szlag mnie trafia powoli - pomóż! :-)

    OdpowiedzUsuń
  12. Bez obrazy, ale jak dla mnie to najbardziej niezrozumiała instrukcja jeżeli chodzi o ten szablon Print design :(

    OdpowiedzUsuń
  13. Masz kod i potem zostaje rozłożony na czynniki proste. Jeżeli nie rozumiesz, to polecam najpierw kurs HTML ;=)

    OdpowiedzUsuń
  14. Jak zrobić to pierwsze polecenie? Bo rozumiem, że muszę wpierw wejść w szablon, potem ''Edytuj kod HTML'', tak? A co potem? Bo nie mam wyżej wymienionych rzeczy, typu ''kontynuuj'' i te zaznaczanie "rozszerz szablony widżetów".

    OdpowiedzUsuń
  15. nie znalazłam ani jednego ani drugiego kodu a szukalam z godzine jak nic :/ jakos inaczej sie da ?

    OdpowiedzUsuń
    Odpowiedzi
    1. hej, ta instrukcja dotyczy konkretnego szablonu - printDesign, który jest już wiekowy. Sprawdź inne -> nowocześniejsze szablony na bloggera

      Usuń

Przed zadaniem pytania przeczytaj to: regulamin.
Odpowiadam tylko na pytania osób, które obserwują tego bloga.