I've been Googling around and searching this forum but no joy yet....
How on earth can I style individual input fields in Contour? (I've worked out how to style the various classes offered). I would like to amend the layout of my forms, for example, having the forename and surname fields side by side, rather than one below the other.
I've been working with Firebug and the below is the HTML for my Forename text input box:
I've tried setting up styles for the id "MainContent_MainContent_Item1_RenderForm_11_rpFieldsets_rpFields_0_8d3331d8_c0bc_4436_b024_d1ebb73e77bd_1" but it just does not seem to make any difference. I've tried using !important too, but nothing.
I've been asked to create some quite complex forms, and having every input field site one below the other would look terrible and be a nightmare to fill in.
Any help greatly appreciated as this is doing my head in!
Typical, I post asking for help after days, and then suddenly work it out!!
Basically you I needed to make the ID style the most "important" style, and although I was using !important, the class style was still taking precedence. However, but specifically targeting the ID within the #contour container, AND using !important, it works.
So, don't just use:
#idname {color: red !important}
You need to use:
#contour #idname {color: red !important}
where #contour is the ID of the <div> containg all the contour form elements.
So a typical style that I have added to the header of the page where the form sits is:
Thanks Fuji. I was aware of the default stylesheet being able to be replaced, but it was really a difficulty targetting individual input elements, rather than classes of elements. The ID's just weren't working. But as you will see above, it was my poor CSS skills (especially understading the cascade) that was causing my problem. I hope this posts helps others out though as I could find very little on targeting individual elements.
Styling Individual Input Fields
I've been Googling around and searching this forum but no joy yet....
How on earth can I style individual input fields in Contour? (I've worked out how to style the various classes offered). I would like to amend the layout of my forms, for example, having the forename and surname fields side by side, rather than one below the other.
I've been working with Firebug and the below is the HTML for my Forename text input box:
<input type="text" class="text" id="MainContent_MainContent_Item1_RenderForm_11_rpFieldsets_rpFields_0_8d3331d8_c0bc_4436_b024_d1ebb73e77bd_1" name="ctl00$ctl00$ctl00$MainContent$MainContent$Item1$RenderForm_11$rpFieldsets$ctl00$rpFields$ctl01$8d3331d8_c0bc_4436_b024_d1ebb73e77bd">
I've tried setting up styles for the id "MainContent_MainContent_Item1_RenderForm_11_rpFieldsets_rpFields_0_8d3331d8_c0bc_4436_b024_d1ebb73e77bd_1" but it just does not seem to make any difference. I've tried using !important too, but nothing.
I've been asked to create some quite complex forms, and having every input field site one below the other would look terrible and be a nightmare to fill in.
Any help greatly appreciated as this is doing my head in!
Thanks
Hi Mark,
When creating a form in Contour you have the choice of either using the default stylesheet or make use of a custom stylesheet.
What you could do is when creating a form lets say "Contact" you could then make use of this as a class to get the desire look and feel as such.
Your CSS would look like this
.contact{}.contact .contourField{}
.contact .contourField input.text{}
.contact .contourField textarea{}
.contact .contourField select{} and so on.
Hope this helps
//fuji
Typical, I post asking for help after days, and then suddenly work it out!!
Basically you I needed to make the ID style the most "important" style, and although I was using !important, the class style was still taking precedence. However, but specifically targeting the ID within the #contour container, AND using !important, it works.
So, don't just use:
#idname {color: red !important}You need to use:
#contour #idname {color: red !important}where #contour is the ID of the <div> containg all the contour form elements.
So a typical style that I have added to the header of the page where the form sits is:
In the end, it was a weakness in my CSS skills that let me down. Now let the fun begin...
Thanks Fuji. I was aware of the default stylesheet being able to be replaced, but it was really a difficulty targetting individual input elements, rather than classes of elements. The ID's just weren't working. But as you will see above, it was my poor CSS skills (especially understading the cascade) that was causing my problem. I hope this posts helps others out though as I could find very little on targeting individual elements.
Mark
Hi Mark,
No worries, glad i could help.
//fuji
is working on a reply...