CSS

Rámeček kolem tabulky

Nevidíte rámeček kolem tabulky?

Připravíme si tabulku plnou čísel nebo textu a chceme se na ni podívat. Očekáváme rámeček kolem dokola, ale není tam. To se může stát, pokud šablona přepíše styly pro tabulku. Tolik teorie a nyní příklad z praxe.

Máme kus html kódu pro tabulku.

<table width="590" border="1" cellspacing="0" cellpadding="0"><tbody>
 <tr><td rowspan="2">...</td></tr>
 </tbody></table>

Teď upravíme html kód do následujícího tvaru.

<table id="Table_10" width="590" border="1" cellspacing="0" cellpadding="0"><tbody>
<tr><td rowspan="2">...</td></tr>
</tbody></table>

Na konec do souboru, ve kterém je definovaný styl šablony, například style.css, přidáme následující kód.

#Table_10
{
border-collapse: collapse; border: 1px solid #839E99;
}

Další možnost je použít plugin Simple Custom CSS. Tím vytvoříte nový css styl, který se spustí po původním stylu ze šablony.

Pro zkušené doporučuji udělat úpravu pomocí Child ThemeVýhoda je, že po aktualizaci šablony nepřijdete o dodatečné úpravy nejen ve stylech, ale také v upravovaných funkcích.

Zbytečný rámeček kolem obrázku

Někdy může rámeček kolem obrázku působit trochu rušivě. Jak ho odstraníme?

Podíváme se do souboru style.css a zkusíme najít podobný řetězec jako je tento.

img {
  background-color:#FFFFFF;
  border:1px dashed #E3C2FB;
  padding:5px;
}

Tady vidíme, že musíme změnit border k obrazu svému.

img {
  background-color:#FFFFFF;
  /* border:1px dashed #E3C2FB; */
  padding:5px;
}

Nebo takto.

img {
  background-color:#FFFFFF;
  border:none;
  padding:5px;
}