Poniżej nie chodzi o wybór motywu WordPress, ale o znalezienie stylów CSS w twoim obecnym motywie. Często problem pojawia się w jednej części układu lub szablonu. Na przykład, jest granica nie chcesz między menu paska bocznego i reszty strony. Polujesz i polujesz, ale nie możesz znaleźć żadnego odniesienia do granicy. Co teraz?

Zabawa w detektywa CSS

Zacznijmy od zabawy w detektywa CSS. Wiesz gdzie jest problem, tylko nie możesz go znaleźć. W powyższym przykładzie, musisz zapolować na błędne obramowanie.

Zacznij od dokładnego zbadania wygenerowanej strony (lub strony testowej) i poszukaj jakiegoś identyfikującego tekstu na pasku bocznym, w pobliżu błędnego obramowania. Załóżmy, że na pasku bocznym znajduje się tytuł postu o nazwie „Wszystko o Harrym”. Wiesz, że znajdziesz ten tytuł na pasku bocznym, gdy zobaczysz kod źródłowy strony.

Aby zobaczyć kod źródłowy strony, przejdź do paska menu przeglądarki i wybierz WIDOK > ŹRÓDŁO STRONY lub WIDOK > ŹRÓDŁO. Pojawi się strona zawierająca kod źródłowy strony.

Użyj swojego podręcznego narzędzia detektywistycznego, Ctrl+F, aby włączyć wyszukiwanie. Wpisz „all about harry” i kliknij ZNAJDŹ. Prawdopodobnie, jeśli nie masz słów „wszystko o harrym” w swoim poście, przeniesie cię to do pierwszego wyświetlenia frazy „wszystko o harrym”, które prawdopodobnie znajduje się na twoim pasku bocznym. Jeśli nie, naciśnij ZNAJDŹ ponownie, aż znajdziesz właściwą frazę we właściwym miejscu.

Jeśli używasz Internet Explorera, alternatywną metodą jest użycie Internet Explorer Developer Toolbar, który pozwala ci wizualnie zobaczyć i wybrać elementy, ID i klasy na stronie. Wyświetla on elementy w hierarchii strony, ich atrybuty CSS i może obrysować DIV, tabele, itp. Pasek narzędzi można pobrać ze strony Microsoft.

Po znalezieniu wyrażenia, nadszedł czas na zabawę w detektywa CSS. Spójrz w górę przez kod z frazy „All About Harry” dla jednej z dwóch rzeczy. Będzie to wyglądało jak jedna z tych rzeczy, z użyciem słów takich jak sidebar, menu lub sidecolumn:

<div>or<div class="sidebar">

To jest główna sekcja, która zawiera twoje menu paska bocznego. Znalazłeś pierwszego podejrzanego.

Teraz otwórz swój plik style.css i wyszukaj jeszcze raz sidebar lub jakąkolwiek inną nazwę wynikową, którą odkryłeś. Zwykle identyfikuje się go na dwa sposoby:

#sidebaror.sidebar

Spójrz w style pod tymi selektorami CSS i zobacz, czy jest tam wzmianka o granicy, często wyglądająca tak:

#sidebar {position: relative; float: right; width: 170px; color: blue; font-size: 90%; border-right: solid 1px blue; }

Tutaj jest twoja granica, przestępca! Jeśli to jest winowajca, usuń odniesienie do granicy i możesz iść dalej.

Jeśli tak nie jest, polowanie trwa dalej.

Czasami winowajcą jest ten, którego najmniej podejrzewasz. Może granica nie jest spowodowana przez oczywistego podejrzanego, czyli pasek boczny, ale przez sekcję treści. Wróć do wygenerowanego kodu źródłowego strony i poszukaj pierwszych słów swojego postu. Poszukaj powyżej czegoś takiego jak:

<div>

Może to być nazwane content, page. post, maincolumn, widecolumn, lub mieć inny alias, ale powinien to być kontener CSS, który przechowuje informacje o twoim poście. Teraz wróć do arkusza stylów i sprawdź, czy w tej sekcji jest obramowanie.

Zagrożenie dla arkusza stylów

Jeśli wszystko to zawiedzie, detektyw CSS nigdy nie rezygnuje z polowania. Wróć do kryjówki wszystkich stylów, pliku style.css, i przeszukaj go, wyszukując „border” i przyjrzyj się uważnie każdemu podejrzanemu. Zanotuj nazwę ID selektora, jak pasek boczny, menu, treść i strona, a następnie wróć do wygenerowanego źródła strony, aby sprawdzić, czy to może być twój winowajca.

Możesz również wybrać podejrzane obramowanie, które znalazłeś w arkuszu stylów, wyciąć i wkleić do pliku TXT (jak Notatnik), który po prostu siedzi otwarty na twoim komputerze jak notatnik do scratchowania. Zanotuj nazwę selektora, z którego go usunąłeś w ten sposób:

Removed border: solid 2px green from #content

Następnie zapisz edytowany plik style.css i prześlij go na swoją stronę. Odśwież wygenerowany post testowy i zobacz, czy niechciane obramowanie zniknęło. Jeśli tak, to znaczy, że znalazłeś winowajcę. Jeśli nie, wróć do Notatnika i skopiuj kod i umieść go z powrotem w swoim style.css w sekcji „content”, umieszczając rzeczy tam, gdzie je znalazłeś.

Jeśli znajdziesz winowajcę, zatańcz trochę, piszcz i wiwatuj, i spraw, by inni stali się podejrzliwi i nerwowi, gdy są wokół ciebie. Detektyw CSS rozwiązuje kolejną zbrodnię CSS!

Więcej pomocy w rozwiązywaniu problemów CSS

  • CSS Naprawianie błędów przeglądarki
  • Rozwiązywanie problemów CSS

.