Zmiana rodzaju czci...
 
Powiadomienia
Wyczyść wszystko

Zmiana rodzaju czcionki w obrębie jednego bloku

4 Posty
2 Ludzie
0 Lajki
75 Czytano
Posty: 7
Twórca tematu
(@marboq)
Aktywny Członek Forum
Dołączył: 1 miesiąc temu

Cześć i czołem,

 

Mam blok taki jak wyżej (rodzaj bloku to cytat wyróżniony). Chcę zrobić tak, aby cytat miał swoją czcionkę i podpis pod cytatem też swoją. Nie mam możliwości wyboru konkretnego rodzaju czcionki z poziomu edycji bloku (tylko opcje na zasadzie "zwykła kursywa", "gruba kursywa" itk.) + edycja bloku pozwala wyłącznie na wybór jednej opcji wyglądu dla całości bloku. Czy jest możliwość, aby przede wszystkim wybrać konkretny rodzaj czcionki dla cytatu i oddzielny dla podpisu pod cytatem? Z góry dziękuję za odpowiedzi 😉

 

Odpowiedzi 3
Posty: 76
(@krzysiek)
Użytkownik
Dołączył: 1 rok temu

Hej!

Tak, jest taka możliwość, choć wymaga to zastosowania niestandardowego CSS więc wchodzimy na nieco wyższy level 😀

Aby to zrobić, będziesz potrzebował dostępu do edycji CSS na swojej stronie, np. sekcji Dostosuj motywu znajdziesz zakładkę gdzie można wstawić własny CSS.

Co trzeba zrobić:

Znajdź selektory CSS dla bloku cytatu i jego podpisu: Najpierw musisz zidentyfikować, jakie selektory CSS są używane dla bloku cytatu i podpisu w Twoim motywie. Możesz to zrobić, korzystając z narzędzi deweloperskich w przeglądarce (np. w Firefoxie lub Chrome).

Jeśli nie wiesz jak to namierzyć daj znać.

Dodaj niestandardowy CSS: Po zidentyfikowaniu selektorów, możesz dodać niestandardowe reguły CSS do wspomnianej zakładki w sekcji Dostosuj motywu.

Przykład niestandardowego CSS:

.wp-block-quote p {
    font-family: 'TwojaCzcionkaDlaCytatu', serif; /* Zmień 'TwojaCzcionkaDlaCytatu' na nazwę faktycznej czcionki */
}

.wp-block-quote cite {
    font-family: 'TwojaCzcionkaDlaPodpisu', sans-serif; /* Zmień 'TwojaCzcionkaDlaPodpisu' na nazwę faktycznej czcionki */
}

Zastąp 'TwojaCzcionkaDlaCytatu' i 'TwojaCzcionkaDlaPodpisu' nazwami czcionek, których chcesz użyć. Upewnij się, że czcionki te są dostępne na Twojej stronie, na przykład przez Google Fonts lub są to czcionki systemowe.

Po dodaniu CSS, zapisz zmiany i odśwież stronę, aby zobaczyć efekt. Może być konieczne wyczyszczenie pamięci podręcznej przeglądarki i/lub wtyczki cache jeśli taką masz.

Pamiętaj, że dokładne selektory mogą się różnić od tych które podałem w zależności od używanego motywu i wersji Gutenberga, jeśli więc nie zadziała warto sprawdzić aktualne selektory przy pomocy narzędzi deweloperskich w przeglądarce o czym wspomniałem powyżej.

Odp...
Posty: 7
Twórca tematu
(@marboq)
Aktywny Członek Forum
Dołączył: 1 miesiąc temu

Dziękuję za odpowiedź, podziałało 😉 Chociaż mi osobiście było łatwiej namierzyć używane selektory CSS poprzez wybranie opcji "edytuj w HTML" na bloku.

Odp...
Posty: 76
(@krzysiek)
Użytkownik
Dołączył: 1 rok temu

Jeśli podziałało można i tak 👍 

Odp...