Jak zmienić kolor przycisku „Następny” na Tumblr

Tumblr oferuje wiele szablonów, które różnią się nie tylko pod względem mediów, ale także stylu kodu, ponieważ każdy z nich jest tworzony przez innego dewelopera. Dlatego, zanim zaczniesz modyfikować motyw, warto przyjrzeć się jego kodowi źródłowemu.

Przygotowanie

Każdy motyw na Tumblr można edytować. Jeśli przypadkowo uszkodzisz szablon, możesz go przywrócić, instalując ponownie. Niektóre szablony używają „niekończącego się przewijania”, czyli automatycznego ładowania kolejnych postów przy przewinięciu do końca strony. W takim wypadku warto przełączyć się na szablon z tradycyjną paginacją.

Krok po kroku

1. Otwórz edytor HTML

Wejdź w panel Customization swojego bloga na Tumblr i kliknij link Edit HTML. Znajdziesz go na górze po prawej stronie, pod nazwą aktualnie używanego motywu.

2. Znajdź zmienną {NextPage}

Użyj skrótu Ctrl+F i wyszukaj {NextPage}. Upewnij się, że znajduje się wewnątrz bloku {block:Pagination} – to miejsce, w którym definiowane są przyciski „Poprzednia” i „Następna”.

3. Zidentyfikuj klasę CSS przycisku „Następny”

W kodzie HTML przycisk ma atrybut class="nazwa-klasy". Może mieć własną klasę lub współdzielić styl z innymi elementami. Jeśli klasa jest współdzielona, zmiana koloru wpłynie na wszystkie elementy z tą samą klasą.

4. Dodaj własną klasę (opcjonalnie)

Aby uniknąć niepożądanych zmian, możesz stworzyć nową klasę, np. .next-button-custom, i przypisać ją do linku {NextPage}. Następnie zdefiniuj styl w arkuszu CSS.

5. Edytuj arkusz stylów

Wróć do sekcji <style> i znajdź istniejące klasy (oznaczone jako .nazwa-klasy) lub wklej nową definicję:

.next-button-custom {
    /* tutaj wstaw swoje reguły */
}

Aby zmienić kolor tekstu, dodaj:

color: #ff69b4; /* różowy */

Jeśli przycisk ma tło lub jest przyciskiem, zmień także:

background: #000000; /* czarne tło */

W razie potrzeby dostosuj także obramowanie i cienie, używając border i box-shadow.

Podsumowanie

Po zapisaniu zmian przycisk „Następny” powinien wyświetlać się w wybranym kolorze. Pamiętaj, aby odświeżyć stronę i sprawdzić, czy wszystko działa prawidłowo.