Tableless design & other templating tips

Discussion in 'Templates customization' started by froglegs, Feb 24, 2009.

  1. froglegs

    froglegs New Member

    Joined:
    Sep 18, 2008
    Messages:
    5
    I'm a huge fan of aMember and wanted to share a few templating tips picked up over the years. Many of these came about from informal user testing while others are just personal preference. Screenshots are attached.

    General:
    * create tableless layout (a lot of work, but makes editing easier in the end)
    * use vertically arranged fields (creates more room for error messages)
    * add javascript highlighting on form fields
    * style error messages
    * create button styles

    Login form:
    * create separate page for retrieving lost password
    * add signup section
    * add loader image (animated gif) on redirection page

    Signup form:
    * add credit card image
    * group together contact information
    * add custom fields (e.g., phone number)

    Account area:
    * add sidebar menu for account links
    * add separate page for editing contact details
  2. davidm1

    davidm1 aMember User & Partner

    Joined:
    May 16, 2006
    Messages:
    4,437
    Very nice design improvement!!!

    David
  3. benfitts

    benfitts Member

    Joined:
    Apr 10, 2008
    Messages:
    111
    Hi Froglegs,

    Do you have a detailed guide on how to make these changes or are you available to do custom programming to make similar changes to existing amember sites? I'd be happy to pay for either!
  4. aschechtman

    aschechtman Member

    Joined:
    Oct 31, 2007
    Messages:
    51
    Very nice! Thanks for sharing your hard-won tips.

    Andrew
  5. jenolan

    jenolan aMember Coder

    Joined:
    Nov 3, 2006
    Messages:
    510
    Yes could you give us a working example so we can steal errr I mean learn from your hard work ;)

    Thanks,
    Larry
  6. andy_glo

    andy_glo Member

    Joined:
    Aug 29, 2006
    Messages:
    51
    Looks great, would be nice if they were available to share or buy and we could use the header and footers on them.

    It would be a good idea if there were resources like this.

    regards, Andy
  7. miso

    miso aMember Pro Customer

    Joined:
    Aug 22, 2006
    Messages:
    543
    froglegs, contact me at the email below, as I would totally love to talk to you about those designs... might even throw some $$ your way for a shortcut like that.
  8. olliejames

    olliejames aMember Pro Customer

    Joined:
    Mar 19, 2007
    Messages:
    26
    Hi Froglegs,

    I am very interested in the tableless design, can you post some examples of the code here?

    thanks

    Oliver
  9. powerkeys

    powerkeys Member

    Joined:
    Aug 29, 2006
    Messages:
    192
    Yes, showing images is nice, but working code is even better.
  10. ddelliquadri

    ddelliquadri New Member

    Joined:
    Dec 6, 2005
    Messages:
    6
    I'd gladly pay for the code as well. Message me!
  11. miso

    miso aMember Pro Customer

    Joined:
    Aug 22, 2006
    Messages:
    543
    Hmm... just had a thought, as I did just go through a redesign of a signup/members area in a way for a certain template, and it went full on CSS/tableless.

    Might have to design this puppy myself, as froglegs is nowhere to be found, and those seem to be concepts in photoshop or something only at this point...

Share This Page