Jak změnit pozadí webových stránek
Uvažovali jste někdy o změně pozadí webových stránek a nevěděli jste jak na to?
Přinášíme vám jednoduchý návod, jak si můžete pozadí stránek změnit s pomocí kaskádových CSS stylů. Do pozadí stránek tak můžete nastavit např. vlastní barvu, barevný přechod nebo třeba umístit vlastní obrázek.
Pod pojmem pozadí stránek se obvykle rozumí:
- jednolitá barva pozadí
- barevný přechod tzv. gradient
- kombinuje obrázek a barvu pozadí - opakující se obrázek na pozadí
- týká se šablon v inPage
Pozadí stránek v inPage
Pozadí stránek u šablon MIRA, ATLAS, VEGA, ZETA, POLARIS a NAVI se skládá z kombinace obrázku a barvy pozadí:
- horní část pozadí tvoří OBRÁZEK
- spodní část pozadí tvoří BARVA, která na obrázek navazuje
Výjimkou je šablona s názvem MEDIA, u které tvoří pozadí jednolitá barva.
Změna pozadí pomocí CSS
Změna pozadí se zapisuje buď pomocí zápisu background-color: nebo background: do vlastního CSS stylu (sekce VZHLED - Vlastní CSS styl), rozdíly jsou v tom, že první zápis umožnuje zapsat jen barvu a už ne obrázek, druhý umožňuje zapsat obrázek, opakování, souřadnice a barvu.
Při vkládání zápisu do vlastního CSS stylu nezapomeňte zaškrtnout volbu "Nastavit styl jako aktivní"
Jak změnit pozadí www stránek si postupně ukážeme na jednotlivých příkladech.
1. Jednolitá barva pozadí
Chcete-li jednoduše změnit barvu pozadí vašich stránek např. na zelenou, vložte níže uvedený zápis do vlastního CSS stylu. Barvu lze definovat buď v hexadecimálním kódu (viz příklad 1) nebo zadáním názvu barvy v anglickém jazyce (viz příklad 2)
Zápis platí pro všechny šablony
Příklad 1: body { background-color: #008000; }
Příklad 2: body { background-color: green; }
Lze použít také zápis
Příklad 1: body { background: #008000; }
Příklad 2: body { background: green; }
Atribut "background-color" v tomto případě umožnuje zapsat jen barvu.
Atribut "background:" umožnuje zapsat obrázek, opakování, souřadnice i barvu.
Výslednou změnu pozadí můžete porovnat na obrázku.
2. Barevný přechod (gradient)
Barevným přechodem (tzv. gradientem) nazýváme pozadí stránek přecházející plynule z jedné barvy do druhé. Představte si např. tmavě šedé pozadí přecházející postupně do světle šedé. Nastavení pozadí tzv. gradientu se tvoří kombinací obrázku s vytvořeným gradientem a barvy pozadí, která by měla navazovat na spodní barvu obrázku. Vysvětlíme na příkladu:
Vytvoření obrázku s gradientem
V programu na tvorbu a úpravu obrázků (doporučujeme např. program Zoner Photo Studio) si lze vytvořit obrázek s barevným gradientem.
(pro názorný příklad je velikost námi vytvořeného obrázku s gradientem je 512x512 pixelů, ve skutečnosti však stačí, když bude rozměr obrázku na šířku pouhý 1pixel)
Vytvořený obrázek následně nahrajte do inPage do sekce OBRÁZKY, obrázek pojmenujte např. jako "pozadí". Jakmile jste obrázek do administrace nahráli, můžete změnit pozadí stránek pomocí CSS.
Definice pozadí v CSS stylech
Vložte následující zápis do vlastního CSS stylu (sekce VZHLED - Vlastní CSS styl)
Zápis platí pro všechny šablony
body { background: url("/obrazek/3/pozadi") repeat-x 0 0 #F2F2F2; }
Zápis "url" je povinný, pokud pracujete s obrázkem -> vyznačuje cestu k originálu obrázku. Zápis repeat-x způsobuje opakování obrázku na pozadí v horizontální poloze. Zápis #F2F2F2 určuje barvu pozadí, navazující na spodní barvu obrázku (v našem případě je to světle šedá barva).
Atribut "background:" umožnuje do pozadí stránek zapsat obrázek, opakování, souřadnice i barvu.
Výslednou změnu pozadí můžete porovnat na obrázku.
3. Opakující se obrázek na pozadí
Obrázek na pozadí je trochu specifická záležitost, ne každý obrázek je vhodný pro pozadí webových stránek.
Vhodné obrázky pro pozadí vašich webových stránek můžete najít třeba na internetu. Abyste v této chvíli nemuseli nic hledat, uložte si do svého PC následující obrázek s pozadím, který vidíte vpravo.
Následně obrázek s pozadím nahrajte do administrace vašeho inPage do sekce OBRÁZKY. Obrázek pojmenujte např. jen jako "Pozadí"
Definice pozadí v CSS stylech
Po nahrátí obrázku s pozadím přejděte k editaci vlastního CSS stylu (sekce VZHLED -> Vlastní CSS styly) a vložte do CSS následující zápis:
Zápis platí pro všechny šablony
body { background: url("/obrazek/3/pozadi") repeat 0 0 #733F03; }
Výsledné zobrazení pozadí stránek může poté vypadat takto:
(ukázka z webu www.SAULESRO.cz - pro zvětšení klikněte na obrázek)
Obrázek na pozadí definujeme pomocí atributu background: url (). Opakování obrázku způsobí zápis repeat - tímto vyskládá prohlížeč celé pozadí opakujícím se obrázkem . Poslední zápis #733F03 značí barvu podkladu pozadí, v našem případě je to tmavě hnědá z obrázku, avšak na místo barvy lze použít i zápis "transparent".
Kromě hodnoty "repeat" lze využít i další hodnoty repeat-x a repeat-y, ty určují zda se má obrázek na pozadí opakovat pouze v ose X (horizontálně) nebo jen v ose Y (vertikálně).
Kde zjistíte adresu obrázku?
Pokud nevíte jak zjistit URL adresu obrázku, kterou potřebujete vložit při změně pozadí do vlastního CSS stylu, zkuste si zapamatovat následující:
V první řadě záleží na tom, jaký používáte jazyk aplikace inPage. Přednastavený jazyk je český, lze jej však přepnout do slovenštiny, němčiny, angličtiny atd. Jazyk aplikace lze změnit v administraci v sekci NASTAVENÍ -> Nastavení prostředí -> Jazyk aplikace.
Používáte inPage v češtině? Pak URL cesta k obrázku bude:
url ("/obrazek/3/adresa-obrazku-jpg")
Používáte inPage ve slovenštině? Pak URL cesta k obrázku bude:
url ("/obrazok/3/adresa-obrazku-jpg")
Používáte inPage v angličtině? Pak URL cesta k obrázku bude:
url ("/picture/3/adresa-obrazku-jpg")
Používáte inPage v němčině? Pak URL cesta k obrázku bude:
url ("/bild/3/adresa-obrazku-jpg")
V druhé řadě potřebujete zjistit samotnou adresu vašeho obrázku: /adresa-obrazku-jpg/. Adresu obrázku zjistíte tak, že si otevřete editaci vašeho obrázku v inPage a na stránce kde nastavujete parametry obrázku, rozkliknete záložku Optimalizace pro vyhledávače a zde adresu najdete (viz obrázek)
Adresa obrázku se zpravidla odvíjí od názvu obrázku, pokud si adresu nedefinujete sami.
Hanka Medková
hana.medkova(zav)zoner.cz
Přidat komentář
Přehled komentářů
RE: kurzíva ve fotogaleriích
11. 10. 2012 10:05:22 | Hana Medková
Nadpisy u fotogalerií jsou v rámci SEO pro web v pořádku a úprava vzhledu hlavních nadpisů ve fotogalerii je možná opět pomocí vložené CSS definice do vlastního CSS stylu.
Než však uvedu konkrétní příklad, doporučuji Vám v rámci SEO optimalizace obsahu stránek vytvořit na každé stránce hlavní nadpis (v inPage vyznačován jako NADPIS 1, v HTML kodu jako H1) . Více o tom jak správně tvořit nadpisy na stránkách najdete v návodech na blogu (zkuste zadat do vyhledávání klíčové slovo - Hlavní nadpis).
Jakmile nastavíte na každé stránce hlavní nadpis a případně správným způsobem vytvoříte také podnadpisy 2. a 3. úrovně (NADPIS 2 a 3 = H2, H3 v HTML), poté můžete vzhled nadpisů upravit hromadně pro celý web pomocí následující definice, kterou docílíte sjednocení vzhledu všech nadpisů H1 a H2 na webu:
h1, h2 {
color: #AB0902;
font-family: helvetica;
font-size: 1.5em;
font-style: normal;
font-weight: normal;
margin-bottom: 0.5em;
margin-top: 0;
}
Odpovědět
motiv + kontaktní formulář
10. 10. 2012 16:25:21 | Josef
www.joseftraka.cz
a)
je možno vymazat i rámeček okolo motivu stránek a pozadí za ním také začernit, tak že by bylo vidět pouze mé logo s věcmi k němu spojenými?
b)
je možno u kontaktního formuláře začernit pozadí? u mých stránek by byly hezky vidět pouze jednotlivá políčka
děkuji za odpověď
Odpovědět
černé pozadí + kurzíva
10. 10. 2012 13:10:27 | Josef
Moc děkuji za to černé pozadí, již jsem spokojen :)
Jediné co mě ještě dráždí je ta kurzíva ve fotogaleriích, myslím tím tedy název fotogalerie a pak názvy jednotlivých fotogalerií. Jde tedy nějak vyrušit tu kurzívu a změnit na jiný font písma?
děkuji za odpověď :)
Odpovědět
RE: černé pozadí
10. 10. 2012 9:29:35 | Hana Medková
+ jestli chcete změnit barvu pod podkladem hlavního menu, ještě přidejte tento zápis:
#container {background: black;}
Odpovědět
RE: černé pozadí
10. 10. 2012 9:28:23 | Hana Medková
Přidejte si do vlastního CSS zápis:
#content { background: black;}
To Vám změní podklad vnitřní části šablony pod hlavním textovým polem.
Odpovědět
černé podkladové pozadí
9. 10. 2012 21:23:40 | Josef
Dobrý den,
mám šablonu electra, psal jsem před týdnem, ale neodpověděla jste. Můj web www.joseftrakal.cz . Chtěl jsem pozadí za textem ve vnitřní části šablony, tak aby stránky působily zcela černě, to za šablonou umím změnit, ale ve vnitřní části ne a vytváří mi to tam bílý půlměsíc a toho se potřebuju zbavit. další věc se kterou si nevím rady je jak změním písmo u vytvořené galerie, automaticky se tam vygeneruje kurzíva, nevzhledná k mému pojetí stránek. s Tím také potřebuji pomoci,
děkuji za odpověď :)
Odpovědět
černé
3. 10. 2012 20:05:11 | Josef
pozadí za textem ve vnitřní části šablony, to za šablonou umím :) ... děkuji
Odpovědět
RE: černé...
3. 10. 2012 15:55:09 | Hana Medková
Dobrý den, a chcete změnit pozadí za šablonou nebo pozadí za textem ve vnitřní části šablony?
Odpovědět
černé podkladové pozadí
3. 10. 2012 15:17:23 | Josef
Jakou definici mám doplnit do css vlastního css stylu, abych měl podkladové pozadí černé, vždy když tam dopíšu místo white black, tak mi tam zůstane podkladový obrázek, mohl bych poprosit o znění definice od vás? Okraje změit umím, prostředek ne :) ... předem děkuji ... web: www.joseftrakal.cz
Odpovědět
RE: pozadí
2. 10. 2012 14:35:03 | Hana Medková;
Jednoduše si změnte barvu pozadí z bílé na červenou či šedou či černou.
Odpovědět
pozadí
2. 10. 2012 12:58:19 | Josef
Dobrý den, změnil jsem si pozadí na bílo, ale ještě bych potřeboval jednu úpravu, chtěl bych docílit šedých okrajů, nebo černých, či červených, to je vlastně jedno, to bych si vyzkoušel, stejně jako je tomu u webu www.nelldesign.cz . Má doména www.joseftrakal.cz
Děkuji za odpověď
Odpovědět
RE: menu lišta
2. 10. 2012 9:41:34 | Hana Medková
Dobrý den, ano, také tyto prvky jde změnit. Jen to není tak jednoduché. Jsou k tomu potřeba určité znalosti kaskádových stylů CSS a grafický program pro vytváření a úpravu obrázků. Jde o to, že podklad hlavního menu tvoří obrázky butonů, které je nutné předělat nebo si vytvořit vlastní a nahradit jimi ty původní.
Např. pro podklad hlavního menu u šablony Elektra je použito následujících obrázků:
http://www.joseftrakal.cz/images/styles/template10/black/menu-bg.png (podklad hlavního menu)
http://www.joseftrakal.cz/images/styles/template10/black/menu-item-active.png (levý kraj aktivního menu)
http://www.joseftrakal.cz/images/styles/template10/black/menu-item-active-bg.png (střední obrázek hlavního menu, který se pomocí CSS opakuje na pozadí záložky menu)
atd. atd...
Pokud však CSS styly neovládáte na pokročilé úrovni, pak tyto změny pravděpodobně sám neprovedete a možná bych Vám doporučila změnit typ šablony např. na ZARA, která je pro nastavení vlastní grafiky mnohem jednodušší, a úpravy byste si tam mohl snáze vyzkoušet.
Odpovědět
menu lišta
2. 10. 2012 1:00:40 | Josef
Dobrý den,Ještě bych se rád zeptal na jednu věc, mám šablonu electra a chtěl jsem se zeptat zda je možno změnit i barvu menu lišty a barvu jednotlivých textů záložek menu. doména www.joseftrakal.cz
Odpovědět
RE: bílé pozadí v šabloně electra
1. 10. 2012 9:29:45 | Hana Medková
Dobrý den pane Trakal, bílé pozadí u vnitřní části šablony docílíte vložením následující definice do vlastního CSS stylu:
#container {
background: url("/images/styles/template10/black/body-bg.png") repeat-x scroll 0 0 white;
}
Barva "white" na konci zápisu mění barvu pozadí vnitřní části šablony.
Odpovědět