webdev
Member
Hello,
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 http://codecanyon.net/item/dynamic-step-process-panels-for-wordpress/full_screen_preview/125748 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?
Thanks in advance
How about a link to your form page? That would make it a lot easier to offer some specific guidance.
webdev
Member
Oh, sorry, could have sworn I posted it too. Anyway, here is the link to the form.
http://inhouse.gearheart.com/gearheart/?page_id=610
I set the css of the form back to default for the steps, cause, yeah, I kinda broke the entire site. :-\
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.
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.
I copied your page markup and threw it up on my test area to tinker with. You can find it here.
http://dl.dropbox.com/u/688846/gravityhelp/Gearheart.html
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.
Firefox: http://bit.ly/p1GaRh
Safari: http://bit.ly/o6VizL
Here's the CSS I added to get it done..
and here's a link to the background image files if you want them to tinker with.
http://dl.dropbox.com/u/688846/gravityhelp/progress_bgs.zip
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.
webdev
Member
Kevin,
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.
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.
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.
I'll see if we can work that into an upcoming release so we can add some extra styling flexibility.
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.
Yeah, my pleasure. Thanks for your patience.
Just a thought here. In the mean time, you could fake the "Code Canyon" styles by using the HTML blocks.
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.
It's not ideal, but I'm sure it would work and only your hairdresser would know the difference.
