0 Kč s DPH

Úpravy postranního sloupce a hlavního obsahu

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ů.

Vladimír Souš
admin(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • Úprava patičky

    6.11.2014 21:42:26 | Martin Čejka

    Dobrý den, lze nějak v této šabloně též upravit např barvu patičky, linky v patičce...? Díky

    Odpovědět

  • RE: Úprava patičky

    7.11.2014 11:24:23 | Ondřej Jonáš

    Dobrý den,
    samozřejmě. Pro úpravu barvy, odkazů a dalších částí slouží třída #footer.
    Pokud budete chtít upravit například barvu odkazu v patičce, použijete: #footer a { color:#f30; }

    Odpovědět

  • Změna např. barvy v patičce Sirius

    7.11.2014 12:08:02 | Martin Čejka

    Dobrý den,
    děkuji za radu a info. Ale bohužel, barva se mi nedaří změnit, když zadám např.
    #footer {background-color: #dddddd;}
    asi mi něco chybí, něco dělám špatně.
    rec-play.cz

    Odpovědět

  • RE: Změna např. barvy v patičce Sirius

    7.11.2014 12:35:02 | Ondřej Jonáš

    Dobrý den,
    jelikož už v šabloně je využit obrázek jako pozadí, je nutné využít #footer { background:#ddd; }.
    Background-color změní pouze barvu pozadí, ale nemá vliv už na obrázek pozadí, který je předvyplněný v šabloně.

    Odpovědět

inPage.cz - webové stránky, doména a webhosting snadno.