X3Photo Gallery Forums

twomoocows · 09 Jan 2018, 06:24

Hi folks.

Karl asked me to post this publicly.

twomoocows wrote wrote:One final question if you don't mind. Is there a way to make the contact form and contact widget have more contrast between the initial text inside the fields and the background colour of the fields? See the image below. Perhaps if I can make the text and field background a little brighter or maybe the field background a different colour. Against my black theme there is very little contrast.

Yes it is possible to override these styles with custom CSS, as they are by default a part of the SKIN colors. The "placeholder" text is generally subtle colored, because it should be clear to the user that it is not text they have input, but helper text. The default input backgrounds are subtle also, I personally don't think the visitor can't understand it is input fields.

In any case, if you want, then yes it can be edited with custom CSS, and I can give you some custom code later today (when I have the time). If possible, I would appreciate if you could re-port this question in the public forums? Others may find it helpful also. I will reply asap.

09 Jan 2018, 10:05

This is originally styled by the X3 "skin", but can be overridden with custom CSS. From panel, navigate to Settings > Custom > Custom CSS. By example, to create higher contrast for the "Black" skin, add the following:

input, select, textarea {
    background-color: #333 !important;
}

In the above, I added the !important attribute to force the background color and overwrite existing styles for ALL input types. You could also change the text color (the text that the user inputs) if required, for example by adding "color: #CCC !important;" on a new line.

If you want fine-grain control over what input types to style, you would have to override your choice of input types specifically:

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
  /* STYLES HERE, no need for !important attribute */
}

As for style of the helper texts that display when the input fields are EMPTY, eg BEFORE the visitor adds any text, this is more complicated, because it requires browser-specific prefixes. For example:

input:-ms-input-placeholder {
  color: #777 !important;
}
input::-webkit-input-placeholder {
  color: #777 !important;
}
input:-moz-placeholder {
  color: #777 !important;
}
input::-moz-placeholder {
  color: #777 !important;
}

In the above, you still need to use !important attribute to overwrite default X3 styles. Alternatively, you would have to add each browser-specific placeholder for each specific input type. The code would look quite awful.

I could probably write more, but the above should cover the question.

twomoocows · 09 Jan 2018, 10:09

Perfectly answered. I will give it a try.

You've created a wonderful gallery package and I am eternally grateful.

Thank you Karl.

X3Photo Gallery Forums

Changing colours or contrast in Contact form fields.3 posts

Changing colours or contrast in Contact form fields.

Re: Changing colours or contrast in Contact form fields.

Re: Changing colours or contrast in Contact form fields.