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 ?

stylizacja css wordpress

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

W kolejnej częsci artykułu przypiszemy kod ramki css do widgetu.

Similar Posts