0 Kč bez DPH

Základní úpravy šablony ONE a SLIDE

13. 10. 2015

Připravili jsme pro Vás pár jednoduchých úprav šablon ONE a SLIDE v rámci vlastních CSS stylů.

Uvedené styly stačí zkopírovat do vlastních stylů v administraci inpage pod záložkou VZHLED > Vlastní CSS styl. Styl nastavte jako aktivní a uložte. Poté zkontrolujte zobrazení na webu kliknutím na položku MŮJ WEB a stisknutím tlačítka F5 pro obnovení/znovu načtení stránky.

Responzivní obrázky

Obrázky, které se přizpůsobují velikosti zařízení, jsou v responzivních šablonách nezbytností. Použijte níže uvedený CSS kód, který obrázkům řekne, aby se také přizpůsobily.

img {max-width: 100%; height: auto; box-sizing: border-box;}

Menu

U obou šablon jsou položky menu zobrazeny velkými písmeny, což lze jednoduše změnit zápisem CSS stylu. Jednoduchá je také změna barvy menu. Zápis se pro obě šablony liší. U šablony SLIDE je třeba provést změnu barvy odkazů, aby byly dobře viditelné.

Úprava menu v šabloně SLIDE

Úprava písma v menu

.navbar-nav > li > a {text-transform:none;}

Úprava barvy menu (šablona ONE)

.navbar {
background-color: #000000;                             /*černá barva menu*/
border-color: #000000;                                 /*černá barva vodorovných čar menu*/
}

Úprava barvy menu (šablona SLIDE)

.navbar-fixed-top {background: #000000; }              /*černá barva menu*/

.navbar-default .navbar-nav > li > a {color: #fff; }   /*bílá barva odkazů v menu*/

Pozadí webu

Jednoduše lze také změnit barvu celkového pozadí webu a pozadí obsahové části webu.

Úprava pozadí v šabloně ONE

Barva pozadí

body {background-color:#ffe1e1;}                      /*růžová barva pozadí*/

Barvy obsahové části webu

#content{
background-color:#ffffff;                            /*bílá barva obsahové části webu*/
padding-top:20px;                                    /*použijte u šablony ONE*/
}

Patička webu

S níže uvedenými stylopisy si upravte barvu pozadí, písma, odkazů a ikon zobrazených v patičce.

Úprava patičky v šabloně SLIDE a ONE

Pozadí patičky

footer {
background: #6a0000;                                 /*tmavě červené pozadí patičky*/
color: #ffffff;                                      /*bílá barva textu v patičce*/
}

Pozadí pruhu s copyrightem a odkazem na mapu webu

#bar-footer {
background: #000000;                                /*černé pozadí pruhu v patiče */ 
border-top: 1px solid #000000;                      /*černá čára pruhu v patičce*/
}

Barva odkazů

footer a {color: #fa8383;}                            /*růžová barva odkazů v patičce*/

Barva ikon

#footer-contact .fa {color: #ffffff;}             /*bílá barva ikonek v patičce*/

 

Při úpravě pozadí prvků můžete zvolit jinou barvu, barevný přechod i vlastní obrázek. Vše je již popsáno v článcích: Vylepšete si pozadí stránek s online generátory a Jak změnit pozadí webových stránek.

Tým inPage
info@inpage.cz

Web s doménou ZDARMA

Přidat komentář

Přehled komentářů

  • Úprava druhé patičky

    11. 11. 2017 18:42:08 | Radek

    Jak se dá upravit druhá patička s odkazy inpage?

    Odpovědět | Zobrazit odpovědi

    • Re: Úprava druhé patičky

      14. 11. 2017 15:47:45 | Tým inPage

      Dobrý den,
      vzhled druhé patičky, stejně jako ostatní prvky na stránce, lze upravit pomocí stylů CSS. (Vzhled→Vlastní styly CSS)

      Odpovědět

  • Úprava pozice loga a textu motivu

    11. 1. 2017 16:13:26 | Josef Halačka

    Dobrý den,
    je možný pomocí CSS v šabloně SLIDE posun loga na levou stranu vedle horního menu?
    Případně posun textu motivu do prostoru vedle loga?
    www.campersport.cz
    Raději se ptám, jestli je to vůbec možné, než začnu experimentovat.
    Děkuji.


    Odpovědět | Zobrazit odpovědi

    • Re: Úprava pozice loga a textu motivu

      12. 1. 2017 8:28:14 | Tým inPage

      Dobrý den,

      možné jsou obě varianty. V první variantě stačí nastavit šířku okolo 66 % prvku ul#list-navbar. V druhé variantě může být postup například tento: dáte logu i mottu vlastnost display: inline-block a poté pomocí margin-left posunete motto mimo logo.

      Odpovědět

      • Re: Re: Úprava pozice loga a textu motivu

        17. 1. 2017 13:09:44 | Josef Halačka

        Díky za odpověď, pokoušel jsem se s tím nějako seznámit, ale došel jsem k tomu, že tohle nedám a potřebovat to budu stejně jen ojediněle, takže veškeré seznámení by postupně vymizelo! Prosím tedy o konkrétnější radu a možná ještě lépe o úpravu od Vás a v tom případě jak postupovat se zadáním úprav? Děkuji.

        Odpovědět

        • Re: Re: Re: Úprava pozice loga a textu motivu

          20. 1. 2017 9:36:54 | Tým inPage

          Dobrý den,
          Váš požadavek na konkrétní úpravu nám prosím zašlete na email: admin@zoner.cz.

          Odpovědět

  • RE: ONE obrázek motivu na všech stránkách

    29. 10. 2015 14:33:01 | tým inPage

    Obrázek motivu na všechny stránky šablony znamená složitou úpravu, toto řešení pro vás připravíme v samostatném článku.

    Odpovědět

  • RE: uprava barvy menu aktivní položka

    29. 10. 2015 14:24:35 | tým inPage

    Dobrý den,
    Změnu aktivní položky v menu upravíte pod tímto selektorem:
    .navbar .navbar-nav > .active > a, .navbar .navbar-nav > .active > a:hover,
    .navbar .navbar-nav > .active > a:focus {
    background-color: #fff; /*barva pozadí*/
    color: #000; /*barva textu*/
    }
    Barva pozadí fotogalerie: .thumbnail { background-color: #f5f5f5;}
    Pozadí pod formuláři: .form-horizontal {background-color: #f5f5f5;}

    Odpovědět

  • ONE obrázek motivu na všech stránkách

    27. 10. 2015 22:49:53 | josef

    Vím že se toto už zde také diskutovalo, nejde nějak přes CSS donastavit motiv obrázku na všechny stránky webu? Myslím že u šablony ERIS existoval návod jak tyto obrázky na různých stránkách měnit....diky

    Odpovědět

  • uprava barvy menu aktivní položka

    27. 10. 2015 22:45:54 | josef

    DD, jak změnit barvu aktivní položky v menu u šablony ONE? A jde změnit barva pozadí fotogalerie a také formuláře pro komentáře? Děkuji za radu.

    Odpovědět

inPage

Webhosting

Domény

Ostatní