Autor Zpráva
Vendy
Profil
Dobrý den a ahoj,

mám dost začátečnicky lamovský dotaz - jak zjistím název něčeho (objektu, textu apod.) zapsaného v CSS?

Vysvětlím lépe:
Mám na webu plugin pro kalendář akcí. V rámci jeho nastavení je i možnost úpravy CSS (některých). Chtěla bych změnit barvu prvního řádku, v němž se zobrazují názvy dní, z černé na jinou. Jen nevím, kde bych tuto informaci v kódu dohledala - pod jakým názvem.
Předpokládám, že se toto dá nějak zjistit (např.: přes "Zkontrolovat prvek" v prohlížeči), ale nedaří se mi odhalit správný název.

Pro představu ukáži alespoň kousek toho, co mi nabízí možnosti CSS pluginu:
/* New theme for 2015 */
.my-calendar-header *, .mc_bottomnav * {
    line-height: 1.5;
}

.mc-main .my-calendar-header, .mc-main .mc_bottomnav {
    background-color: rgba( 0, 0, 0, .15 );
    color: #fff;
    padding: 2px 10px;
}

.mc-main a {
    border-bottom: none;
}

.mc-main .details ul, .mc-main .details ol, .mc-main details li  {
    margin: 5px 0 10px 30px;
}

atd.

Plus jsem se zasekla i na informaci o barvách. Poprvé vidím zadávání barev ve formátu čtyř znaků (včetně #) - zatím znám jen klasické html.

Přímo se lze na tento kalendář podívat na zkušební subdoméně - ve footer widgets.

Za každou radu předem děkuji, Vendulka
mimochodec
Profil
Zápisy barev: Barvy v HTML

jak zjistím název něčeho

Tomu nerozumím. Chceš se v html dopátrat něčeho, cos našla v css? To asi nejde nijak chytřeji, než ručně. Jestli naopak koukáš do html a chceš najít v css všechno, co má na daný prvek nějaký vliv, k tomu použij nástroje v prohlížeči. Jmenuje se to v různých prohlížečích různě, spouští se to většinou ctrl+shift +i.



edit: Přečetl jsem si tu otázku ještě jednou a došlo mi, že jde o druhý případ z těch, co jsem psal. V opeře ctrl+shift+i, klik na první řádek a vpravo vidím:

twentyfifteen.css:76

mc-main th {
background: rgba(0, 0, 0, 0.804);

zatržítkem ověřím, ano, je to ono.
Vendy
Profil
mimochodec:
Ach jo, zase to moje nejasné vysvětlování.

Barvy v html samozřejmě znám, ale tady jsou v kódu nějak jinak a ještě by to mělo být v CSS, tak nějak nevím, asi to nemůžu motat dohromady.

Co se týká toho kódu:
V úpravách (v administraci) vidím možnost úpravy CSS. Ale nevím, jak se která část jmenuje a jak ten název zjistit. Když nevím, jak se v řeči počítačů jmenuje to, co chci upravit, nemohu úpravy dělat. Ten název určitě jde nějak zjistit, jen nevím, jak se k němu dopátrat.
juriad
Profil
Když se podíváš pomocí zkontrolovat prvek na ten kalendář, taksi všimneš, jak je konstruován:
<table class="my-calendar-table">
<caption class="heading my-calendar-month">Říjen 2015 </caption>
<thead>
<tr class="mc-row">
<th class="day-heading mon" scope="col"><span aria-hidden="true"><abbr title="Pondělí">P</abbr></span><span class="screen-reader-text">Pondělí</span></th>
... tady jsou další buňky jednotlivých názvů dnů ...
</tr>
</thead>
<tbody>
... tady jsou řádky s čísly dnů ...
</tbody>
</table>

Pak si najdeš vlastnost, kterou chceš změnit a kde je v CSS definovaná, může to být přímo na abbr, spanu, th, tr, thead, kdekoli. Prostě budeš klikat od toho <abbr title="Pondělí">P</abbr> postupně nahoru, dokud to nenajdeš.
Ta černá barva pozadí je třeba definovaná pravidlem:
.mc-main th
V něm tedy změníš background na tvou požadovanou barvu. Přímo v prohlížeči si můžeš vyzkoušet, co ta změna udělá.
Pokud nenajdeš vhodnou existující definici, je potřeba si vymyslet vlastní pravidlo (selektor), to už je těžší, ale můžeš se řidit podle pravidel, která se týkají okolních elementů v tom kalendáříku.

Nesmíš o tom uvažovat jako o názvech, ale o pravidlech, kterým elementy vyhovují. Přečti si Vlastní styly (hlavně pak Složené deklarace). Pak pochopíš jak jednotlivé prvky na stránce zacílit.


Barva se v CSS zadává u mnoha vlastností: color (barva textu), background (případně backgound-color - barva pozadí), border (border-color - barva rámečku) a dalších.
Stejně jako u ostatních CSS vlastností vypadá zápis:
název-vlastnosti: její-hodnota;
Název si vybereš z výše vyjmenovaných. Hodnota je v jejich případě barva, která se zapisuje několika způsby:
* slovem - red, green
* s křížkem - #ff0000, #00ff00 (je to po dvojicích znaků přítomnost červené, zelené a modré, každá z těch tří složek může být od 00 do ff, kde ff je nejvíc; přečti si něco o šestnáctkové soustavě, pak pochopíš proč jsou v barvách písmenka a až f)
* s křížkem zkráceně #xyz je zkratka za #xxyyzz, tedy naše oblíbené barvy lze zapsat jako: #f00, #0f0
* funkce rgb - rgb(255, 0, 0), rgb(0, 255, 0), zase tři složky tentokrát v rozsahu 0 - 255 (klasická celá čísla)
* funkce rgba a další funkce pracují s průhledností a jinými barevnými modely než RGB

Oprava rgb funkce, původně bylo: * funkce rgb - rgb(1.0, 0.0, 0.0), rgb(0.0, 1.0, 0.0), zase tři složky tentokrát v rozsahu 0.0 - 1.0 (klasická desetinná čísla)
Vendy
Profil
juriad:
Děkuji za naprosto vyčerpávající odpověď. CSS je něco, čeho se stále bojím. Třeba se to konečně i naučím. Moc děkuji.

Jen na okraj - .mc-main th v tomto případě mení barvu písma v té části, ale již díky Tvému vysvětlení hledám zápis celku. Ještě jednou díky, Vendulka
Tomáš123
Profil
juriad:
RGB ide od 0 do 255. Priehľadnosť vo formáte RGBA sa udáva v číslach od 0 do 1.

Vendy:
Môžeš si o tom prečítať v článku Spriehľadnenie prvku pomocou CSS.
juriad
Profil
Tomáš123:
Jo, máš pravdu. S čím jsem si tom mohl splést?
V tom článku máš však chybu. rgb(45, 234, 19%) není platný zápis, procenta a celá čísla nelze míchat dohromady.
Tomáš123
Profil
juriad:
Buď som pri úprave zjednotil dva príklady do jedného, alebo som sa si vymyslel novú funkcionalitu (nepamätám si, že by tam niekedy bolo tých príkladov viac). Ďakujem, opravím to a pridám aj upozornenie na kombinovaný zápis.
Chamurappi
Profil
Reaguji na Tomáše123:
Formát zápisu priehľadnej farby RGBA respektíve HSLA je teda o niečo použiteľnejší, avšak za cenu o niečo nižšej podpory naprieč najpoužívanejšími prehliadčmi (RGBA je podporované až od deviatej verzie IE, opacity od šiestej).
Ze všeho uvedeného je jen rgb podporované starými verzemi. Zápisy rgba, hsl a hsla a vlastnost opacity podporuje Explorer až od verze 9. Od verze 4 ovšem podporoval filter: alpha(opacity=50) a od verze 5.5 šlo dělat poloprůhledná pozadí filtrem gradient, kde se udávaly barvy hexadecimálně osmi znaky.
Tomáš123
Profil
Chamurappi:
Teraz neviem čo s tým. Opraviť to parafrázovaním tvojho príspevku a hrať sa akože nič ako pri juriadovom postrehu? Ponechať súčasný obsah (preškrnúť nesprávne informácie) a vhodne zvýrazniť citáciu tvojho príspevku? Stiahnuť článok z obehu? Zničiť web? :-)

Priznám sa, hoci som článok písal dávnejšie, ani teraz som si nemyslel, že sú tam nejaké chyby. Chcel som publikovať kvalitný obsah, ale zatiaľ je článok o vysúvacom menu nekompletný, na pätu vždy dole existujú aspoň dve lepšie riešenia a pri priehľadnosti mám chyby. Asi naozaj stiahnem web z obehu a vrátim ho až na novej doméne. Potom si dám lepší pozor na správne informácie.

Ďakujem, že som sa to dozvedel od teba.

Možno ten web až tak skoro nepoložím. Nedarí sa mi presmerovávať.
Dočasne som preškrtol svoje tvrdenie a uviedol tvoju opravu s odkazom na toto vlákno.
Vendy
Profil
juriad:
Asi jsem fakt úplně mimo, ale i když jsem si vše pročetla, stejně se mi to nedaří najít.
Tomáš123
Profil
Vendy:
Súbor, ktorý potrebuješ zmeniť je na tejto adrese:
http://zivot-s-rs.cz/zivot-s-sm/wp-content/plugins/my-calendar/styles/twentyfifteen.css
Keď ho otvoríš, na 76 riadku je selektor, ku ktorému sa viažu nejaké deklarácie. Celé to vyzerá takto:
.mc-main th {
    text-align: center;
    text-transform: uppercase;
    padding: 8px 0;
    background: rgba(0, 0, 0, .8); /*Tu je deklarovaná čierna farba, ktorú chceš zmeniť.*/
    color: #ffff !important; /*Táto farba má zlý formát. Podporované sú iba 3 alebo 6 znakov.*/
}
Toto je cesta vyhľadania požadovaného súboru a tvrdej editácie. S administráciou systému, ktorý používaš to nemá nič spoločné.
Vendy
Profil
Tomáš123:
Aha. Tak to je úprava ve FTP. Zkusím to. Bude stačit, když jen přepíši
color: #ffff !important;
na 
color: #ff4500 !important;

nebo musím nějak měnit i ten kód rgba?

A ještě doplňující - jak jsi přišel na ten řádek? Pokud se mi to totiž podaří změnit, budu totéž hledat i pro spodní kousek s názvem měsíce, který je také černý.
lionel messi
Profil
Vendy:
nebo musím nějak měnit i ten kód rgba?

Musíš zmeniť iba rgba. Vlastnosť color má na starosti farbu písma, ty potrebuješ hýbať s pozadím takto:

background: rgba(255, 69, 0, 0.8);

Prvé tri čísla zodpovedajú #ff4500.
juriad
Profil
Vendy:
Když vidíš ve vývojářských nástrojích to pravidlo .mc-main th, tak vpravo od něj máš napsaný název souboru a číslo řádku. Nejsem si jistý, že změnu chceš dělat přes FTP (neznám však WordPress, ani jak se s ním pracuje).

V připadě toho "Října" je to pravidlo .ftop .widget caption ve style.css na řádku 473. Můžeš si všimnout, že je tam ještě pravidlo .mc-main caption, které také udává barvu pozadí, ale to první zmíněné má přednost.

Tu průhlednost řešit nemusíš, prostě si nastav barvu jakýmkoli způsobem, který ti vyhovuje. Všimneš si ale, že nadpis je podrtžený dvakrát, za to může pravidlo abbr, acronym, dfn ve style.css na řádku 82.

Prostě si tím chvíli klikej a měň si vlastnosti a koukej, co to dělá.
Tomáš123
Profil
Vendy:
V súvislosti s vlastnosťou color som upozornil iba na nesprávnosť zápisu. Akoby tam ani nebol. Ty potrebuješ meniť riadok s farbou pozadia (background-color). Ako bolo už vyššie spomenuté, na farbu pozadia môžeš využiť akýkoľvek valídny formát zápisu: Správne bude aj: background-color: #FF4500; (Aj #ff4500, aj rgb(255, 69, 0), prípadne aj rgba(255, 69, 0, 0)).
Vendy
Profil
lionel messi, juriad, Tomáš123:
Moc vám, kluci, děkuji za rady.

Musíš zmeniť iba rgba. Vlastnosť color má na starosti farbu písma...
Změnila jsem oboje, aby to ladilo, a jsem skoro v té fázi, kterou jsem chtěla :) Barevně je to teď přesně ono. Děkuji.

Když vidíš ve vývojářských nástrojích to pravidlo .mc-main th, tak vpravo od něj máš napsaný název souboru a číslo řádku.
Btipné je, že nevidím to pravidlo, ale řádek se mi najír podařilo. On v tom svou roli hraje fakt, že vidím jen z 30%. Nevymlouvám se na to, jen je to občas dost složité, něco vidět. Ale řádek jsem našla.

Ako bolo už vyššie spomenuté, na farbu pozadia môžeš využiť akýkoľvek valídny formát zápisu
Alespoň se mohu odrazit od kódu html (ty znám), protože složit čísla v CSS se mi jaksi nedaří ani za pomoci všech taháků.

Zajímavé je, že některé části šly opravit v administraci, jiné přímo v pluginu a další jen v samotné šabloně webu. Lehce zmatený systém.

Zůstává mi poslední prosba o radu - nedaří se mi ovlivnit písmo. Tedy lépe řečeno - chtěla bych písmena dnů udělat tučnějším fontem, aby byla výraznější. Již jsem to zkoušela, ale nedaří se mi trefit.
Tomáš123
Profil
Vendy:
Tučnosť zabezpečuje vlastnosť font-weight s hodnotou bold. Vieš kam tú deklaráiu pridať? Nepopísala si presne, kde to chceš zmeniť, takže neviem poradiť konkrétnejšie...
Vendy
Profil
Tomáš123:
Zrovna tohle je jeden z mála kódů, který znám. Chtěla bych zvýraznit písmena dní v kalendáři (P, Ú, S, Č, P, S, N). Když jsem to hledala ve stylech a šablonách, všude je psáno, že jsou ve verzi bold, ale připadají mi stejně málo výrazná.
V tahácích CSS jsem našla, že velikosti bold odpovídá hodnota 400, tak jsem se to snažila změnit na 700, ale bez úspěchu. Píši to nějak špatně, nebo je to stále málo, nevím.
Tomáš123
Profil
Vendy:
Ten rozdiel nie je až tak výrazný. Na stránke nevidím žiadne pokusy niečo nastaviť.
Pridaj do CSS súboru tento riadok:
tr.mc-row th.day-heading {font-weight: 900}
Pokojne aj na úplný koniec.

EDIT: Pardón, nevšimol som si, že víkendy majú inú triedu. Mám rešpekt pred tvrdým upravovaním súborov redakčných systémov. Uviedol som konkrétnejší selektor ako bolo potrebné, aby sa neobjavil niekde nejaký iný zápis, ktorý by to prebil, alebo, aby nebol zápis natoľko všeobecný, že prebije vlastnosti nejakému inému prvku.
juriad
Profil
Vendy, Tomáš123:
Většina fontů obsahuje jen pár tučných variant (často jen jednu). V takovém případě se prostě zobrazí tučný text stejně bez ohledu na číslo, které uvedeš.
Pak ti už jen zbývá zvětšit písmo (font-size: 120%; například).
Vendy
Profil
juriad:
už jen zbývá zvětšit písmo (font-size: 120%; například)
Všechno písmo je uváděno jen ve formátu ...em. A v tomto případě mi nejde ani najít, z kterého řádku v css pochází užité písmo k této konkrétní části.

Tomáš123:
Pridaj do CSS súboru tento riadok:
tr.mc-row th.day-heading {font-weight: 900}
Zkusila jsem to, ale žádná změna. Ono je dost složité rozhodnout, které css co ovlivní. Něco je v css pluginu a něco v šabloně. Nevím, proč je to tak zmatené, ale prostě je.
juriad
Profil
Vendy:
A v tomto případě mi nejde ani najít, z kterého řádku v css pochází užité písmo k této konkrétní části.

To je jedno, prostě tam tu vlastnost můžeš přidat (do .mc-main th). Říká, že se písmo má zobrazovat velikostí o 20% větší než dosud. Je to stejné jako bys uvedla 1.2em.

Velikost písma je definovaná ve style.css, 17. řádek pro skoro všechny elementy (font-size: 100%;). Tam to rozhodně neměň (ale můžeš to zkusit a zkus vysvětlit, proč to dopadlo tak špatně :-))

Tomáš123:
Ten selektor tr.mc-row th.day-heading je chybně, týká se jen pracovních dnů.

Vendy:
Prostě tomu .mc-main th přidej font-weight: bold (tučnějšího stejně nedosáhneš) a budeš-li chtít, zvětš ten font, jak jsem zmínil.
Vendy
Profil
juriad:
To je jedno, prostě tam tu vlastnost můžeš přidat (do .mc-main th). Říká, že se písmo má zobrazovat velikostí o 20% větší než dosud. Je to stejné jako bys uvedla 1.2em.
Otestovala jsem to, teď to vypadá takto a je to super :)
.mc-main th {
  font-size: 1.2em;
    text-align: center;
    text-transform: uppercase;
    padding: 10px 0;
    background-color: #ff7f50;
    color: #800000 !important;

Děkuji za pomoc.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: