Java týden Body zdarma
Využij podzimních slev a získej od nás až 40 % bodů zdarma! Více zde
Pouze tento týden sleva až 80 % na Java e-learning!

Diskuze: zesílení přeškrtnutí wordpress

Aktivity (1)
Avatar
Rudolf Lichteneger:16.10.2018 11:40

Ahoj všichni, prosil bych o radu, jak zesílit čáru přeškrtnutí v editoru wordpress.
V jídelním lístku chci například v menu přeškrtnout jídlo, které již není k dostání a současné přeškrtnutí je tak slabé, že je sotva vidět viz. obrázek:

 
Odpovědět 16.10.2018 11:40
Avatar
NouF
Člen
Avatar
Odpovídá na Rudolf Lichteneger
NouF:16.10.2018 12:51

Ahoj,

podíval bych se, jaký je výsledný HTML kod a na ten bych následně upravil css kod.

Ovládáš css?

Díky,
Marek

 
Nahoru Odpovědět 16.10.2018 12:51
Avatar
Odpovídá na NouF
Rudolf Lichteneger:16.10.2018 13:57

Ach ne, to jsem zapomněl podotknout Porve v životě jsem si složil web ale bez sebemenších znalostí jen pomocí různých návodů. je mi 66 let a udělal jsem to pro jednu známou. já se spíše věnuji opravám PC.
Pokud v editoru kliknu na značku "Přeškrtnutí" a dám prozkoumat, tak mi vpravo vyjede tabulka pravděpodobně CSS ale nevím kde zvětšit px (pixely?) toho přeškrtnutí.
Jinak jestli chceš můžeš se podívat na to moji hrůzu prvotinu:

http://hospudka-na-horce.cz/

Jinak díky za tvou snahu mi pomoci. Ruda

 
Nahoru Odpovědět 16.10.2018 13:57
Avatar
NouF
Člen
Avatar
Odpovídá na Rudolf Lichteneger
NouF:16.10.2018 14:05

Můžeš někde přeškrtnout nejaký text, abych videl jak to ten editor udělá, jestli použije třídu, nebo text-decoration: line-through

Děkuju

 
Nahoru Odpovědět 16.10.2018 14:05
Avatar
NouF
Člen
Avatar
NouF:16.10.2018 14:10

Koukám že je to ta lepší varianta. Jestli máš někde css soubor, tak tam jen vložíme název třídy, kterou pak upravíme.

 
Nahoru Odpovědět 16.10.2018 14:10
Avatar
Rudolf Lichteneger:16.10.2018 14:10

Ano, Jídelní lístek "Hovězí líčka....)

 
Nahoru Odpovědět 16.10.2018 14:10
Avatar
NouF
Člen
Avatar
Odpovídá na Rudolf Lichteneger
NouF:16.10.2018 14:12

To nevidím jako přeškrtnuté. Vy ano?

 
Nahoru Odpovědět 16.10.2018 14:12
Avatar
Rudolf Lichteneger:16.10.2018 14:14

Proboha jsem nevědomý, myslíš soubor css toho jídelního lístku? Díky za trpělivost (stydím se)

 
Nahoru Odpovědět 16.10.2018 14:14
Avatar
Rudolf Lichteneger:16.10.2018 14:16

ano aktualizoval jsem stránku

 
Nahoru Odpovědět 16.10.2018 14:16
Avatar
NouF
Člen
Avatar
Odpovídá na Rudolf Lichteneger
NouF:16.10.2018 14:19

Tak už to vidím i já.

Výsledek je ten, že pro přeškrtnutí se používá tag "DEL". To je fajn, protože máme možnost si v css souboru té šablony, určit cokoliv chceme.

1. krok - najít si css soubor, kam si budeme vkládat vlastní css kod. (normálně bych si vytvořil vlastní css soubor, ale nebudu vás trápit) najdete si tento soubor - http://hospudka-na-horce.cz/…nt/style.css?…

Do toho přidejte na konec:

del {
text-decoration: none;
font-size: 4em;
position: relative;
}
del::after {
border-bottom: 0.125em solid rgba(255, 0, 0, 0.5);
content: "";
left: 0;
line-height: 1em;
margin-top: calc(0.125em / 2 * -1);
position: absolute;
right: 0;
top: 50%;
}

Editováno 16.10.2018 14:20
 
Nahoru Odpovědět 16.10.2018 14:19
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:17.10.2018 8:37

Si myslim, ze sila preskrtnuti by mohla jit nekde v css3 nastavit. Pokud ne, dal bych tam normalne caru. Googloval jsi? :)

<style>
span.skrtni {position:relative;}
span.skrtni span {position:absolute; width:100%; bottom:0.125em; border-top:4px solid #f00; height:4px; display:block;}
</style>
<span class="skrtni">text<span></span></span>

<style>
span.skrtni2 {line-height:16px; font-size:60px; text-decoration:line-through;}
span.skrtni2 span {font-size:12px;}
</style>
<span class="skrtni2"><span>text</span></span>

google = text-decoration-line

 
Nahoru Odpovědět 17.10.2018 8:37
Avatar
Odpovídá na Peter Mlich
Rudolf Lichteneger:17.10.2018 13:32

Ahoj, sílu čáry vyřešil "NouF" ale nepovedlo se vyřešit přeškrtnutí tří řádků v tabulce viz. foto. Diky za ochotu, To tvoje řešení je co? moc tomu nerozumím díky. Ruda

 
Nahoru Odpovědět 17.10.2018 13:32
Avatar
Odpovídá na Rudolf Lichteneger
Rudolf Lichteneger:17.10.2018 13:34

Ano googloval ale nebyl jsem z toho moudrý, tak jsem se obrátil sem jako poslední spása.

 
Nahoru Odpovědět 17.10.2018 13:34
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:18.10.2018 8:01

Nechapu, ze nerozumis. Vsechna ta reseni jsou uplne jasna, podle kodu. Dal jsem ti html i css kod, staci zkopirovat, otestovat. Ono asi zalezi na tom, jak moc ovladas css a zda vis, co dela border, co position+top a pod.

  • Nouf pouzil tag <DEL> a k nemu si pres css fintu :after+content:"" pridal dalsi tag, kteremu definoval caru a posunul ho tak, aby prekryval text.
  • Totez dela moje prvni reseni, ale misto css :after tam pridavam tag SPAN.
  • To treti reseni neni uplne doladene. To zvetsi font strasne moc, 60px;. Diky tomu se zvetsi i tloustka preskrtnuti a ten druhy tag SPAN vrati font zas zpet na 12px.

Pozicovani cary je pouzitelne v pripade, kdy se text nezalamuje pres dva radky. Proto jsem pridal to druhe reseni s text-decoration. Ale to ma take sve mouchy. Nepovedlo se mi tu caru dat doprostred. Ale nejspis to pujde, nejak docilit, pres line-height nebo jinak. S tim uz si pohrajes.

Na obedy pouzivam menicko.cz, mesto Opava. Tam je to prehledne napsane. Tva tabulka je tak trochu chaos.


border - dela ramecek kolem elementu border-bottom je dole ___t_e_x_t___
position - absolute/relative, uvolnuje element pro posun
top - nastavuje pozici zhora, pokud je pouzite position:abso­lute/relative
display:block - premeni inline element na block element
width:100% - roztahne element do sirky (musel jsem pouzit, protoze puvodni elemen je SPAN, typu inline, jeho sirka se ridi sirkou textu v nem - <span></span>, uvnitr neni zadny text)
height:4px - snizil jsem vysku elementu na 4px. Pokud bych to eudelal, vyska je nastavena default na 1 nebo asi 1.25em, vyska pismenka, to by melo za nasledek prekryvani.
Ok, tak to zkus jinak, pulku z tech veci vyhazu a oramuji oba prvky...

<style>
span.skrtn     i {border:4px solid #f00; position:relative; }
span.skrtni span {border:4px solid #f00; position:absolute; bottom:0.125em; width:200px;}
</style>
<span class="skrtni">text<span></span></span>
 
Nahoru Odpovědět 18.10.2018 8:01
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:18.10.2018 8:09

Jo, position relative definuje oblast, ramecek, od ktereho bude pocitat souradnice pro left, right, top, bottom.
Kdyby jsi to pro prvni tag nepouzil, tak to position absolute bude pocitat souradnice podle nejblizsiho elementu s relative nad tim tagem ve stromu tagu. Pokud tam zadny nemas, tak se pocita od BODY. bottom:0.125em; zpusobi, ze ti to posune kamsi uplne pryc na spodni okraj stranky. Proto se to cele uzavira do position.

https://www.jakpsatweb.cz/css/
Vpravo je seznam css vlastnosti, rozklikej si to a neco si precti.
Pseudo trida :after tam asi popsane neni, to je takova specialitka. Hlavne se to muze chovat odlisne v chrome, ie, ff. Maji neco malo k tomu zde.
https://www.jakpsatweb.cz/…content.html
Nebo muzes jit na oficialni zdroje prohlizecu, treba firefox to ma popsane zde
https://developer.mozilla.org/…/CSS/::after

Editováno 18.10.2018 8:10
 
Nahoru Odpovědět 18.10.2018 8:09
Avatar
Odpovídá na Peter Mlich
Rudolf Lichteneger:18.10.2018 15:11

Děkuji ti moc za snahu mi pomoci ano moc tomu nerozumím, proto jsem se obrátil sem.
5ešení od "NouF" je dobré, pouze to nedokáže přeškrtnout dva řádky po sebou ale když udělám mezeru mezi těmi řádky, tak je to v pohodě, viz. příloha.
Šlo by toto řešení upravit aby to přeškrtlo ty řádky těsně pod sebou?
Web jsem dělal poprvé v životě bez sebemenších znalostí, podívám se na to menu "menicko.cz, mesto Opava"
Tady je ten script:

del {
text-decoration: none;
position: relative;
}

del::after {
border-bottom: 0.2em solid rgba(0, 0, 0, 1);
content: "";
left: 0;
line-height: 1em;
margin-top: calc(0.125em / 2 * -1);
position: absolute;
right: 0;
top: 50%;
}

ještě jednou moc děkuji

 
Nahoru Odpovědět 18.10.2018 15:11
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:19.10.2018 9:00

Prave to nejde. Funguje to jen pro jeden radek.

Zkusim to nazorne vysvetlit...
[ text ]
[ text [] ] To podtrzeni od Nouf funguje tak, ze si prida za ten text dalsi element.
[ text [ ] ] Jeho default valstnosti je, ze zkopiruje sirku, vysku a jine vlastnosti podle toho, ze ktereho je odvozeny.
[ [text] ] Kdyz aktivujes postion:relative a position:absolute + left:0, tak se oba elementy zacnou prekryvat.
(Pak si mohl usetrit praci a misto marginu pouzit top. A vlastnosti left a right se vzajemne prepisuji, stacila jedna.)

. [ ]
[ [ ] ]
[ text ]
[ ]
Potom tedy pouzije zaporny margin zhora a tim ten element posune ten novy element na vysku doprostred.

. [ ]
[ [__] ]
[ text ]
[ ]
A potom tam prida caru, oramovani elementu, ktera finguje to preskrtnuti a nastavi dalsi vlastnosti vzhledu.


Z toho plyne, pokud podtrhavas text pres dva radky, takto to bude fungovat

<del> text </del>
<del> text </del>

A takto uz nee

<del> text
text</del>

A muzes zkusit doladit to reseni s

<style>
span.skrtni2 {line-height:16px; font-size:60px; text-decoration:line-through;}
span.skrtni2 span {font-size:12px;}
</style>
<span class="skrtni2"><span>text</span></span>

A nebo mne vcera jeste napadlo pouzit hr
<style>
span.skrtni2 {line-height:16px; font-size:60px; text-decoration:line-through;}
span.skrtni2 span {font-size:12px;}
</style>
<span class="skrtni2">­<span>text</span></sp­an>

A mozna lepsi ukazku pro ty 3 moznosti

<style>
div {font-size:20px;}
</style>


<style>
span.skrtni {position:relative;}
span.skrtni span {position:absolute; width:100%; bottom:0.125em; border-top:4px solid #f00; height:4px; display:block;}
</style>
<div><span class="skrtni">text<span></span></span></div>
<div><span class="skrtni">prvni<br> druhy<span></span></div>

<p><hr></p>

<style>
span.skrtni3 {position:relative;}
span.skrtni3 hr {position:absolute; top:0em; width:100%; background:#00f; height:4px;}
</style>
<div><span class="skrtni3">text<hr></span></div>
<div><span class="skrtni3">prvni<br> druhy<hr></span></div>

<p><hr></p>

<style>
span.skrtni2 { font-size:60px; text-decoration:line-through; color:#080; }
span.skrtni2 span {font-size:20px; color:#000; }
</style>
<div><span class="skrtni2"><span>text</span></span></div>
<div><span class="skrtni2"><span>prvni<br> druhy</span></div>
 
Nahoru Odpovědět 19.10.2018 9:00
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:19.10.2018 9:15

A jeste jsem vystaral reseni s obrazkem.
google = strike width line css

<style>
span.skrtni4 {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
  background-repeat: repeat-x;
  background-position: 0 0.6em;
}
</style>
<div><span class="skrtni4">text</span></div>
<div><span class="skrtni4">prvni<br> druhy</span></div>

https://stackoverflow.com/…kness-in-css

 
Nahoru Odpovědět 19.10.2018 9:15
Avatar
Rudolf Lichteneger:20.10.2018 22:49

Pánové, díky všem co se mi snažili pomoci ale vzdal jsem to, Zmenšil jsem velikost písma aby se název vešel na jednu řádku a je to vyřešené. Škoda, že nevím jak by se dala rozšířit plocha editoru (zalamování řádku), aby se vešel název s většími písmy do jednoho řádku.

 
Nahoru Odpovědět 20.10.2018 22:49
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:22.10.2018 8:48

1. www prohlizec - zobrazit zdrojovy kod stranky
Pripadne ve ff se da udelat ctrl+a - prave tl - zobrazit zdrojovy kod vyberu (coz veme i html vygenerovane javascriptem, to muze byt v pripade editoru generovaneho pres js dost klicove)
2. ctrl + a
3. pspad - novy - html (ono to i nudlicky html kodu pekne preformatuje)
4. ctrl + v
5. v menu najit preformatovat html
6. A potom si v tom zjistis id, tridu, div, ve kterem to je a a vytvoris si pro nej css, ktery pak pridas do sablony.
Otazka asi 5 min to opravit. :)

Jsem ti poslal reseni. Ty sis je ani nezkusil, ze? ten obrazek mi prisel jako zajimave, za jistych okolnosti i funkcni reseni.
Z poslednich zprav oznacis posledni 2 bloky kodu. ctrl+c, plocha - prave tlacitko - novy > textovy soubor - ctrl+v - Soubor>Ulozit jako xx.html. 2x kliknout na plose.
Ten obrazek funguje tak, ze na pozadi pod textem vykresli vodorovne cary. Cili, kdyz je to pres 2 radky, vykresli se 2. Muze to delat problem u vice radku a nebo pri zmene velikosti radku.

Ale, poloz si jinou otazku. Ma smysl na webu u jidelniho listku to skrtat? Proste ten clovek dojde do restaurace a zjisti, ze uz to neni v menu. To se stava. Musi se naucit mit zalozni plan, jinou restauraci, jine jidlo. V Opave to chodi tak, ze nektere menicko je uz v 11:30 vyprodane. Coz pro mne osobne je treba zklamanim. Menicka davaji do 14, takze by aspon do 13 meli mit dost.

 
Nahoru Odpovědět 22.10.2018 8:48
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:22.10.2018 8:53

Jo, mezi nami, ja bych na to pouzil tabulku, jako to ma to menicko.cz. Kdyz se ten prostredek zalomi, tak se zalamuje uprostred. Navic to vypada vic solidne, jedna barva, jedno pismo, prirozene zalamovani.

Vývar s nudlemi
100g  1. Vepřový steak Argentina( krkovička ), Šťouchačky, okurek   79 Kč (1, 10, 13)
150g  2. Kuřecí ragů na zelenině, čínské nudle                      79 Kč
300g  3. Šťavnatá uzená krkovička, čočka na kyselo, pečivo, okurek  79 Kč

Jeste bys tam mel mit alergeny.
https://www.strava.cz/…alergeny.pdf

Editováno 22.10.2018 8:55
 
Nahoru Odpovědět 22.10.2018 8:53
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 22 zpráv z 22.