Obramowanie widgetów za pomocą css i wtyczki WordPress – podstawy CSS cz.1
Standardowo widgety są lub nie są wystylizowane o obramowanie, tło lub w inny sposób, przez autora szablonu. Jednak na 99% nie wyróżniają się swoją się na tle strony. Ale możemy, to zmienić, dodając obramowanie widgetu. Artykuł powstał na zadanie pytanie przecz czytelnika bloga.
Mail od czytelnika:
Jak wykonać ramki do sidebar: Tak jak w temacie, wydaje mi się ze, to jest pytanie z kategorii tych najprostszych, obecnie po 30-50 min szukania odp. udało mi się dojść do informacji, że w kodzie strony trzeba dodać kilka linijek jakiegoś tekstu, ale w obecnej dobie, gdzie dużo rzeczy robi za pomocą wtyczek itp. Szukam innego rozwiązania lub poradnik krok po kroku, gdzie, to trzeba zrobić.
Mowa cały czas o sidebarze po prawej stronie, tak jak u ciebie każdy widget jest w ramce plus na innym tle chciałbym poznać tą wiedzę i umieć, to wykonać.
Jeśli gdzieś jest na stronie proszę o link
Wykonamy dwie różne ramki. Pierwsza z nich, to będzie standardowa ramka w postaci obrysu widgetu w wybranym kolorze. Druga ramka będzie trochę ciekawsza, ponieważ wykonamy dodatkowe stylizacje w postaci rozmycia ramki, zaokrąglenia narożników. Dodatkowo dodamy tło, przez co widget jeszcze bardziej wyróżni się na tle strony.
Jaki efekt chcemy osiągnąć – obramowanie widgetu ?
Od czego zaczniemy? Krótkie wprowadzenie.
Aby uzyskać taki efekt jak na obrazkach musimy dokonać zmiany w stylach css dla konkretnej klasy. W naszym przypadku będzie, to klasa .widget. Nie chcemy, jednak grzebać i dokonywać zmian w samym pliku style.css dla danego szablonu wordpress. Zmiany, które byśmy dokonali w pliku style.css zostały, by utracone w momencie, kiedy dokonalibyśmy np. aktualizacji szablonu. Niestety, w tym przypadku nasz plik style.css zostałby nadpisany przez aktualizację, a my musielibyśmy na nowo dodawać kod css. Dlatego z pomocą przyjdzie nam ciekawa wtyczka WordPress do wprowadzania zmian w stylach css szablonu.
Krok 1 – instalacja wtyczki wordpress do zmiany style.css
Jaką wtyczkę zainstalować? w poprzednim artykule opisałam dwie wtyczki WordPress do zmian w stylach css. Tutaj znajdziesz opis i krótką recenzję obu wtyczek polecanych przeze mnie. 2 wtyczki WordPress do osadzenia css – upiększanie bloga.
Na tym blogu używam wtyczki Simple Custom CSS i mogę Ci ją polecić.
Zainstaluj wtyczkę WordPress i ją aktywuj, ponieważ zaraz będziemy na niej pracować.
Krok 2 – kod css – właściwość Border
Zanim dodanym nasz css, który obramuj widgety musimy poznać kilka przydatnych reguł css.
Obramowanie w css możemy uzyskać za pomocą właściwości border. Możemy ustalić szerokość ramki, styl i kolor.
Aby wykonać ramkę podstawową musimy skorzystać z właściwości Border, schemat wygląda:
border: width style color;
Wszystkie elementy są po spacji, jedynie na końcu dodajemy znak ;
objaśnienie:
- width- jest to szerokość lini obramowania, podana np. w pikselach czyli px
- style: styl ramki np. ciągła linia, punktowa, przerywana itp
- color – kolor ramki.
Przykłady obramowania “prostego”:
Prosta ramka o szerokości 2 pikseli o ciągłej linii i kolorze czerwonym
Prosta ramka o szerokości 5 pikseli o kreskowej linii i kolorze niebieskim
Jeśli interesuje cię więcej opcji linii to zachęcam aby zapoznać się nazwami na stronie webmaster helion
Krok 3 – kod css – właściwość Box-shadow
Drugą ramkę, którą wykonamy jest obramowanie “rozmyte”, inaczej mówiąc dodamy cień, czyli tak, aby nie było widoczna linia.
Aby wykonać ramkę o linii rozmytej musimy skorzystać z właściwości box-shadow, schemat wygląda:
box-shadow: x y rozmycie rozmiar kolor inset ;
Wszystkie elementy są po spacji, jedynie na końcu dodajemy znak ;
objaśnienie:
- x -cień przesuwamy w poziomie. Dodatnia wartość np. 4px przesunie cień o 4 piksele w prawo. Ujemna wartość np. -4px, przesunie cień w lewo o 4 piksele. Wartość możemy wyrażać za pomocą pikseli lub innym jednostek np. em.
- y – cień przesuwany w pionie. Dodatnia wartość przesuwa w dół, a ujemna wartość przesuwa w górę.
- rozmycie – ta wartość nie jest wymagana i nie musimy jej podawać. Brak rozmycia jest standardowo ustawiona na 0. Rozmycie to intensywność rozmycia cienia. Tak jak w przypadku x i y możemy wyrazić za pomocą pikseli (px)
- rozmiar – ta wartość również nie jest wymagana. Gdy jej nie podamy standardowo zostanie przyjęta wartość 0. Wartość rozmiar określa rozmiar cienie, więc w przypadku gdy podamy wartość dodatnią np. 4px uzyskamy cień powiększony, w przypadku ujemnej wartości uzyskamy cień pomniejszony.
- kolor – wartość nie jest wymagana. Jednak gdy nie podamy koloru, zostanie on narzucony przez właściwość color ustaloną przez szablon.
- inset – wartość nie jest wymagana. Podajemy ją tylko wtedy gdy chcemy uzyskać cień wewnętrzny.
Przykład ramki, którą wykonamy.
kod css – box-shadow przesunięcie o 5px w prawo i dół
kod css – box-shadow – efekt inset
kod css – box-shadow – pełna ramka o rozmyciu 10 pikseli
