Úpravy postranního sloupce a hlavního obsahu - šablona SIRIUS

11. 7. 2013

V případě, že postranní sloupec nijak nevyužíváte, vás určitě napadlo, zda není možné obsahovou část roztáhnout na plnou šířku stránky. inPage takové změny umožňuje a to právě úpravou vlastního CSS stylu. Je třeba se napřed podívat na strukturu HTML kódu a následně na zápis jednotlivých bloků v CSS. Dalším krokem je již zápis vlastního CSS stylu, který doplní případně upraví již použitá pravidla.

Základní pravidla a princip

Nejprve je třeba vyhledat příslušné HTML prvky, které tvoří postranní panel (sloupec chcete-li) a obsah stránky. V šabloně SIRIUS to jsou dva prvky div, které mají id #side-column (postranní sloupec) a #main-column (hlavní sloupec).

Jak vypadá výchozí CSS zápis?

#side-column {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px 5px 5px 5px;
  width: 215px;
}
#main-column {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px 5px 5px 5px;
  width: 730px;
}

Toto jsou výchozí hodnoty šablony SIRIUS, které jsou nastaveny pokud je nepřepíšete v editoru vlastního CSS stylu.

Zrušení postranního panelu a roztažení obsahu

Pro dosažení tohoto cíle je třeba přidat do vlastního stylu zápis, který vypne postranní pannel (display: none;) a obsah hlavního sloupce roztáhne na šířku celé stránky. Přidejte tedy do editoru vlastního stylu tento zápis:

#side-column {
  display: none;
}
#main-column {
  width: 930px; /*výchozí hodnota 730px + 215px postranní panel*/
}

Můžete vyzkoušet také jiné hodnoty, například postranní panel naopak roztáhnout na úkor hlavního panelu:

#side-column {
  width: 300px; /* tzn. přidávám navíc 85px */
}
#main-column {
  width: 645px; /* výchozí hodnota 730px snížená o 85 px */
}

Barva postranního a hlavního panelu

Jak si můžete všimnout výše, tak barva panelů je v šaboně SIRIUS zadána v řežimu RGBA, kde poslední hodnota je průhlednost. Pokud zadáte 0, tak barva nebude vůbec vidět a 1 znamená, že barava nebude průhledná vůbec. Zde je hodnota zadána na 0.7, což znamená. že bílá barva bude průhledná ze 70%.

Jak upravit vlastní CSS?

Pokud budete chtít například postranní panel černě s průhledností 50% a hlavní žlutě, stačí do editoru vlastního stylu přidat následující zápisy:

#side-column {
  background-color: rgba(0, 0, 0, 0.5);
}
#main-column {
  background-color: yellow;
}

Obecné zadání barev a dalších CSS vlastností naleznete v našich CSS základech.

Kulaté rohy

Pokud chcete zvětšit nebo zmenšit zaoblení rohů, slouží k tomu vlastnost border-radius. Čtyři hodnoty za sebou se uvádějí proto, že lze nastavit každému rohu jiné zaoblení, první roh je vždy vlevo nahoře a pokračuje se ve směru hodinových ručiček.

Můžeme zaoblení zvětšit nebo zmenšit např. nahoře na 10px a dole na 8px. U hlavního panelu naopak zaoblení zmenšíme. Je to nelogické, ale ze cvičných důvodů to uvádíme takto:

#side-column {
  border-radius: 10px 10px 8px 8px;
}
#main-column {
  border-radius: 3px 3px 2px 2px;
}

Jak zaoblení rohů vypnout?

Stačí všem rohům nastavit zaoblení s nulovou hodnotou:

#side-column {
  border-radius: 0px;
}
#main-column {
  border-radius: 0px;
}

Z toho vyplývá, že pokud hodnotu napíšu jen jednou, prohlížeč ji použije pro vykreslení všech rohů.