Jump to content



* * * * - 1 votes

Basics for Design V2.3+


  • Please log in to reply
166 replies to this topic

#1   toyicebear

toyicebear
  • Community Sponsor
  • 6,329 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 03 December 2010 - 02:09 PM

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

Edited by toyicebear, 03 December 2010 - 02:10 PM.


#2 ONLINE   burt

burt

    Vanquisher of Demons

  • Community Team
  • 9,133 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 03 December 2010 - 02:23 PM

Was just about to come and start a thread for 2.3 design changes :)
Tutorials & eBooks
Templates
All instantly downloadable.

Bootstrap Templates now available!  Get in touch.

Making your shop better, one osCommerce module at a time - get in touch, or get my newsletter every 1st of the month.

#3   toyicebear

toyicebear
  • Community Sponsor
  • 6,329 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 03 December 2010 - 02:32 PM

View Postburt, on 03 December 2010 - 02:23 PM, said:

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

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

#4   toyicebear

toyicebear
  • Community Sponsor
  • 6,329 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 14 February 2011 - 02:42 PM

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

#5   linkfm

linkfm
  • Members
  • 11 posts
  • Real Name:Linkfm
  • Gender:Male

Posted 20 February 2011 - 04:56 PM

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

#6   cconlin

cconlin
  • Members
  • 41 posts
  • Real Name:Cindy
  • Gender:Female
  • Location:United States

Posted 07 March 2011 - 02:42 AM

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

#7   sayitagain

sayitagain
  • Members
  • 8 posts
  • Real Name:Jodi

Posted 08 March 2011 - 04:46 PM

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.

#8   toyicebear

toyicebear
  • Community Sponsor
  • 6,329 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 09 March 2011 - 01:59 AM

View Postsayitagain, on 08 March 2011 - 04:46 PM, said:

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.

#9   sayitagain

sayitagain
  • Members
  • 8 posts
  • Real Name:Jodi

Posted 09 March 2011 - 06:36 PM

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

#10   cconlin

cconlin
  • Members
  • 41 posts
  • Real Name:Cindy
  • Gender:Female
  • Location:United States

Posted 13 March 2011 - 09:17 PM

Quote

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

#11   toyicebear

toyicebear
  • Community Sponsor
  • 6,329 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 14 March 2011 - 03:34 AM

View Postcconlin, on 13 March 2011 - 09:17 PM, said:

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

#12   burningsoul

burningsoul
  • Members
  • 4 posts
  • Real Name:Mangalamurthy.G.Bhat

Posted 02 April 2011 - 09:55 AM

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

#13   toyicebear

toyicebear
  • Community Sponsor
  • 6,329 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 02 April 2011 - 11:12 AM

View Postburningsoul, on 02 April 2011 - 09:55 AM, said:

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

#14   FabioW

FabioW
  • Members
  • 22 posts
  • Real Name:Fabian

Posted 30 April 2011 - 06:29 PM

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.

Edited by FabioW, 30 April 2011 - 06:41 PM.


#15   toyicebear

toyicebear
  • Community Sponsor
  • 6,329 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 01 May 2011 - 12:20 AM

Quote

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:

Quote

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

Quote

<div id="header">

Edited by toyicebear, 01 May 2011 - 12:20 AM.


#16   thebodhiman

thebodhiman
  • Members
  • 18 posts
  • Real Name:Stephen Busch

Posted 13 May 2011 - 09:33 PM

View Posttoyicebear, on 03 December 2010 - 02:32 PM, said:

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

#17   toyicebear

toyicebear
  • Community Sponsor
  • 6,329 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 14 May 2011 - 01:12 AM

View Postthebodhiman, on 13 May 2011 - 09:33 PM, said:

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+.

#18   uyvunk

uyvunk
  • Members
  • 1 posts
  • Real Name:Vu

Posted 21 May 2011 - 05:08 PM

View PostFabioW, on 30 April 2011 - 06:29 PM, said:

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


#19   FabioW

FabioW
  • Members
  • 22 posts
  • Real Name:Fabian

Posted 28 May 2011 - 04:06 PM

what I have done on my site is wrinet here:
http://forums.oscommerce.com/topic/367768-giving-231-a-white-background-wrapper/page__p__1582010__hl__white+bars+header__fromsearch__1#entry1582010

#20   kenkja

kenkja
  • Members
  • 249 posts
  • Real Name:Ken Johnson
  • Gender:Male
  • Location:Uk, Yorkshire

Posted 15 June 2011 - 06:14 PM

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
Os-commerce v2.3.3
Security Pro v11
Site Monitor
IP Trap
htaccess Protection
Bad Behaviour Block
Year Make Model
Document Manager
X Sell
Star Product
Modular Front Page
Modular Header Tags
Ultimate SEO Urls Pro