Snippety, vzorky, ukázky, templaty

Pokud vidíš hvězdičky, zkopíruj i hvězdičky a ty následně odmaž aby se zkopírovala i funkcionalita… (části v HTML). Něco půjde kopírovat přímo ze stránky, ale něco bude potřebovat kopírovat z varianty pro úpravy. Aby to nebylo tak snadné, tak něco se musí kopírovat od HTML verze, něco stačí do editoru. Když ale kopírujete z editoru, tak vždy do editoru. Pokud z HTML verze, tak do HTML verze.

O tom, jak správně používat CSS a HTML se můžete dočíst víc tady Tvorba stranek

Obrázek do pozadí

Tentokrát kopírujte do  Custom CSS dole. Pokud chcete pozadí k rubrice, tak mi napište

.site {
background-image: url("https://nicehoseneboj.cz/domains/nicehoseneboj.cz/wp-content/uploads/2016/11/WDF_784646sds.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}

Nejdříve přidám obrázek abych se na něj mohl odkázat. V levém panelu klikněte na Média a tam na Přidat soubor. Přetáhněte obrázek do čtverce pro přetažení, uploadujte a po chvíli až bude hotovo, dejte podrobnosti. V podrobnostech zkopírujte adresu a změňte adresu https://nice….. na novou. Otevřete navrženou stránku, zmáčkněte Ctrl + Shift + C  a v konzoli si odlaďte velikost a pozici background-position: 0% 0%; Možno taky v pixelech. Pokud nevíte, hodnotu smažte a zmáčkněte šipku dolů – nabídne vám to možné hodnoty. Pokud chci aby pozadí rolovalo s obsahem, tak dám background-attachment: scroll; pokud nefunguje, zkusím před středník dát !important

Pokud dáváte tmavé pozadí, je nutné dát světlý font… normálně v editoru.  Kdyby se obrázek nenačetl, text by nebyl vidět, proto přidejte k výše uvedenému  background-color: #090909;. Aby text nesplýval se světlejšími místy na obrázku, přidejte do CSS

.post p, .page p {
text-shadow: black 1.3px 1px !important;
}

Seznam odkazů

****Na střed text dostaňte pomocí zvětšit odsazení****

**********************************************

Seznam neodkazů

**************************

Ano je to seznam
neodkazů
takže na ně nekliknete

**************************

Seznam citace

**************************

19 hod – Mini karaoke
20 hod – Jak růst ve 30m² – interaktivní divadlo
21 hod – Promítání bizárních obrazů

**************************

Seznam obrovský

**************************

**************************

Malé odsazení

Magnus – Šablona těchto stránek

OneTone – Další zajímavý text

Parallax

Bento

Citace

******stačí v editoru s označeným textem kliknout na ikonku uvozovek*******

“Ahoj toto řekl Dan téměř nekonečný”

Video z Youtube

První možností je přímo do editoru vložit přímo adresu videa. Pokud si chcete hrát s chováním videa, nepoužívejte adresu přímo videa, ale dejte sdílet, poté vložit.

Pokud chcete kulaté rohy, přidejte do CSS

embed, iframe, object {
     border-radius: 30px;
     position: relative !important;
}

Button

Samozřejmě změňte odkaz

Kód

*******************************

.site {
    background-color: #000;
}

*******************************

Odstraní nadpis

Přidejte do CSS stránky

.entry-title {
display: none;
}

Nezobrazí se na telefonu

********************

Toto v telefonu nebude.

A tohle taky ne.

********************

Zobrazí se pouze na telefonu

Může se hodit například, když pozadí je na okrajích a na mobilech by zasahovalo do textu. Zlom je v 1000 px.
********************

Tenhle obrázek na velkém displeji není (stačí minimalizovat okno a už je)

********************

Průhedný nečtvercový obrázek

Tato stránka nemá pozadí bílé, ale f9f9f9. Můžete použít buď průhledný formát png, nebo gif a nebo udělat pozadí obrázku stejné barvy jako je stránka. Příklad je o kousek níže u mp4 videa.

Gif

Gif musíte vložit ve velikost – původní, jinak se udělaj thumbnaily a bude jen obrázek…

Mp4 Video

Ač to tak na první pohled nemusí vypadat, mp4 je pro pohyblivý obrázky daleko rozumějším řešením. Víc barev a hlavně daleko menší velikost (takže víc větších obrázků). Dá se udělat třeba z hodně fotek na ezgif.com. Následně převod na video – mp4. Nakonec a to vždy optimalizujte na videosmaller. Přidejte video do médií, zkopírujte toto video a změňte jeho adresu.

Menu, které odroluje na odkaz v textu

**********je to naschval dvakrat… jednou pro počítač a jednou pro telefon**********

Cíl odkazu v textu

Další cíl

********Tady musíte přepnout do HTML módu a přepsat nahoře #novynazev odkazu – poznate podle křížku nazačátku a stejně tak přejmenujete id cíle odkazu na novynazev.*********

Obrázek dole

Podívej se pod komentáře. V padding bottom dejte tolik pixelů, jak vysoký je obrázek. Pokud ho chcete zarovnat doleva, tak přes background-position

.site {
background-image: url("https://nicehoseneboj.cz/domains/nicehoseneboj.cz/wp-content/uploads/2017/10/1d857e4de21df76d7cb5799bc3fae233.gif");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: bottom;
}

.content-area {
    padding-bottom: 500px !important;
}

 

Napsat komentář

Vaše emailová adresa nebude zveřejněna.