CSS vychytávky pro OptimizePress

CSS-vychytavky

Při tvorbě stránek v OptimizePressu máte možnost být flexibilní a nemusíte se spoléhat jen na funkce, které OptimizePress nabízí. Můžete vkládat vlastní CSS styly na každou stránku.

V tomto článku CSS vychytávky pro OptimizePress vám ukáži několik CSS stylů a nastavení, které z vašich stránek a blogů udělají ještě líbivější, nežli v tuhle chvíli jsou. Zkratka CSS (Cascading Style Sheets) znamená kaskádové styly.

V OptimizePressu jsou tři místa, na která můžete vkládat CSS styly. Můžete přidat CSS styly pro celý web, což znamená, že jsou aplikovány na všechny vaše stránky. Máte možnost přidat na každou jednotlivou stránku blogu nebo na stránku v LiveEditoru. Tato flexibilita vám umožní přidávat unikátní konstrukční prvky v celém vašem webu nebo na každé stránce zvlášť.

Zde jsou tři místa, kde můžete CSS styly aplikovat:

  • Blog Setting (Nastavení Blogu) – zde můžete vložit vlastní CSS pro váš Blog

V administraci WP běžte na OptimizePress  > Dashboard > Blog Settings (Nastavení Blogu) > Modules (Moduly) > Other Scripts (Další scripty) > zvolte Custom CSS (Vlastní CSS) v rozbalovacím menu.

Blog-setting-custom-css

 

  • OptimizePress Dashboard – Zde je místo, kde nastavujete globální nastavení pro všechny OptimizePress LiveEditorem generované stránky.

V administraci WP běžte na OptimizePress > Dashboard > Global Settings (Globální nastavení)Custom CSS (Sitewide) (Vlastní CSS (pro celý web))

OP-Dashboard-Custom-css

 

  • Page settings – Zde je místo, kde nastavujete CSS pouze pro jednu konkrétní stránku. Když jste uvnitř LiveEditoru běžte do Page settings (Nastavení stránky) > Other scripts (další scripty) > zvolte Custom CSS (Vlastní CSS) z rozbalovacího menu. Pokud nevidíte pole s vlastním CSS, klikněte na tlačítko Add New (Přidat nový) a zvlote Custom CSS (Vlastní CSS).

Page-settings-Other-Scripts

Níže naleznete spoustu užitečných CSS stylů, které můžete použít na vašich stránkách.

Pochopení kódu

Níže uvedené příklady mohou vypadat trochu zmateně. Komentář v CSS je, když vidíte obrácené lomítko s hvězdičkou.

Vypadá to takto:

/* Takhle vypadá CSS komentář */

/* = otevření komentáře

*/ ukončení (zavření) komentáře

To znamená, že můžete psát komentáře ve vašem CSS stylu abyste se vy, nebo kdokoli jiný bude váš kód číst, vyznali. Komentáře nejsou vidět na webových stránkách!

Vytvořil jsem tento článek tak, že si můžete všechny zde uvedené CSS příklady označit myší, zkopírovat a vložit na vaše stránky. Komentáře u CSS můžete smazat nebo je tam ponechat. Nehrají žádnou roli. Pouze vysvětlují, k čemu jednotlivé styly slouží.

CSS pro stránky vytvořené v LiveEditoru

Tyto CSS použijete na stránkách tvořených v LiveEditoru

/* ZAROVNÁNÍ LOGA NA PRAVOU STRANU */
.container .eight.columns {
width: 300px;
float: right;
}
body .container .navigation #navigation-alongside {
float: left;
}
.container .eight.columns {
width: 300px;
float: right;
}
body .container .navigation #navigation-alongside {
float: left;
}

/* ZMĚNA BARVY AKTIVNÍ POLOŽKY V MENU */
body .container .navigation ul .current-menu-item a {
color: #ff9900 !important;
text-decoration: underline;
}

/* STYL PO CELÉ ŠÍŘCE OKNA S VYSTÍNOVANÝM OKRAJEM */
.container {box-shadow: 0px 10px 40px #888888;max-width:1060px;}
body {background-color: #ededed;}

Přerušovaná linka nad ROW (řádkem)

Linku nad řádkem a pod řádkem můžeme nastavit běžně v editaci samotného řádku. Ale jak nastavit linku přerušovanou nebo tečkovanou?

cara-nad-a-pod

První věc, kterou musíme udělat je pojmenovat náš nový styl „dash-it“ v příkladu. Za druhé, přidat styl do řádku jako je to znázorněno na obrázku:

dash-it

/* PŘERUŠOVANÁ LINKA NAD ROW (ŘÁDKEM) */
.dash-it {border-top-style: dashed !important;}

Pro zobrazení linky nad i pod řádkem použijte tento kód:

/* PŘERUŠOVANÁ LINKA NAD I POD ROW (ŘÁDKEM) */
.dash-it {
border-top-style: dashed !important;
border-bottom-style: dashed !important;
}

Původně čtvercový obrázek změněný pomocí CSS na kulatý + rámeček okolo

round-img

round-img-properties1

Výsledek:

round-img-final1

/* ZMĚNA ČTVERCOVÉHO OBRÁZKU NA KULATÝ + RÁMEČEK */
.round-img img{
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 10px solid #eee;
}

CSS pro Blog

Zde je několik CSS pro váš blog. Tyto CSS budou fungovat pouze na šablonách pro Blog v OptimizePressu. Zkoušejte a nebojte se měnit kód tak, aby vyhovoval vašemu návrhu (vašim představám).

/* ZKRYJE DATUM U POSLEDNÍHO PŘÍSPĚVKU V ŠABLONE Č. 1 (STYLE 1) */
.recent-posts-style-1 span {display: none !important;}

/* ZMĚNA BARVY POZADÍ NADPISU WIDGETU A PŘIDÁ ZAKULACENÉ ROHY */
.main-sidebar .widget h4 {
background-color: #4DACFF;
padding: 5px 5px 5px 15px;
color:#ffffff;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
font-style:bold;
}

Box pro vyhledávání

Tímto kouskem kódu přidáte vyhledávacímu boxu jinou, výraznější barvu a tím tak přitáhnete pozornost.

search-box

/* PŘIDÁNÍ BAREVNÉHO RÁMEČKU OKOLO VYHLEDÁVACÍHO POLE */
.search form {
border: 2px solid #E98C0F;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}

/* ZMENŠENÍ VELIKOSTI PÍSMA V POLI PRO VYHLEDÁVÁNÍ A VYPNUTÍ PÍSMA KURZÍVA */
.searchform input[type=text] {
font-style: normal;
font-size: 15px;
}

Odebrání podtrženého písma u nadpisu Blogového článku (defaultně je nadpis podtržený)

/* ODEBRÁNÍ PODTRŽENÉHO NADPISU BLOGU */
.latest-post h2 a:hover, .older-post h4 a:hover {
text-decoration: none;
}

Odebrání datumu u článku

/* ODEBRÁNÍ DATUMU U ČLÁNKU */
.date-extra {display: none;}
.post-meta {border-right: none !important;}

Odebrání jména autora článku

/* ODEBRÁNÍ JMÉNA AUTORA ČLÁNKU */
.post-meta a {
padding-left: 0;
border-left: none;
}
.post-meta a:first-child {
display: none;
}

Změna textu Continue Reading (Pokračovat ve čtení) na tlačítko

Tento kousek CSS kódu přidá pozadí a kulaté rohy do textu „Continue Reading (Pokračovat ve čtení)“.

Změní pozadí na barvu (#E98C0F), radius (kulaté rohy) (3px), styl rámečku (borderu) (solid), velikost rámečku (1px) a barva rámečku (borderu) (#E98C0F).

/* ZMĚNA TEXTU POKRAČOVAT VE ČTENÍ NA TLAČÍTKO */

.latest-post .continue-reading a,.post-content .continue-reading a, .older-post .continue-reading a {
padding: 11px;
border-radius: 3px;
font-size: 15px;
color: #fff;
background-color: #E98C0F;
border: solid 1px;
border-color: #E98C0F;
}

Tento CSS kód odebere podtržení textu Continue Reading (Pokračovat ve čtení).

/* ODEBERE PODTRŽENÍ CONTINUE READING (POKRAČOVAT VE ČTENÍ) */
.latest-post .continue-reading a, .post-content .continue-reading a, .older-post .continue-reading a {
text-decoration: none;
}

Odebere náhledový obrázek u článku na blogu

Chcete-li odebrat náhledový obrázek z článku na blogu, ale chcete-li ho zachovat na hlavní stránce Blogu, vložte tento kus kódu na každou stránku článku, kde nechcete tento náhledový obrázek zobrazovat.

Toto CSS nastavení se upravuje u každého článku samostatně.

V seznamu příspěvků klikněte na Upravit u příspěvku, u kterého chcete vypnout náhledový obrázek. Máte na výběr ze záložek WordPress a OptimizePress. Vyberete OptimizePress a nastavíte dle obrázku:

blog-css-clanek

A zde je CSS kód:

/* ODEBERE NÁHLEDOVÝ OBRÁZEK U BLÁNKU NA BLOGU */
.post-image {display: none !important;}

V případě že byste se chtěli pustit do dalších úprav CSS na vašem webu nejprve je nutné zjistit daný CSS styl u konkrétního prvku, který chcete upravovat.

V prohlížeči Chrome se to udělá tak, že kliknete pravým tlačítkem myši na tu část, kterou chcete změnit a v menu, které se vám zobrazí zvolíte Zkontrolovat prvek.

chrome-zkontrolovat-prvek

a poté se vám zobrazí lišta, kde vpravo vidíte název CSS stylu, který je použitý u daného prvku. Přímo zde si můžete zkoušet měnit CSS styl a následně si ho jen zkopírovat a vložit na stránku.

chrome-zkontrolovat-prvek-vlastni-css

V Mozila Firefox se  tato možnost nejmenuje Zkontrolovat prvek, ale Prozkoumat prvek.

 

Pokud se vám článek líbil a přinesl vám nové zajímavé informace, budu rád za sdílení a samozřejmě i za vaše dotazy.

Komentáře

Přidat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Vaše osobní údaje budou použity pouze pro účely zpracování tohoto komentáře. Zásady zpracování osobních údajů