Form Builder and CSS Rollover Image

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
TripleFive
New Member
New Member
Posts: 4
Joined: Mon Mar 21, 2011 4:58 am

Form Builder and CSS Rollover Image

Post 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
TripleFive
New Member
New Member
Posts: 4
Joined: Mon Mar 21, 2011 4:58 am

Re: Form Builder and CSS Rollover Image

Post 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
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Form Builder and CSS Rollover Image

Post 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...
Post Reply

Return to “Layout and Design (CSS & HTML)”