Co jsou pevné prvky v Tumblru?

Termín „pevné prvky“ v Tumblru označuje jakýkoli objekt ve vašem tématu, který se nepohybuje relativně k oknu prohlížeče. Například postranní panel může být nastaven jako pevný – při posouvání stránky zůstává na stejném místě.

HTML a CSS v tématech Tumblr

Všechna témata Tumblr jsou tvořena kombinací HTML a CSS. HTML určuje strukturu, CSS pak vzhled. Na rozdíl od mnoha webů jsou u Tumblr HTML i CSS obvykle uloženy v jednom souboru.

Jak najít CSS svého tématu

1. Přihlaste se na Tumblr a otevřete řídicí panel.
2. Klikněte na ikonu ozubeného kola → Settings.
3. Vyberte blog, který chcete upravit.
4. V sekci Theme klikněte na Customize.
5. Pod názvem tématu zvolte Edit HTML. Zobrazí se kompletní kód HTML i CSS.

Vlastnost position: fixed

V kódu můžete pomocí Ctrl+F vyhledat řetězec position: fixed (nebo position:fixed bez mezery). Každý výskyt označuje prvek, který je pevně umístěn. Název selektoru stojí před závorkou {, např. #sidebar{position:fixed;} pevně ukotví prvek s ID sidebar.

Umístění pevných prvků

Po nastavení position:fixed můžete určit vzdálenost od okrajů okna pomocí vlastností top, right, bottom a left. Příklad:

#sidebar{position:fixed; top:20px; right:10px;}

Postranní panel bude 20 px od horního okraje a 10 px od pravého okraje prohlížeče.

Úprava pevných prvků

Pokud chcete prvek „odpřipnout“, změňte jeho hodnotu position:

• position:static – prvek se chová jako běžný součástí toku HTML.
• position:relative – prvek zůstává v normální pozici, ale můžete ho posunout pomocí top, right apod.
• position:absolute – prvek je vyjmut z toku a umístí se relativně k nejbližšímu předkovi s position:relative (nebo k oknu, pokud takový předek neexistuje).

Experimentujte s těmito typy pozic a přizpůsobte si, které části vašeho tématu mají zůstat pevně na místě.