Lukt niet om de kleuren spryfields en text bij forms te wijzigen

[Suchard]

Ik probeer de kleuren van de vakken en de tekst te wijzigen van het contactformulier.

Ik heb het wel in de spryvalidationfield en area gewijzigd, maar als ik online kijk dan voert ie het niet door.
Waar ligt dit aan??

http://www.decorator.nl/contact.php

Schermafbeelding 2012-05-17 om 10.24.29.jpg

Ik wil het eigenlijk net als dit formulier

http://www.suus-design.nl/contactformulier.php

[csshunter]

Hoi Suchard,
De inline script-opdracht voor de validatie is minder compleet dan die op de andere site.
Daar staat:

1
2
3
4
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {validateOn:["blur"]});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "none", {validateOn:["blur"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email", {validateOn:["blur"]});
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur"]});

Als ik dat even invoeg op de decorator-pagina, springt het rood je meteen tegemoet.

Met vriendelijke groet,
CSShunter

[Suchard]

Beste CSS Hunter,

Bedankt voor je reactie.

Ik wil eigenlijk niet dat het geel, groen en rood word. En de rode tekst met omlijning wil ik ook niet.
Ik had het gewijzigd in de spry validation fields, maar hij voert het niet door.

Terwijl het bij de andere site: www.suus-design.nl wel goed gaat.

Ik zie in de container of content ook niets staan wat deze kleuren veroorzaakt.

[csshunter]

Hoi Suchard,

Ik wil eigenlijk niet dat het geel, groen en rood word. En de rode tekst met omlijning wil ik ook niet.
Ik had het gewijzigd in de spry validation fields, maar hij voert het niet door.

Ah, ik zie het:

• Als je de inline-opdracht van m'n suggestie er in zet, worden de wijzigingen in je spry-css bestanden wel doorgevoerd.
• Maar die wijzigingen waren juist: geel, groen en rood, en de rode tekst met omlijning!
• Want je nieuwe SpryValidationTextField.css en SpryValidationTextarea.css verschillen wat dat betreft van de oude in suus-design.

Dat moet dus nog aangepast worden.

1.
Ik zou zeggen dat in de nieuwe SpryValidationTextField.css anders moet worden:

.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #969696;     /* iets donkerder grijs voor de leesbaarheid */
	font-style: italic; /* en cursief */
}

/* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #FFFFFF; /* gewoon wit als veld goed is ingevuld */
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FFCDCD; /* lichtrood om niet zo te knallen */
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFFF; /* gewoon wit blijven bij in veld klikken */
}

=======
2.
En aangepast in de nieuwe SpryValidationTextarea.css:

.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg
{
	display: inline;
	color: #969696;     /* iets donkerder grijs voor de leesbaarheid */
	font-style: italic; /* en cursief */
}

/* When the widget is in the valid state the TEXTAREA has a green background applied on it. */
.textareaValidState textarea, textarea.textareaValidState {
	background-color: #FFFFFF; /* gewoon wit als veld goed is ingevuld */
}

/* When the widget is in an invalid state the TEXTAREA has a red background applied on it. */
textarea.textareaRequiredState, .textareaRequiredState textarea, 
textarea.textareaMinCharsState, .textareaMinCharsState textarea, 
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
	background-color: #FFCDCD; /* lichtrood om niet zo te knallen */
}

/* When the widget has received focus, the TEXTAREA has a yellow background applied on it. */
.textareaFocusState textarea, textarea.textareaFocusState {
	background-color: #FFFFFF; /* gewoon wit blijven bij in veld klikken */
}

=======
3.
Verder zag ik dat bij niet invullen van het berichtvak het hele formulier onder de linker-afbeelding springt.
Dat wordt in de html veroorzaakt door:

1
<textarea rows="5" cols="60" id="Bericht" name="Bericht" autocomplete="off"></textarea>

Dit is een net wat te groot gebied om de foutmelding "Er is geen bericht ingevuld" er naast te kunnen hebben, dan floept ie naar beneden.
Het leed is geleden met het kleiner maken van het invulgebied, bv.:

1
<textarea rows="5" cols="50" id="Bericht" name="Bericht" autocomplete="off"></textarea>

Met vriendelijke groet,
CSShunter

[Suchard]

Ik doe zeker iets fout, maar ik zie het niet.

Ik heb de wijzigingen allemaal doorgevoerd, maar nog steeds pakt ie de oude instellingen.

Ik moet toch de javasriptcode in mijn contact.php document wijzigen??

[csshunter]

Ja, de contact.php pagina is nu goed.
Maar de twee bijbehorende css-bestanden zijn nog steeds de oude. Heb je de nieuwe wel geüpload (naar de goede plek op de server)?

[Suchard]

Ik ontdekte ( tja, ik ben nog steeds geen 'wiz' ) het mapje www, en daar stond ook een map sprysets in, die heb ik nu geupdate, en nu werkt het wel.
Ik dacht dat alleen de public.html map geupdate hoefde te worden.

Waarom staat er dat allemaal dubbel in?? En waarom pakt ie, de spry sets dan niet als ik de update laat lopen?

[csshunter]

nu werkt het wel.

Mooi!

=======

Ik dacht dat alleen de public.html map geupdate hoefde te worden.

Nee, de public.html map is alleen de hoofdmap van de site op de server.
Daaronder zitten andere mappen, bv. die voor de afbeeldingen (www.decorator.nl/images/, die zelf ook weer submapjes heeft) en die voor de SpryAssets.
Bij jou zitten alle pagina's in de hoofdmap, en die pagina's verwijzen naar zaken in de submappen.
Als je een pagina aanpast, wordt daarmee niet altijd ook automatisch gezorgd voor een update van de onderdelen (die in andere mappen staan)!
Dus dan moeten gewijzigde onderdelen apart geüpload (her-geüpload) worden naar hun eigen mapje.

=======

En waarom pakt ie, de spry sets dan niet als ik de update laat lopen?

Het al of niet automatisch doorvoeren van alle thuis voor een site gemaakte veranderingen hangt geloof ik van de instellingen van Dreamweaver af; maar die heb ik niet, dus daar kan ik weinig over zeggen.

• Ik dacht dat er een keuze was tussen "alleen deze gewijzigde pagina uploaden" en "alle wijzigingen uploaden".
• Als je het laatste niet wilt (bv. omdat je er lokaal ook testpagina's op hebt staan), moet je dus handmatig de veranderde zaken uploaden, ook de gewijzigde hulp-bestanden die bij een pagina horen, zoals de spry-toestanden.

=======

Waarom staat er dat allemaal dubbel in??

Ik weet eigenlijk niet, of dat wel het geval is: ik zie zo gauw niets dubbel op de server staan.

• De twee spry-css bestanden staan in elk geval niet ook nog eens in de hoofdmap, want met bv. www.decorator.nl/SpryValidationTextField.css krijg je de mededeling "404 - Page not found".
• De twee spry-css bestanden en de twee bijbehorende spry-javascript bestanden staan wel keurig in de SpryAssets-map waarnaar vanuit de pagina wordt verwezen, kijk maar: www.decorator.nl/SpryAssets/. Daar staan ook geen oude versies of iets dergelijks in, de map is verder gewoon mooi leeg.

Dus de bestands-locaties op de server zien er nu gezond uit.

Met vriendelijke groet,
CSShunter