PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

CSS for Newbies, or rusty coders ;)

Gravity Support Forums » Plugin Support » Gravity Forms

  1. jckpalmer
    Member

    Hi Guys,

    Firstly I want to congratulate you on BY FAR the best Form Plugin for WP! It's simply amazing and I love the interface, WP Admin area, Shortcode injection method it's excellent and really ticks all the boxes for me!

    Now I'm getting a little confused with the CSS and the Form ID thingy that you've cleverly added for those of us that want multiple forms on a single site with seperate styling for each (one presumes).

    Well my issue is this...(it's so simple you'll cry / laugh I bet !!!)

    Here's what I'm trying to achieve:

    1/ Form Border
    (i.e. Solid 1px Grey)

    2/ Form Labels and Form Entry Fields to be aligned
    (i.e. Name Label = aligned left 30% and Name Field aligned right 70% )

    3/ The input fields need to have cool little icons / images inside that are aligned to the right of the fields.

    4/ Header for the Form Title / Description needs to have a bg image
    (Like a big arrow pointing to the form)

    5/ A HUGE oversized submit button...that's 100% the width of the form itself

    6/ A footer with text and a BG image.

    Here's the form I want to copy / emulate:

    http://thefacebookmarketingsite.com/wp-content/uploads/2011/03/frank_web_form.png

    --------------------------

    Please I don't expect you to do it for me, so sorry if I come across lazy, I'm just a little rusty and have spent about 2 hours staring at CSS / HTML and YouTube tutorials...I'm able to get close using FF and FireBug but when I translate my changes to the site it doesn't seem to take hold!

    Maybe I'm using the wrong CSS Classes / ID's???

    I Hope you can help me quickly, I'm eager to get this simple task done quickly, also after searching this forum here it may also be a good way to go into a little more depth for advanced CSS / Coders using the Visual Guide!

    Many Many Thanks!!!

    John

    Posted 13 years ago on Tuesday March 22, 2011 | Permalink

  2. Carl Hancock
    Administrator

    Have you taken a look at the CSS Targeting Samples in the documentation?

    http://www.gravityhelp.com/documentation/css-targeting-samples/

    This outlines how to target various elements in your Form with CSS to change styles.

    Posted 13 years ago on Tuesday March 22, 2011 | Permalink

  3. jckpalmer
    Member

    Well that looks like the exact thing I need! LOL :D

    Many thanks!!

    John

    Posted 13 years ago on Tuesday March 22, 2011 | Permalink

  4. danielpettifer
    Member

    You can specify an image for the submit button in the form itself...

    Posted 13 years ago on Tuesday March 22, 2011 | Permalink

  5. jckpalmer
    Member

    One good turn deserves another...for some reason I'm using Chrome and I can't see your Favicon...now this is VERY frustrating as I have about 20 tabs open and FF with another 10 tabs, so while I'm developing and ALT - Tab / CTRL - Tab ...ing around I can't identify your pages quickly...

    Here's a Transparent Favicon of your Logo - <img src="http://i51.tinypic.com/348g22t.png" border="0" alt="Image and video hosting by TinyPic">

    Feel free to use it... much love!

    John

    Posted 13 years ago on Tuesday March 22, 2011 | Permalink

  6. jckpalmer
    Member

    You can specify an image for the submit button in the form itself...danielpettifer

    Did you fancy giving me a link to your form or posting the code?

    Thanks,

    John

    Posted 13 years ago on Tuesday March 22, 2011 | Permalink

  7. danielpettifer
    Member

    In your form editor go to - form settings - advanced - then choose image under form button (this is the submit button). Here you can specify the path to the image you want to use. It works perfectly but unfortunately I can not show you as my current project is under development. My form buttons always end up last to go in I'm afraid!

    Posted 13 years ago on Tuesday March 22, 2011 | Permalink

  8. jckpalmer
    Member

    Thanks :)

    Posted 13 years ago on Wednesday March 23, 2011 | Permalink

  9. jckpalmer
    Member

    How about an event using :Hover? I want to alter the image onMouseOver... I'll search the Forum while I wait for a reply...

    Posted 13 years ago on Wednesday March 23, 2011 | Permalink

  10. danielpettifer
    Member

    I think that you can only specify the path to the image but I am not 100% sure, I would also benefit from being able to use a hover state so if you find a way, please share it here.

    Posted 13 years ago on Wednesday March 23, 2011 | Permalink

  11. Kevin Flahaut
    Administrator

    If you want to use a hover image, you won't be able to do that using the image button option. We will probably include an option for a hover image in the UI at some point bur for now, your best bet is to style the default form button with some super-spiffy CSS rule that swaps the background for you.

    I prefer the the single-image CSS Sprite technique, but you can do it with separate images if you want.

    http://css-tricks.com/css-sprites/

    Here's the basic idea to get you started.

    [css]

/* basic styling on the button using a sprite background image */

body .gform_wrapper .gform_footer input[type=submit] {
	border:none;
	text-indent:-9000px;
	height:40px;
	width:100px;
	background-image:url(../images/submitbuttonsprite.png);
	background-repeat:no-repeat;
	background-position: 0 0;
 }

/* shift the background position of the sprite image on hover */

body .gform_wrapper .gform_footer input[type=submit]:hover {
	background-position: 30px 0;
}
    Posted 13 years ago on Wednesday March 23, 2011 | Permalink

  12. danielpettifer
    Member

    This is exactly what I was looking for. Can this be replicated for the - next page - and - back - buttons too. If so, what should the input[type=?] be?

    Posted 13 years ago on Wednesday March 23, 2011 | Permalink

  13. Kevin Flahaut
    Administrator

    Yep, you can use the technique for any form button if you want. You can view the form source and see what the input type is.. I think the next/previous buttons are actually a button element, while the others are submits.

    If you're styling multiple buttons/input types on the same form, you'll probably want to include the actual element ID as well so you can target each element individually.

    example.. of course, you would replace the ID of the button with the one from your actual form.

    body .gform_wrapper .gform_page_footer input[type=button]#gform_next_button_82_1 {your:css;}
    Posted 13 years ago on Wednesday March 23, 2011 | Permalink

  14. danielpettifer
    Member

    Awesome....

    Posted 13 years ago on Wednesday March 23, 2011 | Permalink

  15. jckpalmer
    Member

    You know what it was working (kind of), but the rollover image appeared behind the Gravity Form submit image.

    Is it not as simple as getting the hover image to the top using z-index or floating the divs?

    If it's possible using the CSS-Sprites any chance you could post the code examples...(Edit - Looks like you edited your post and did it ;) THANKS!)

    P.S. My form is 99% finished now :D

    I'm happy to say it's online and ready to go! (Aside from my :hover problem).

    http://www.thefacebookmarketingsite.com

    Thanks

    John

    Posted 13 years ago on Wednesday March 23, 2011 | Permalink

  16. Kevin Flahaut
    Administrator

    Looks like your hover state is working.. at least in Chrome. Very shiny and nice. Congratulations.

    Posted 13 years ago on Wednesday March 23, 2011 | Permalink

  17. vegaskev
    Member

    @Kev: I wanted to look at that document that you pointed out in your first comment, however, it seems to be unavailable now? I clicked the link and nothing. I'm trying to check it out through the cached version from google, but I thought you ought to know that it isn't online as of right now for some reason. And P.S., I miss the old site....I thought it was cool....even though the color schemes were a tad bit hard on the eyes. :)

    Posted 13 years ago on Wednesday March 23, 2011 | Permalink

  18. jckpalmer
    Member

    Hover problem resolved, thanks for the code ;)

    Grav Forms Rules!!!

    A* Support!!!

    Posted 13 years ago on Thursday March 24, 2011 | Permalink

  19. jckpalmer
    Member

    Yeah I noticed the site changed! I loved the old design, it was really cutting edge...this new design is a step back in my opinion!!!???

    WHY!!!!

    Also the header needs work...it's really bad.

    Smack the designer on the head and PUT IT BACK!!! PLEASE!

    P.S. Still no favicon ;) lol

    Posted 13 years ago on Thursday March 24, 2011 | Permalink

  20. danielpettifer
    Member

    The old design was nice, I agree with you, however I think they want to appeal to a broader demographic. The beauty of good design is function over form, especially when you are providing a service (one as good as this). It should appeal to as many people as possible and be as simple to use as possible. I loved the old design but I can see how it could be intimidating to some people. The header is doing exactly what it should do, nothing more, nothing less, why complicate things. (In my opinion) : )

    Posted 13 years ago on Thursday March 24, 2011 | Permalink

  21. vegaskev
    Member

    I STILL WANT TO BE ABLE TO ACCESS THAT DOCUMENTATION PAGE ON THE SITE??????

    This is what I get...... Oops! This link appears to be broken.

    I really need that link to be functional again....PLEASE!!!!!!!!!!!!

    Posted 13 years ago on Thursday March 24, 2011 | Permalink

  22. Carl Hancock
    Administrator

    @vegaskev Documentation is here: http://www.gravityhelp.com/documentation/ It should work if you are logged in, it is for me. Let me know if you are still having problems and I can test with your account and see whats up. Be sure to include what OS and browser you are using when replying if it isn't working.

    Posted 13 years ago on Thursday March 24, 2011 | Permalink

  23. vegaskev
    Member

    http://www.gravityhelp.com/documentation/css-targeting-samples/

    That is the url that I'm having issues accessing......the one i want the most...lol

    Posted 13 years ago on Thursday March 24, 2011 | Permalink

  24. Carl Hancock
    Administrator

    @VegasKev You are trying to access on old Documentation page. Our new Documentation is all new and so are the page URL's. Here is the new URL to the page you want:

    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    Posted 13 years ago on Thursday March 24, 2011 | Permalink

  25. vegaskev
    Member

    Awesome......I will be going over that this weekend....Thanks Carl. (Now I just have to hope that my brain can overcome my lack of experience....lol)

    Posted 13 years ago on Saturday March 26, 2011 | Permalink