Jak zrobić podkreślenie za tytułami gadżetów

sobota, 14 października 2017

Parę razy otrzymywałam wiadomości e-mail z pytaniem "jak zrobić podkreślenie za tytułami gadżetów". Nigdy tej instrukcji nikomu nie podawałam, bo jak wiecie nie mam w zwyczaju podawania instrukcji indywidualnie. Zbierałam się trochę z tym, aby tę instrukcję Wam tutaj opublikować. Serio. Jakoś wydawało mi się, że jest ona tak mało istotna, że będę ją sobie przekładać i przekładać, aż w końcu wybije jej moment. Pewnie by tak było nadal gdyby nie kolejna wiadomość o treści "jak zrobić podkreślenie za tytułami gadżetów", więc o to jest odpowiedź :)

Wiem, że najważniejsza informacja dla Was to to, gdzie te zmiany będą się odbywać, a więc w tym wypadku będzie to CSS i HTML.

1. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy kod:

.sidebar h2 { position: relative; text-align: center; } .sidebar h2 span { background: #fff; padding: 0 15px; position: relative; z-index: 1; } .sidebar h2:before { background: #ddd; content: ""; display: block; height: 1px; position: absolute; top: 50%; width: 100%; } .sidebar h2:before { left: 0; }

Jak zobaczycie, Wasz tytuł gadżetu został przekreślony, a teraz trzeba jakoś go "schować". W tym celu zapisujemy nasz arkusz CSS i przechodzimy do motyw - edytuj kod HTML.

2. Klikamy kursorem obojętnie jakie miejsce w kodzie i wybieramy ctrl+f. Pojawi nam się okno wyszukiwania, w które wklejamy:

<h2> <data:title/></h2>

Takich części kodu jest parę w szablonie - są one przy każdej sekcji odpowiadającej za dany gadżet i jego tytuł. Musimy tą część kodu zamienić na:

<h2> <span><data:title/></span></h2>

Jeśli nie wszystkie tytuły gadżetów nam się zamieniły, szukamy tej części kodu:

<h2 class='title'> <data:title/></h2>

Zamieniamy ją na:

<h2> <span><data:title/></span></h2>

Efekt:

Jeśli spodobał Ci się wpis, przekaż go dalej :)