Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów, fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu



::
Autor Wiadomość
ultraman23 
Blogger.Klub

Dołączył/a: 19 Kwi 2013
Posty: 97

Wysłany:    [Szablon Lefty] Dopasowanie szerokości i tła w pasku bocznym

Witam serdecznie. W końcu przeniosłem się z bloggera do siebie, ale ogarnięcie własnego szablonu na wordpressie okazało się trudniejsze niż myślałem i chciałem poprosić o porady. Wybrałem maksymalnie prosty szablon, bo uznałem, że jego obsługa będzie łatwiejsza, a poza tym lubię prostotę. Szablon nazywa się Lefty ( http://themes.gigr.pl/blog/lefty/ ). Trochę się już pobawiłem i zmieniłem, ale dalej mam związane ręce.

Może wymienię w punktach co bym chciał zmienić:

1. Szablon jest responsywny, ale chciałbym, żeby jego wielkość nie była mniejsza niż X px, bo obrazki i szerokość tekstu są za małe. To coś po boku mogłoby zostać w normalnych rozmiarach. Aha, trochę za daleko od tej ramki po lewej zaczyna się tekst. Odległość między nimi również chciałbym modyfikować.

2. Co do tego "cosia" to w Demie jest pokazane, że ciągnie się to przez całą długość strony, podczas gdy u mnie ucina się niedaleko po kategoriach i dalej jest już tylko białe tło. Chciałbym to zmienić na takie, jakie jest w Demie.

To te 2 najważniejsze. Jak się uda to może będę prosił o pomoc z kosmetyką : )

Jest mi ktoś w stanie pomóc?
 
  podziel si� tym postem na:




Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do grupy Bloggerów na FB

Lukem 
Blogowicz.Friend

Pomógł: 89 razy
Dołączył/a: 01 Kwi 2006
Posty: 1739

Wysłany: 2014-01-14, 12:04   

Trochę będzie trudno bez podglądu bloga na żywo, ale przynajmniej pokażę, gdzie czego szukać.

Responsywność w tym szablonie jest skoncentrowana wokół kilku progów szerokości ekranu i fragmenty CSS odpowiadające za zachowanie w tych prograch można odnaleźć w style.css szukając tzw. media queries (zaczynających się od @media i zawierających zazwyczaj jakiś graniczny punkt - najpewniej szerokość w pikselach - do którego dane reguły obowiązują):

- dla szerokości ekranu poniżej 767px:

Kod

@media only screen and (max-width: 767px) { //... }


- od 768px do 959px:

Kod

@media only screen and (min-width: 768px) and (max-width: 959px) { //... }


- od 960px w górę - w zasadzie cała reszta arkusza nie objęta powyższymi warunkami.

ultraman23 napisał/a:

Szablon jest responsywny, ale chciałbym, żeby jego wielkość nie była mniejsza niż X px, bo obrazki i szerokość tekstu są za małe.


Dużo zależy od szerokości, jaką chcesz zostawić, ale możliwe że można byłoby pozbyć się jednego progu responsywności i dopasować szerokości elementów (w szczególności .container-left i .container-right, bo to one najbardziej reagują na zmiany wymiarów) na jeden z poniższych sposobów:

- nadając im sztywne wymiary w pikselach na najniższym progu responsywności, jaki zostanie - dla paska bocznego (aka "to coś po boku") można byłoby tak zrobić,
- nadając im płynne wymiary za pomocą atrybutów min-width i max-width.

Metodą prób i błędów powinieneś dojść do zamierzonego efektu.

Zmieniając minimalny próg wielkości szablonu weź pod uwagę fakt, jak szablon zachowa się na urządzeniach mobilnych, bo cały koncept responsywności jest przemyślany głównie pod ich kątem. Ale to na marginesie.

Polecam używanie Chrome i zmienianie CSS za pomocą jego narzędzi deweloperskich (dostępne pod klawiszem F12). Następnie klikasz na ikonę lupki na samym dole, wybierasz na stronie element, który chcesz dopasować i w okienku po prawej w zakładce Elements masz wypisane wszystkie reguły CSS opisujące dany element, łącznie z media queries. Zwracaj uwagę na wartości liczbowe i zmieniając je sprawdzaj efekt na bieżąco. Jeśli "zabangla", to zapisz zmianę w stylu CSS. Niebawem wrzucę tu tutorial, jak robić takie rzeczy.

Cytat

Aha, trochę za daleko od tej ramki po lewej zaczyna się tekst.


Dostosuj sobie padding na elemencie .site-main:

Kod

.site-main { float: left; width: 90%; max-width: 1000px; padding: 80px; }


Obecny padding:80px oznacza, że na wszystkich brzegach jest po 80 pikseli odstępu. Sposób zmiany dla poszczególnych brzegów jest opisany chociażby tutaj, ale można teżopisywać wielkości osobno (np. padding-top:10px; padding-bottom:10px; padding-left:10px; itd.).

Cytat

Co do tego cosia to w Demie jest pokazane, że ciągnie się to przez całą długość strony, podczas gdy u mnie ucina się niedaleko po kategoriach i dalej jest już tylko białe tło. Chciałbym to zmienić na takie, jakie jest w Demie.


Tu już musiałbyś pokazać szablon po zmianach - w demie działa to poprawnie i ciężko mi diagnozować przyczynę.
 
  podziel si� tym postem na:
ultraman23 
Blogger.Klub

Dołączył/a: 19 Kwi 2013
Posty: 97

Wysłany: 2014-01-14, 17:19   

Jasna sprawa, już podaję. I dzięki za odpowiedź, wieczorem będę kombinował i może coś ruszy

http://czerepko.pl/

[ Dodano: 19-01-2014, 14:12 ]
Dobra. Przez kilka dni robiłem i trochę zrobiłem. Głównie detale, ale to były ważne rzeczy. Nadal nie poradziłem sobie z wydłużeniem tego bocznego paska, a ponadto wkleiłem sobie logo na ten pasek i o ile na Google Chrome jest z nim wszystko w porządku tak na Internecie explorer i Firefoxie to logo nie dostosowuje się do wielkości tego paska i jest za wielkie.

Póki co to są dwie rzeczy, z którymi sobie nie radzę. Pomoże ktoś? Lukem?

Tak w ogóle to dzięki za polecenie Chroma i jego opcji. To narzędzie (pod f12) jest niewiarygodnie przydatne.

[ Dodano: 21-01-2014, 18:57 ]
OK. Z logiem sobie poradziłem, ale tego paska wydłużyć nie idzie. Jak to zrobić/ Na serio nikt nie wie? To może chociaż wie ktoś gdzie da się modyfikować plugin linkwithin? To też by się przydało : (
 
  podziel si� tym postem na:
Wyświetl posty z ostatnich:   
::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegły.
Nie możesz odpowiadać w tematach. Zobacz szczegły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2024 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony blogów i stron na wordpress
ogromna baza motywów WP, podzielona na kategorie tematyczne. Proste, jednostronicowe wizytówki lub zaawansowane układy, także z funkcją sklepu internetowego (ecommerce).
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz