Page 1 of 1

Form Builder and CSS Rollover Image

Posted: Mon Apr 04, 2011 4:10 am
by TripleFive
Hello:

I have looked at the Form Builder 'submit' button and the CSS that came with the module installation. I have found the CSS selector that I can change to move the buttons position to the form but haven't found where to edit the style of the button.

I am hoping to implement the button with a rollover :hover and URL('image') with CSS to style the input 'submit' box.

I am lost at what style selector I should look at modifying to get the results I am looking for.

Any suggestions? I can figure out the rest from what style selector I should change and have tried many things.

To get an idea of the end result goto: http://www.tyssendesign.com.au/articles ... m-buttons/ This is a tut on making rollover and forms buttons but at the very bottom there is a 'new comment' form that has the rollover style effect at the bottom.

Thanks again
-Larry B

Re: Form Builder and CSS Rollover Image

Posted: Tue Apr 05, 2011 5:41 am
by TripleFive
Ok, I GOT IT.. kinda.

Thanks to Firefox web development tool I managed to trace the selector to enter the following:

input[name="cntnt01fbrp_submit"]{
border: none;
width: 76px;
height: 30px;
background: url('/images/submit.png') no-repeat top left;}
input[name="cntnt01fbrp_submit"]:hover {
background-position: -76px 0;
}

THIS CREATED ANOTHER ISSUE.

Does anyone have form builder CSS default template that they can copy/paste for me? I must have changed something that ended up taking the 'email me a copy' text to the right and moved my input box.

With a COPY of the form builder (I know I should have backed up) I can compare what I have to what I need.

Thanks again
-Larry B

Re: Form Builder and CSS Rollover Image

Posted: Tue Apr 05, 2011 8:25 pm
by Dr.CSS
Most likely you have a class on the submit so you should target only that and not that input[name="cntnt01fbrp_submit"] as it may be messing with the other inputs...

A link to the problem site is always best for these problems...