|
b2995
|
December 17, 2014 at 8:29 am
I have several visual things I’d like to change on this page.
To make my site color blind friendly, how do I change the text on forms to another color from red?
How do I hide…
“In order to process your registration, we ask you to provide the following information.
Please note that all fields marked with an asterisk (*) are required.”
How do I change the color of the title row under Ticket Details and reduce that white space?
How do I change the formatting for the Attendee # title?
How do I change the formatting for titles of each section (ex: make “Personal Information” stand our more)?
How do I reduce the white space between each field…make the form a little tighter?
Thank you!
|
|
Lorenzo Orlando Caum
|
December 17, 2014 at 1:11 pm
Hi,
You can inspect any element on a page using a free tool like Chrome Developer Tools (available with Google Chrome) or Firebug (available as a web browser extension).
This will show you the CSS that is handling the styling including the file and line number. Then you can add new styling to your child theme’s stylesheet or through a plugin like Reaktiv CSS builder or My Custom CSS.
This CSS handles the red color for required fields:
.needs-value {
-webkit-box-shadow: 0px 0px 3px 0 rgba(227, 64, 100, .8);
-moz-box-shadow: 0px 0px 3px 0 rgba(227, 64, 100, .8);
box-shadow: 0px 0px 3px 0 rgba(227, 64, 100, .8);
}
The rgba color can be changed to different values: http://www.december.com/html/spec/colorrgbadec.html
Try this CSS for the help text:
p#spco-attendee_information-pg.spco-steps-pg.small-text.drk-grey-text {display:none}
This is the CSS that is for the attendee # title:
legend.spco-attendee-lgnd.smaller-text
It can be attached to a different font-family to change the styling like so:
legend.spco-attendee-lgnd.smaller-text {font-family:Times New Roman}
This CSS will reduce the spacing between the fields:
#single-page-checkout .spco-attendee-wrap-fs .reg-page-form-field-wrap-pg + .reg-page-form-field-wrap-pg {
padding-top:.25em;
}
Your registration form titles aren’t currently appearing so those may have been turned off.
Then force refresh to see the changes:
http://en.support.wordpress.com/browser-issues/#force-refresh
—
Lorenzo
|
