Wygląd zdjęć w poście możemy w łatwy sposób zmienić korzystając z kodów CSS. Bardzo lubię, gdy rogi zdjęć są lekko zaokrąglone. Nie wszędzie taki efekt się sprawdzi, każdy szablon jest inny. Ważne również aby nie przesadzić. W tym poście pokażę wam jak to zrobić.
Gdzie wpisujemy kody CSS?
Wchodzimy w Układ > Projektant Szablonów > Zaawansowane > Dodaj arkusz CSS:
Pamiętajcie aby przy wklejaniu kodu zrobić spacje i ją zlikwidować, ewentualnie kliknąć Enter i backspace. Mówiąc prosto program musi "załapać" zmiany.
Nasz kod na zaokrąglenie rogów zdjęć w poście wygląda tak:
.post img {border-radius: 30px;}
wartość px możemy indywidualnie ustalać. W tym przypadku wszystkie rogi zostaną zaokrąglone o jednakową wartość px.
.post img {border-radius: 30px 55px 10px 80px;}
Wartości zmieniają się zgodnie z ruchem wskazówek zegara.
.post img {border-radius: 100%}
Jak widzicie, bardzo łatwo jednym kodem zmienić zdjęcia w postach na całym blogu. Sprawdźcie sami na własnej stronie, jak efekt możecie uzyskać.
A wiesz może jak zaokrąglić rogi obrazka w nagłówku?
OdpowiedzUsuńSpróbuj po wgraniu obrazu w nagłówku, dodać kod CSS
OdpowiedzUsuń.header img {border-radius: 40px}
Oczywiście wartość px możesz dowolnie zmieniać.
hej bo nie wiem czy dobrze załapałam, bo to jest kod na obrazki wewnątrz posta? Bo właśnie tego szukam i próbuje próbuje i coś mi nie działa. ;/ dalej jak miałam kwadratowe tak mam.
OdpowiedzUsuńTak, to kod dla obrazków w poście. Spróbuj użyć u siebie takiego kodu:
Usuń.post-body img {border-radius: 30px;}
Dalej coś mi nie załapuje. Może być dlatego, że wklejam to na dole CSS? pod innymi kodami czy może powinnam do wkleić na górę :P?
UsuńCzasem pomaga dodanie słowa important po kodzie CSS. Położenie nie ma znaczenia.
OdpowiedzUsuńSprawdziłam Twojego bloga, masz ustawione aktualnie border-radius na 0 ;) Rozwiń szablon zrób kopię zapasową, znajdź fragment z .post-body img i zmień zaokrąglenie rogów z wartości 0 na pożądaną.
A gdzie to widać :P? No właśnie mam wpisane tam 70px nawet 100px wrzucałam i nie moge tego znaleźć * wiem dupa wołowa ze mnie ;)"* i dziwne, że 0 pokazuje
UsuńWystarczy, że najedziesz na obrazek w poście i klikniesz prawym przyciskiem myszy zbadaj. U Ciebie wygląda to następująco: http://obrazki.elektroda.pl/8224654400_1461945863.jpg
OdpowiedzUsuńMusisz rozwinąć szablon, zrobić kopię zapasową, wyedytować kod HTML i poprawić wartość border-radius.
Ewentualnie będąc na poziomie Układ > Projektant Szablonów > Zaawansowane > Dodaj arkusz CSS możesz jeszcze spróbować wpisać na końcu wklejanego kodu słowo important. Czasem pomaga.
Nie, chyba ze mnie za ciemna masa szukałam wszędzie grzebałam w html i jak nawet to znalazłam i poprawiałam na wyżej nie chciało się zrobić ani zapisać.
Usuń