BLOG

Obramowanie widgetów za pomocą css i wtyczki WordPress – podstawy CSS cz.1

Share on facebook
Share on twitter
Share on linkedin

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.


DZIEWCZYNA ZA BLOGIEM

Jestem Kamila Nitschka

Jestem tutaj, aby szybko i łatwo stworzyć stronę internetową Twoich marzeń lub nauczyć Cię jak możesz to zrobić sama w prosty sposób i bez stresu oczywiście wykorzystując w tym celu WordPressa.

Kategorie

ODBIERZ GRATIS

Share on facebook
Share on google
Share on twitter
Autor artykułu

16 thoughts on “Obramowanie widgetów za pomocą css i wtyczki WordPress – podstawy CSS cz.1”

  1. Niejednokrotnie na tym blogu znalazłem rzetelne i bardzo pomocne informację o wordpressie. Świetnie opisałeś krok po kroku jak zrobić obramowanie zdjęcia.

    1. Gdybyś tak chciał to możesz tak zrobić. Jest na to sposób i jak już niżej napisałam, na będzie artykuł jak wystylizować konkretny widget.

  2. Fajny wpis, cieszę się, że są osoby, które chcą innym pomóc.
    Mam pytanie, czy po takich przeróbkach CSS jak odinstaluję wspomnianą wtyczkę to stracę całą pracę jaką zrobiłem czy stworzony CSS już zostanie na stronie?
    No bo inaczej tych wtyczek zacznie nam przybywać i przybywać. A jak wiadomo to spowalnia stronę.
    Pozdrawiam.

    1. Ciesze się, że wpis przydatny.
      Tak, jeśli osadzasz kod CSS za pomocą wtyczki, to po jej odinstalowaniu stracisz dodany kod i nie będzie on działał. Aby kodu nie stracić możesz utworzyć motyw dziecka i tam osadzić CSS, wtedy podczas aktualizacji motywu, Twój dodany kod nadal będzie działać bo zostanie zaktualizowany sam motyw główny, a nie motyw dziecka.
      Możesz też dodać kod CSS w personalizacji motywu.

  3. Dobra, ale co mam wpisać dokładnie? W sensie chce sobie zrobić ramkę z daną grupą elementów w artykule, to co mam konkretnie wpisać w custom css (poza tym co wyżej) i jak to przywołać???

    1. Kamila Nitschka

      Druga część artykuł zaginęła w akcji. Napiszę jeszcze raz i opublikuję w tym tygodniu:)

Komentowanie jest zablokowane.