fbpx

Nie wiem jak Ty, ale ja, ucząc się tworzenia stron internetowych nieraz zatrzymywałam się na jakimś drobiazgu, który mnie stopował. Choć oczywistą rzeczą była droga „zapytaj google”, a następnie w razie niepowodzenia „zapytaj google po angielsku” – nieraz i tak zajmowało mi mnóstwo czasu by zrobić to, czego chciałam, w sposób jakim chciałam.

Dlatego powstał ten wpis.

Jak dodać ramkę do obrazka wyróżniającego (za pomocą css – a nie poprzez divi)?

Oto instrukcja.

1) wgrać wtyczkę Code Snippets od Code Snippets Pro

2) aktywować ją i otworzyć

3) w  części dotyczącej css, w sugerowanym miejscu dodać kod (edytując ewentualnie parametry naszej ramki):
.et_post_meta_wrapper img { border: 10px solid #000; }

Ta ramka jest czarna (kolor to #000, gruba na 10px oraz ciągła (solid).
4) zapisać i aktywować

Powinno działać.

Być może nasuwa Ci się pytanie: dlaczego w ogóle robić to z pominięciem motywu Divi? Ano dlatego, że w miejscu, gdzie edytujesz ramkę dla wpisu – robisz to dla całego modułu nagłówka – a nie jedynie dla obrazka. Czyli ramka obejmie też tytuł i meta dane. A nie zawsze mamy na to ochotę. Może z czasem to się zmieni – ale na razie warto użyć css 😉

Skoro jesteśmy przy ramkach, to jeszcze dodatkowy wariant – choć to już zrobisz bez problemu za pomocą motywu Divi. Zatem dla sportu:

Jak dodać ramkę do obrazka w treści wpisu za pomocą css – a nie poprzez divi?

  1. Wstawiasz obrazek do wpisu
  2. Edytujesz obrazek, a następnie rozwijasz opcje Zaawansowane
  3. Dodajesz klasę css obrazka: np wpisując: img-border
  4. Zapisać
  5. Wejść w  w Wygląd–>Dostosuj–>Dodatkowe css i tam wkleić polecenie do nadanej klasy, np kod:
    .img-border {
    border-style:solid;
    border-width: 10px;
    border-color: #000;
    }
  6. Zapisać.

I już!