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.

Seznam šablon a jejich tříd

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