Změna pozadí obsahové šablony
Pro zdatnější uživatele zde máme další návod na úpravu pozadí. Tentokrát Vám ukážeme jak si s pomocí vlastních CSS stylů upravit pozadí obsahové šablony.
Obsahové šablony jsme vám představili již dříve v článku Stránka s obsahovými šablonami. Jedná se o připravené textové bloky, které lze do stránky různě vkládat a upravovat. Tyto šablony mají ve vlastnostech možnost podbarvení, kterého využijeme, a bude s ním dále pracovat.
Základní podbarvení obsahové šablony
Vytvořte si stránku s obsahovou šablonou, klikněte pravým tlačítkem myši do obsahu šablony a v kontextovém menu vyberte Nastavení šablony > Světlé pozadí. Šablona se Vám podbarví světle šedou barvou. Do HTML kódu šablony se přidala třída .section-bg-light
a tuto třídu budeme dále používat při změně podbarvení bloků.
Stejné pozadí pro všechny obsahové šablony
Změnu pozadí a varianty použití jsme Vám ukázali již v článku Vlastní pozadí bloků, použité definice lze použít i při změně pozadí obsahových šablon, jen vyměníme identifikátory za třídy jednotlivých šablon. Pro změnu šedého pozadí všech obsahových šablon využijeme třídu .section-bg-light
.
Zápis CSS stylů
section.section-bg-light {
background: #73be1e; /*barva pozadi*/
color: white; /*barva textu v bloku*/
}
Ukázka
Nadpis textu
Váš text začíná právě zde. Klikněte a můžete začít psát. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem.
Pozadí jednotlivých šablon
Pozadí můžeme měnit jen jednotlivým šablonám. Každá šablona má svou třídu, na kterou změnu navážeme.
Název šablony | Třída šablony |
Výchozí | .section-blank |
Nadpis s textem | .section-header |
Nadpis s tlačítkem | .section-cta |
Obrázek s textem vlevo | .section-2-col-left-text |
Obrázek s textem vpravo | .section-2-col-right-text |
Tři sloupce s obrázkem nahoře | .section-3-col-bottom-text |
Tři sloupce s obrázkem dole | .section-3-col-top-text |
Služby | .section-services |
Ceník | .section-pricelist |
Kontakty | .section-contact |
Mapa | .section-map |
Fotogalerie | .section-carousel |
Záložky | .section-tabs |
V příkladu uvádíme úpravu šablony Nadpis s tlačítkem .section-cta
. Ostatním šablonám zůstává základní šedé podbarvení.
Zápis CSS stylů
section.section-bg-light.section-cta {
background: url(/obrazek/3/bg-obrazek-na-pozadi-png/); /*adresa obrazku*/
background-repeat: no-repeat; /*obrazek se nebude opakovat*/
background-position: center; /*vystredeni obrazku*/
background-size: cover; /*obrazek pokryje prvek i za cenu oriznuti*/
}
Ukázka
Chcete nás kontaktovat?
Váš text začíná právě zde. Klikněte a můžete začít psát. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Tým inPage
info@inpage.cz