externí formulář mění CSS stránky

[Lubos237Participant]

umístil jsem na web http://www.vysokorychlostni-zeleznice.cz/cena-vlakove-jizdenky-nemecka/ externí formulář na vyhledání jízdenek. I když je “obalen” div (id program):

#program form, #program table, #program caption, #program tbody, #program tfoot, #program thead, #program tr, #program th, #program td {
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	font-size: 100%;
}
#program td {
	padding: 0 0 1px;
}
.widget-area .widget input, .widget-area .widget textarea {
	font-size: 100%;
}

vkládá CSS i do hlavičky stránky a dělá neplechu ve formulářích, např. v komentářích pod příspěvkem nelze vpisovat povinné kontaktní údaje.

[adminKeymaster Web]

Jakým způsobem tam ten formulář vkládáte? Používáte nějaký zkrácený zápis (shortcode)?

Máte pravdu, v rámci načtení formuláře tam je načteno ještě speciální CSS, které bohužel obsahuje i následující část:

input {
height: 14px;
margin-top: 6px;
line-height: 14px;
margin-left: 0px;
}

A protože je moc obecná a vztahuje se na input, tak dále ovlivňuje např. komentáře. Ale nevím, zda máte možnost do toho kódu nějak zasáhnout? Případně budete muset definovat nová upřesňující pravidla v souboru šablony style.css, tedy např. pro .comments-area input a výše uvedené hodnoty změnit tímto způsobem.

[Lubos237Participant]

Ten vyhledávací formulář vkládám následovně (nemohu jej ovlivnit):

<script src="http://banners.webmasterplan.com/view.asp?ref=720087&site=2894&type=html&hnb=309&js=1" type="text/javascript" language="javascript"></script>
<noscript><a href="http://partners.webmasterplan.com/click.asp?ref=720087&site=2894&type=b0&bnb=0" target="_blank">
<img src="http://banners.webmasterplan.com/view.asp?ref=720087&site=2894&b=0" border="0" alt="300x250_cz" /></a>
</noscript>

zkoušel jsem v “úprava CSS” přidat:

.comments-area input { height: 14px; margin-top: 6px; line-height: 14px; margin-left: 0px; }

a upravoval jsem hodnoty height, margin-top, line-height směrem nahoru a bohužel bez výsledku.

[adminKeymaster Web]

Zkoušel jsem v nástrojích pro vývojáře v prohlížeči přidat následující CSS a bez problémů to funguje:

.comments-area input {
height: 24px;
}

Zkuste to tam někde přidat, aby to bylo na webu vidět, nikde tam to pravidlo zatím online nevidím…

[Lubos237Participant]

Skvěle! Funguje to. :-) Děkuji!

Poradíte mi prosím ještě, co doplnit do CSS kvůli kontaktnímu formuláři http://www.vysokorychlostni-zeleznice.cz/kontakt/, do kterého také nejde zapisovat kvůli nízké výšce pole.

A v Jetpack formuláři PŘIHLÁŠENÍ K ODBĚRU NOVINEK, který je v pravém sloupci formou widgetu? Ten Jetpack formulář sice funguje, ale je velmi nízký vč. odesílacího tlačítka.

[adminKeymaster Web]

Kontaktní formulář:

.wpcf7 input[type="text"], .wpcf7 input[type="email"] {
height: 24px;
}

.wpcf7 input[type="submit"] {
height: 30px;
}

Odběr novinek:

.jetpack_subscription_widget input {
height: 24px;
}

Ale spíše přemýšlím, zda by to nešlo nějak jednodušeji a najednou než jednotlivě napravovat konkrétní problémy, něco jako:

input {
height: auto !important;
}

[Lubos237Participant]

vyzkoušel jsem

input {
height: auto !important;
}

a zdá se, že to funguje na vše, vč. komentářů.

Děkuji!

[adminKeymaster Web]

Perfektní, díky za odpověď! Možná by to šlo i nějak jinak, těžko říci. Bylo by asi zajímavé vyzkoušet s formulářem i nějakou jinou šablonu, zda nemá šablona třeba jen nedostatečně definované inputy…

[Lubos237Participant]

šablonu Twenty Fourteen bych asi nepodezříval. Jako viníka bych spíše viděl ten vyhledávací formulář Deutsche Bahn. Aby vůbec vypadal tak jak vypadá, tak jsem musel upravit CSS takto:

#program form, #program table, #program caption, #program tbody, #program tfoot, #program thead, #program tr, #program th, #program td {
border: 0;
margin: 0;
outline: 0;
padding: 0;
font-size: 100%;
}

#program td {
padding: 0 0 1px;
}

.widget-area .widget input, .widget-area .widget textarea {
font-size: 100%;
}

[Autor]

Příspěvky