Následující text není o výběru tématu WordPressu, ale o nalezení stylů CSS ve vašem aktuálním tématu. Často se problém vyskytuje v jedné části rozvržení nebo šablony. Například mezi nabídkou postranního panelu a zbytkem stránky je rámeček, který nechcete. Pátráte a pátráte, ale nemůžete najít žádný odkaz na rámeček. Co teď?“

Hra na detektiva CSS

Začněme hrou na detektiva CSS. Víte, kde je problém, jen ho nemůžete najít. Ve výše uvedeném příkladu musíte vypátrat chybný rámeček.

Začněte tím, že pečlivě prozkoumáte vygenerovanou stránku (nebo testovací stránku) a vyhledáte nějaký identifikační text v postranním panelu, poblíž chybného rámečku. Řekněme, že v seznamu v postranním panelu máte název příspěvku s názvem „Vše o Harrym“. Víte, že tento název najdete v postranním panelu, když si prohlédnete zdrojový kód stránky.

Chcete-li si prohlédnout zdrojový kód stránky, přejděte na panel nabídek prohlížeče a vyberte možnost ZOBRAZIT > ZDROJ STRÁNKY nebo ZOBRAZIT > ZDROJ. Zobrazí se stránka se zdrojovým kódem stránky.

Pro aktivaci vyhledávání použijte svůj praktický detektivní nástroj, Ctrl+F. Zadejte „all about harry“ a klikněte na tlačítko FIND. Je pravděpodobné, že pokud nemáte v příspěvku slova „all about harry“, dostanete se na první zobrazení fráze „all about harry“, která je pravděpodobně v postranním panelu. Pokud tomu tak není, stiskněte tlačítko FIND znovu, dokud nenajdete správnou frázi ve správné oblasti.

Pokud používáte prohlížeč Internet Explorer, alternativní metodou je použití vývojářského panelu nástrojů Internet Explorer, který umožňuje vizuálně zobrazit a vybrat prvky, ID a třídy na stránce. Zobrazuje prvky v hierarchii stránky, jejich atributy CSS a může obkreslovat DIVy, tabulky atd. Panel nástrojů si můžete stáhnout ze stránek společnosti Microsoft.

Jakmile najdete výraz, je čas zahrát si na detektiva CSS. Vyhledejte prostřednictvím kódu z fráze „Vše o Harrym“ jednu ze dvou věcí. Bude vypadat nějak podobně jako jedna z nich, přičemž použijte slova jako postranní panel, nabídka nebo postranní sloupec:

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

Toto je hlavní část, která obsahuje nabídku postranního panelu. Našli jste prvního podezřelého.

Nyní otevřete svůj soubor style.css a proveďte další hledání pro sidebar nebo jakýkoli výsledný název, který jste odhalili. Obvykle se identifikuje dvěma způsoby:

#sidebaror.sidebar

Podívejte se do stylů pod tyto selektory CSS a zjistěte, zda je tam zmínka o rámečku, často vypadá nějak takto:

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

Tady je váš rámeček, zločinec! Pokud je to viník, odstraňte odkaz na border a můžete pokračovat.

Jestliže to viník není, hon pokračuje.

Někdy je viníkem ten, kterého nejméně tušíte. Možná není příčinou ohraničení zjevný podezřelý, postranní panel, ale obsahová část. Vraťte se k vygenerovanému zdrojovému kódu stránky a vyhledejte první slova příspěvku. Nad nimi hledejte něco jako:

<div>

Může se jmenovat content, page. post, maincolumn, widecolumn nebo mít jiný alias, ale měl by to být kontejner CSS, který obsahuje informace o vašem příspěvku. Nyní se vraťte do listu stylů a zkontrolujte, zda je v této části rámeček.

Riskujte list stylů

Pokud všechny tyto kroky selžou, detektiv CSS nikdy nevzdá lov. Vraťte se do skrýše všech stylů, souboru style.css, a prohledejte jej tak, že vyhledáte slovo „border“ a pečlivě si prohlédnete každého podezřelého. Všimněte si názvu ID selektoru, například sidebar, menu, content a page, a pak se vraťte k vygenerovanému zdrojovému kódu stránky, abyste zjistili, zda to nemůže být váš viník.

Podezřelý border, který jste našli v listu stylů, můžete také vybrat a vystřihnout a vložit do souboru TXT (například Poznámkový blok), který jen leží otevřený v počítači jako škrábací blok. Poznamenejte si, ze kterého názvu selektoru jste jej odstranili, například takto:

Removed border: solid 2px green from #content

Poté upravený soubor style.css uložte a nahrajte jej na svůj web. Obnovte vygenerovaný testovací příspěvek a podívejte se, zda nežádoucí rámeček zmizel. Pokud ano, našli jste viníka. Pokud ne, vraťte se do Poznámkového bloku, zkopírujte kód a vložte ho zpět do souboru style.css do sekce „content“, čímž vše vrátíte tam, kde jste ho našli.

Pokud jste viníka našli, zatancujte si, piště a jásejte, ať jsou ostatní ve vaší blízkosti podezřívaví a nervózní. Detektiv CSS řeší další zločin CSS!“

Další nápověda k řešení problémů CSS

  • CSS Oprava chyb prohlížeče
  • Řešení problémů CSS

.