https://legacy.forums.gravityhelp.com/topic/styling-multi-page-form Gravity Support Forums Topic: Styling Multi-page form. en-US Tue, 21 Apr 2026 15:10:01 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/styling-multi-page-form#post-33909 Tue, 30 Aug 2011 11:15:02 +0000 Kevin Flahaut 33909@https://legacy.forums.gravityhelp.com/ <p>Yeah, my pleasure. Thanks for your patience.</p> <p>Just a thought here. In the mean time, you could fake the "Code Canyon" styles by using the HTML blocks. </p> <p>It's kind of a hack/workaround but if you turned off the default steps, then used an HTML block at the top of each page to introduce the Code Canyon markup/styles then you could pull it off. You would end up with multiple instances of the page indicator, but each would only be visible on it's page and you could manually increment the active, previous and next classes to suit your needs.</p> <p>It's not ideal, but I'm sure it would work and only your hairdresser would know the difference. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-form#post-33899 Tue, 30 Aug 2011 10:04:08 +0000 webdev 33899@https://legacy.forums.gravityhelp.com/ <p>Sounds great! Looking forward to the next release. Again, Thank you for all of your help. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-form#post-33896 Tue, 30 Aug 2011 09:50:01 +0000 Kevin Flahaut 33896@https://legacy.forums.gravityhelp.com/ <p>currently there isn't a class for the previous/next steps but it would make sense to add one. Also for the first step and last so you don't have to rely on the pseudo-selectors.</p> <p>I'll see if we can work that into an upcoming release so we can add some extra styling flexibility.</p> <p>EDIT: I've talked to the team here and we're going to add several helper classes to the step list. There will be classes for the first item, last item, completed steps, previous step, next step, etc. I think that should open the door to some really nice styling opportunities. Also, I do plan on implementing some other built-in styling options but don't think those are going to make the pending 1.6 release - probably just a little bit later. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-form#post-33894 Tue, 30 Aug 2011 09:43:38 +0000 webdev 33894@https://legacy.forums.gravityhelp.com/ <p>Kevin,</p> <p>Thank you so much for you help. I was so at a loss as to what direction to take. This has helped a TON. Very quick response as well, very much appreciated.</p> <p>I have one last question, is there a css selector for previous step? I would like to re-color the steps as the user progresses through the form. If not, we'll make due with what we have. If there is, I may be able to pull off the look I am looking for. Thanks in advance either way. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-form#post-33876 Tue, 30 Aug 2011 01:24:24 +0000 Kevin Flahaut 33876@https://legacy.forums.gravityhelp.com/ <p>Okay, so I spent a little time with this.. created a few quick graphics and knocked out something very similar that may help point you in the same direction. Basically this is my approach, but it's rough so you can take the idea, refine it or whatever.</p> <p>I copied your page markup and threw it up on my test area to tinker with. You can find it here.</p> <p><a href="http://dl.dropbox.com/u/688846/gravityhelp/Gearheart.html" rel="nofollow">http://dl.dropbox.com/u/688846/gravityhelp/Gearheart.html</a></p> <p>As you can see, I achieved similar styling to what you referenced. I didn't test this in all the browsers, but it looks pretty good in those I did.</p> <p>Firefox: <a href="http://bit.ly/p1GaRh" rel="nofollow">http://bit.ly/p1GaRh</a><br /> Safari: <a href="http://bit.ly/o6VizL" rel="nofollow">http://bit.ly/o6VizL</a></p> <p>Here's the CSS I added to get it done..</p> <p><a href="http://pastie.org/2452758" rel="nofollow">http://pastie.org/2452758</a></p> <p>and here's a link to the background image files if you want them to tinker with.</p> <p><a href="http://dl.dropbox.com/u/688846/gravityhelp/progress_bgs.zip" rel="nofollow">http://dl.dropbox.com/u/688846/gravityhelp/progress_bgs.zip</a></p> <p>Note that this doesn't work with a ton of different pages. It's best used for simple 3 to 5 page forms in it's current incarnation. Again, this is an attempt to get you rolling in that general direction stylistically. If you really need some customization help, we'll be happy to recommend some good designers that could help you out. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-form#post-33852 Mon, 29 Aug 2011 18:07:05 +0000 Kevin Flahaut 33852@https://legacy.forums.gravityhelp.com/ <p>Sorry, I was out of the office for a bit myself. Thanks for the link. Let me take a look at this and I'll reply back in a while with suggestions. This could be a little involved so I'll get back asap. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-form#post-33795 Mon, 29 Aug 2011 12:36:10 +0000 webdev 33795@https://legacy.forums.gravityhelp.com/ <p>Oh, sorry, could have sworn I posted it too. Anyway, here is the link to the form.</p> <p><a href="http://inhouse.gearheart.com/gearheart/?page_id=610" rel="nofollow">http://inhouse.gearheart.com/gearheart/?page_id=610</a></p> <p>I set the css of the form back to default for the steps, cause, yeah, I kinda broke the entire site. :-\ </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-form#post-33791 Mon, 29 Aug 2011 12:25:02 +0000 Kevin Flahaut 33791@https://legacy.forums.gravityhelp.com/ <p>How about a link to your form page? That would make it a lot easier to offer some specific guidance. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-form#post-33787 Mon, 29 Aug 2011 11:55:32 +0000 webdev 33787@https://legacy.forums.gravityhelp.com/ <p>Hello,</p> <p>I am trying to style the step bar to a multi-page form and I am having a really hard time getting it to get the look that I am trying to achieve. The look that I am going for is this <a href="http://codecanyon.net/item/dynamic-step-process-panels-for-wordpress/full_screen_preview/125748" rel="nofollow">http://codecanyon.net/item/dynamic-step-process-panels-for-wordpress/full_screen_preview/125748</a> I am having trouble getting it anywhere close to this look, I can style the text color but can't seem to get the images to appear and function. Can I get a little help or guidance please?</p> <p>Thanks in advance </p>