Basics for Design V2.3+

[♥toyicebear]

Basics for Design - osCommerce V2.3+

 

Since the new 2.3+ version of osCommerce have some major design related differences to the older versions, i have made this new updated basics for osCommerce design topic.

 

Changing the shop logo

 

In the store admin under Configuration >> Store Logo you can upland your own logo.

 

Changing boxes, right and left columns

 

In the store admin under Modules >> Boxes you can control which boxes to show and if they should be shown in the right or the left column.

 

If you place all the wanted boxes in just 1 column, only that column will show and the site content will automatically fill the rest of the width.

 

The main files for design changes are:

 

1. includes/template_top.php

2. includes/template_bottom.php

3. stylesheet.css

 

In some cases you might find a need to edit these 2 files.

- includes/header.php

- includes/footer.php

 

2.3+ design is DIV/CSS based and also uses to "standardized" systems Grid960 and jQuery UI.

 

Grid960 is basically what controls the structure/layout of the webshop.

 

The files are located here: ext/960gs/

 

You can find more information about the 960 Grid System CSS Framework at www.960.gs

 

jQuery UI controls buttons, boxes, listings ++

 

The files are located here: ext/jquery/ui/

 

You can find information, download new themes or create your own themes at www.jqueryui.com

[burt]

Was just about to come and start a thread for 2.3 design changes :)

[♥toyicebear]

Was just about to come and start a thread for 2.3 design changes :)

 

Feel welcome to fill out this one with more info.. :)

[♥toyicebear]

Helpful design info for 2.3...: Designing New Themes the Easy Way WYSIWYG Theme design for osCommerce 2.3.x

[linkfm]

Nice go through. It'll be helpful for new version users. :)

[cconlin]

Oh thank you! I haven't read it all yet but I am thrilled that there's a "how-to" for implementing your own design / which files to change ... etc.

I can't wait to read it all when I get my design approved!

Cindy

[sayitagain]

I'm sorry if this is an obvious question, but I uploaded my new logo and it was big behind all of the rest of the wording for the store, so I shrunk my logo and reloaded it, but it is still covered by the rest of the store. Can I move all the wording down? I've been reading all the comments and just haven't found the answer yet. I'm hoping you can help me.

Thanks.

[♥toyicebear]

I'm sorry if this is an obvious question, but I uploaded my new logo and it was big behind all of the rest of the wording for the store, so I shrunk my logo and reloaded it, but it is still covered by the rest of the store. Can I move all the wording down? I've been reading all the comments and just haven't found the answer yet. I'm hoping you can help me.

Thanks.

 

You have several options.

 

1. Make the logo in about the same size as the original logo. (200px × 50px)

 

or

 

2. Edit stylesheet.css to change the appropriate style classes for header/logo.

 

or

 

3. Edit includes/header.php to suit your needs.

[sayitagain]

Thank you so much for your help. I'm so new at this I'm sure I'm not doing anything right.

[cconlin]

2.3+ design is DIV/CSS based and also uses to "standardized" systems Grid960 and jQuery UI.

 

 

Is 2.3+ version of OSC then CSS-based and not table-based layout?

Oh my gosh - I have been looking at the "Convert PRoduct listings to table-less CSS" contribution and thread.

I was looking for an OSC to CSS add-on for version 2.3.1 - but is 2.3.1 already table-less? I can't believe I am looking to change what might already be changed ...

 

Thanks -

Cindy

[♥toyicebear]

Is 2.3+ version of OSC then CSS-based and not table-based layout?

Oh my gosh - I have been looking at the "Convert PRoduct listings to table-less CSS" contribution and thread.

I was looking for an OSC to CSS add-on for version 2.3.1 - but is 2.3.1 already table-less? I can't believe I am looking to change what might already be changed ...

 

Thanks -

Cindy

 

 

Yes, 2.3+ is "more or less" table-less

[burningsoul]

please sir can you help me to add video upload option in admin panel please please :'(

[♥toyicebear]

please sir can you help me to add video upload option in admin panel please please :'(

 

 

Its already there....when adding or editing a product you can add "extra large images" , this can also be used for video

[FabioW]

Hi, can someone tell me how to remowe those two white bars between HEADER and BACKGROUND??

Go to www.barnsparadis.com to see the problem.

[♥toyicebear]

Hi, can someone tell me how to remowe those two white bars between HEADER and BACKGROUND??

Go to www.barnsparadis.com to see the problem.

 

In includes/header.php

 

Try to change:

<div id="header" class="grid_24">

To:

<div id="header">

[thebodhiman]

Feel welcome to fill out this one with more info.. :)

 

Hi

If upgrading a v2.2 rc2 install what are the benefits of v2.3.1, ie is it beneficial to change, my situation is I do not really have a running store yet it was more or less ready to upload further products and add or open payment gateways, styling had been finished

 

so can styling and written content and/or products be easily transferred over to a new 2.3.1 install, your recommendations appreciated

 

thankyou

[♥toyicebear]

Hi

If upgrading a v2.2 rc2 install what are the benefits of v2.3.1, ie is it beneficial to change, my situation is I do not really have a running store yet it was more or less ready to upload further products and add or open payment gateways, styling had been finished

 

so can styling and written content and/or products be easily transferred over to a new 2.3.1 install, your recommendations appreciated

 

thankyou

 

 

With some "adjustments" you can import over content like products, categories, manufacturers.

 

The advantage of using 2.31 is that its much more secure than 2.2RC2a , its much easier to work with "design" wise and all the new add-ons which is coming is mostly for 2.3+.

[uyvunk]

Hi, can someone tell me how to remowe those two white bars between HEADER and BACKGROUND??

Go to www.barnsparadis.com to see the problem.

Excuse me , but how you made the white box to cover the contents? I'm a new member.Thank you very much

[FabioW]

what I have done on my site is wrinet here:

http://www.oscommerce.com/forums/topic/367768-giving-231-a-white-background-wrapper/page__p__1582010__hl__white+bars+header__fromsearch__1#entry1582010

[kenkja]

Hi I've been working on creating a v2.3.1 install without the shopping cart and account log on, trying to end up with an information only site.

 

Could we collaborate on this.

 

ken

[♥toyicebear]

Hi I've been working on creating a v2.3.1 install without the shopping cart and account log on, trying to end up with an information only site.

 

Could we collaborate on this.

 

ken

 

osC as a info site, remove the cart functions via admin for 2.3.1

[kenkja]

Thanks Nick,

 

Sometimes its hard to see the wood for trees, I'd already downloaded this add-on and sort of lost it within my osc downloads folder, I guess that means its time to sort out the folder filing system, doh

:huh:

 

ken

 

 

 

[Fullminster]

Hi,

 

I installed oscommerce 2.3.1 some time ago and decided to go with this instead of Magento or OpenCart. I am doing some changes to the basic design but I haven`t managed to figure out how I can remove the spacing between the 3 columns so that they appear as one. I have spent quite some time trying myself and have also searched for an answer in the forum and on the net unsuccessfully. I would be grateful if anyone could tell me how to do this!

 

Best regards.

[♥toyicebear]

Hi,

 

I installed oscommerce 2.3.1 some time ago and decided to go with this instead of Magento or OpenCart. I am doing some changes to the basic design but I haven`t managed to figure out how I can remove the spacing between the 3 columns so that they appear as one. I have spent quite some time trying myself and have also searched for an answer in the forum and on the net unsuccessfully. I would be grateful if anyone could tell me how to do this!

 

Best regards.

 

The "spacing" is controlled by the grid960 system , you can edit the css file ext/960gs/960_24_col.css or make a new one at: www.960.gs

[wayne miller]

Anymore info on importing a theme from www.jqueryui.com ?

 

Ive downloaded a them but dont know how to install it