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