CSS based layout (tableless)

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
robgt
Ensign (ENS)
Ensign (ENS)
Posts: 1
Joined: Fri Aug 07, 2009 2:32 am

CSS based layout (tableless)

Post by robgt » Fri Aug 07, 2009 3:19 am

Is it possible to have an ablecommerce store that doesn't use tables for it's layout (site structure)?
If so, can I see some demonstration(s) of such stores to see the capabilities - if there are any out there?
I've only managed to find table based sites so far.

Advice and pointers on skinning a tableless layout would also be very welcome.
:D
Cheers,
Rob

joebeazelman
Lieutenant (LT)
Lieutenant (LT)
Posts: 78
Joined: Wed Mar 05, 2008 11:27 am

Re: CSS based layout (tableless)

Post by joebeazelman » Fri Nov 13, 2009 10:55 am

Out of the box, I don't think there's any tableless layouts included. You can override the standard templates, but its probably a lot of work and isn't upgradable. Even if you did, you would still have to restructure all of the user controls in the ConLib directory. Many of them use tables to display data. I'm hoping this will change in future releases.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: CSS based layout (tableless)

Post by mazhar » Mon Nov 16, 2009 4:49 am

Current layout of AbleCommerce makes use of tables for structuring and there is no div based structure available out of the box. In order to accomplish a div based template you would need to customize all store pages, scriptlets and ConLib controls those are making use of tables for formatting.

steveb51977
Ensign (ENS)
Ensign (ENS)
Posts: 9
Joined: Tue Jun 22, 2010 2:13 pm

Re: CSS based layout (tableless)

Post by steveb51977 » Thu Mar 03, 2011 12:21 am

I seriously would like to see Able Commerce to modify their UI to support DIV and CSS layouts versus using HTML Table tags which are very outdated. Most of the popular ecommerce toolkits have switched to using themes/skins that use modern standards with DIV tags and CSS controlling the layout.

Please consider this recommendation as this is one main sticking point from switching to your platform.

Thanks

User avatar
clevername
Lieutenant (LT)
Lieutenant (LT)
Posts: 54
Joined: Tue Jan 11, 2011 8:54 am

Re: CSS based layout (tableless)

Post by clevername » Fri Mar 04, 2011 11:44 am

It is not a very easy thing to change a lot of the design to table less. But the main problem I found in doing that is most programmers that you have help with you site every now and then, don't necessarily know the ins and outs of CSS well enough to accomplish somethings without tables.

And I agree that their table design is rather out dated but for how sophisticated the cart is, the fact that the layout has tables is a very small drawback.

But there is nothing stopping you from changing the layout. A place to start would be the "Content and Layout" section under the Website link on the dashboard. You can see where the table layout is made for each style of page(one column, left sidebar, etc. ). I would copy one, rename it, and edit that new one in case you need to revert back. Then go to your desired theme (App_Themes) and you will need to change all of the CSS to reflect the new layout design. To do this I suggest copying style.css, rename it and use the new UpdatedStyle.css for all your new layout styles. I suggest this because the layout structure and design as a ripple effect. If you change one table or td style, it will show up in places you had no idea related. So I guess I am saying do it section by section so as not to mess up too much in the process, then go back and compress and compile your CSS if needed.

If you want to know more let me know.

steveb51977
Ensign (ENS)
Ensign (ENS)
Posts: 9
Joined: Tue Jun 22, 2010 2:13 pm

Re: CSS based layout (tableless)

Post by steveb51977 » Thu Mar 17, 2011 9:00 pm

Thanks for the information. I agree it could be done via CSS and modifying the theme however I have ran into issues with other programs modifying templates and themes and the upgrades would break our changes. Every upgrade would require us to modify the theme files again. Not sure if that is how AbleCommerce would work with changes to templates and upgrades, but it would be nice to see a more modern theme/template engine

Thanks

gdelorey@mitcs.com
Commander (CMDR)
Commander (CMDR)
Posts: 129
Joined: Thu Oct 19, 2006 5:33 pm

Re: CSS based layout (tableless)

Post by gdelorey@mitcs.com » Tue Mar 22, 2011 5:13 pm

Another vote for table-less AbleCommerce. That's the main reason keeping me with other e-comm solutions for the time being.

User avatar
clevername
Lieutenant (LT)
Lieutenant (LT)
Posts: 54
Joined: Tue Jan 11, 2011 8:54 am

Re: CSS based layout (tableless)

Post by clevername » Wed Mar 23, 2011 8:57 am

OR you could hire a freelancer/Design company who is good with AbleCommerce

gdelorey@mitcs.com
Commander (CMDR)
Commander (CMDR)
Posts: 129
Joined: Thu Oct 19, 2006 5:33 pm

Re: CSS based layout (tableless)

Post by gdelorey@mitcs.com » Wed Mar 23, 2011 9:02 am

OR you could hire a freelancer/Design company who is good with AbleCommerce
I have no issues in creating skins or themes for AC, or any other ecommerce package for that matter. The point is not that you should find people good at working with tables, it's that *most* software packages have followed the trends of the web and gone to CSS-based layouts. To be able to completely redesign your site every 1-2 years with CSS would be great. With tables, you must break everything down and rebuild which is very inefficient.

I don't expect them to change this over night, but it would be nice to see them plan it for the near future.

User avatar
clevername
Lieutenant (LT)
Lieutenant (LT)
Posts: 54
Joined: Tue Jan 11, 2011 8:54 am

Re: CSS based layout (tableless)

Post by clevername » Wed Mar 23, 2011 9:27 am

I agree.. but as a freelance designer, you should support the cause lol.
I think the way they did the table layout was easier at the time of writing this software and to jump to CSS based would mean rewriting every bit of their code calling a table as well as all of there theme designs. It would be a hefty job, but I agree that it is a job that must be done.

mouse_8b
Commander (CMDR)
Commander (CMDR)
Posts: 115
Joined: Mon Oct 11, 2010 1:21 pm
Location: Austin, TX
Contact:

Re: CSS based layout (tableless)

Post by mouse_8b » Fri Apr 08, 2011 10:04 am

I have had success with a table-less site. It does take heavy customization of a lot of scriptlets and ConLib controls, but it will work. The scriptlet parts are pretty straightforward since its just messing with HTML. Editing ConLib controls are a bit more complicated, but I've worked out a process to convert TABLEd controls into DIVed controls. First step, open up the control's .ascx file. Use the find & replace feature of your favorite text editor to change all <table, <tr, <td, <th, </table, </tr, </td,</th, to <div and </div, respectively. Notice there are no closing tags ('>'), you don't want to skip over or overwrite any attributes the table tags may have had.

Once you have your DIV soup, you can start adding in your own CSS classes, deleting redundant DIVs, and generally making the control your own. DO NOT change any id attributes of any table (now div) tags; the code-behind files rely on these ids to do their fancy magics. Technically, there are some you can change, but make sure you know what you are doing first. If you need to move around ASP.NET tags, make sure you move the whole block. (<asp:xx>..</asp:xx>). Lastly, remember to save it in the custom folder!

You can look at http://www.barknpurr.com to see a DIV based theme that was professionally designed and I integrated. It has taken me a few days to integrate his DIV based layout into a new AC installation. It takes maybe an hour to set up a page worth's of scriptlets, and the rest of the time is wrestling with ConLib.

I hope this helps someone. It is a lot of work, but I do believe it is worth it.
Last edited by mouse_8b on Mon Jan 09, 2012 3:49 pm, edited 1 time in total.

mike92117
Lieutenant (LT)
Lieutenant (LT)
Posts: 64
Joined: Sat Nov 07, 2009 6:41 pm

Re: CSS based layout (tableless)

Post by mike92117 » Mon Aug 01, 2011 1:43 pm

>> I hope this helps someone. It is a lot of work, but I do believe it is worth it.

Just to let you know, this is VERY helpful.

User avatar
deverill
Lieutenant (LT)
Lieutenant (LT)
Posts: 64
Joined: Tue Jan 06, 2009 11:58 am
Location: Key West, FL
Contact:

Re: CSS based layout (tableless)

Post by deverill » Wed Aug 24, 2011 9:36 am

Just remember that with the extensive customization of the conlibs you may have significant difficulty upgrading to the next version that makes changes to the conlibs. Our business rules and directors have required us to make changes to almost every conlib we use and it is painful to update.
Jim Sewell - Web Programmer
Trusted Tours & Attractions

Post Reply