HOWTO change design and CSS

[roofyroo]

Is there a HOWTO guide for OSCommerce for customising the design and CSS?

 

I know CSS but cannot find a comprehensive guide on here.

 

If someone can list out all the relevant files and folders that would be great!

 

Thanks

[roofyroo]

Also are most people using or have upgraded to v3? New to OSC so wondering if it's best to go with the latest version if it's safe and secure.

 

Thanks

[♥toyicebear]

V3 is only in Alpha stage and far from ready and should not be used in a live shop unless your are a competent PHP coder.

 

The current 2.2 is the one to go for, you can find a design tutorial by clicking on basics for osc design in my signature.

[Collines]

You will need to know more about tables, table rows and table cells if you want to change the layout of version 2.2

[npn2531]

Or, if you are good at CSS and dislike tables, you can use the contribution that converts the OSCommerce table structure to CSS:

 

http://addons.oscommerce.com/info/7263

[roofyroo]

I'm fairly good with CSS.

 

I was mainly after a guide or documentation on starting to use OSC and the design side of things - what CSS controls what, where images and layout are controlled in the code etc?

[npn2531]

There is sadly no documentation for this. However one thin that may be helpful is the Firefox Web Developer Toolbar that you can download for free. It will display a webpage with the CSS selectors as visible labels. It will do a lots of other labeling as well. Then you can see what's where.

[roofyroo]

Or, if you are good at CSS and dislike tables, you can use the contribution that converts the OSCommerce table structure to CSS:

 

http://addons.oscommerce.com/info/7263

 

Can you confirm the installation of this add-on?

 

There is no includes/application_top.php file in this download. If I check the current original files there is a admin/includes/application_top.php.

 

Just want to make sure everything is correct before I mess things up and have to start all over again.

 

Thanks

[npn2531]

No, there is no application_top.php in this contribution. You only replace the files included in the contribution and make a small change in the existing application_top.php. That change should be in the instructions. Please note that this contribution is designed for a fresh install with no contributions installed, and will most likely break a modified site.

 

However, I do have this set up with lots of contributions installed on a demo site.

[Guest]

Please note that this contribution is designed for a fresh install with no contributions installed, and will most likely break a modified site.

Unless I'm missing something, that statement is misleading. I took a look at a couple of the files from that contrib and it appears that some parts of header tags seo and cross sell contribs are in there. Are the full installs in there for these contribs?

[roofyroo]

No, there is no application_top.php in this contribution. You only replace the files included in the contribution and make a small change in the existing application_top.php. That change should be in the instructions. Please note that this contribution is designed for a fresh install with no contributions installed, and will most likely break a modified site.

 

However, I do have this set up with lots of contributions installed on a demo site.

 

I was literally replacing the entire add-on contents with the live files, including the folders. Might be worth adding a note that each file within folders need replacing individually.

 

It it now working as I setup a new installation. Will give the Firefox Web Dev ago too so can easily identify the CSS.

 

Thanks

[npn2531]

Unless I'm missing something, that statement is misleading. I took a look at a couple of the files from that contrib and it appears that some parts of header tags seo and cross sell contribs are in there. Are the full installs in there for these contribs?

 

You may find some of the contribution snippets in there. I thought all that had been cleaned out. Post the pages where you found them and I will fix it.

 

I do have a copy of this with full installs of contributions, like Header Tags SEO, CCGV and others, but that would be impractical to post as a contribution, as it would require posting virtually the entire cart plus database.

[npn2531]

I was literally replacing the entire add-on contents with the live files, including the folders. Might be worth adding a note that each file within folders need replacing individually.

 

It it now working as I setup a new installation. Will give the Firefox Web Dev ago too so can easily identify the CSS.

 

Thanks

 

Good point. Documentation can always be improved.

[roofyroo]

Does anyone know if you can change ALL the background box title bar colours - the light grey under the white text?

 

Also where PHP references database text (i.e. footer) can this be edited in the admin panel? I don't see it there so assume it would be direct changes in the DB only?

 

Thanks

[Guest]

You may find some of the contribution snippets in there. I thought all that had been cleaned out. Post the pages where you found them and I will fix it.

I have no intrest in this contrib. I was pointing out the misleading statement. Instead of waiting for someone else to ppint out the snippets of code that do not belong, maybe you should go through your contrib and get them out.

[npn2531]

I have no intrest in this contrib. I was pointing out the misleading statement. Instead of waiting for someone else to ppint out the snippets of code that do not belong, maybe you should go through your contrib and get them out.

Why in the world would you spend time looking through a contribution you have no interest in? Are you the 'contribution police' or something?

[roofyroo]

Does anyone know if you can change ALL the background box title bar colours - the light grey under the white text?

 

Also where PHP references database text (i.e. footer) can this be edited in the admin panel? I don't see it there so assume it would be direct changes in the DB only?

 

Thanks

 

Additionally can the boxes be turned on/off easily? I don't see it in the admin section so do you have to remove the sections from the PHP code?

[npn2531]

Does anyone know if you can change ALL the background box title bar colours - the light grey under the white text?

 

Also where PHP references database text (i.e. footer) can this be edited in the admin panel? I don't see it there so assume it would be direct changes in the DB only?

Thanks

 

 

 

 

 

I'm not sure what you mean about the PHP references. However, each catalog page has a reference to includes/template_top.php and to includes/template_bottom.php. Look in those two files to find the layout for the header, footer and columns.

 

For the infoboxes, look at these CSS selectors in the stylesheet:

 

/* INFOBOXES/////////////////////////////////////////////////////////////////////  *//* INFOBOXES////////////////////  */

.categorylisting{
text-align: center;
}

.infobox{
background: #f8f8f9;   /*#f8f8f9 light grey*/  
border:1px solid #bbc3d3; /*#bbc3d3 dark grey  */
margin:0px 0px 0px 0px;
padding:5px; 
}

/* in use?   */
.infoboxcontents, .infoBoxContents, span.infoboxcontents{
background: #f8f8f9;   /*light grey*/
border:1px solid #f8f8f9;   /*light grey*/
font-family: Verdana, Arial, sans-serif;
font-size: 10px; 
padding-bottom:0px;
}

.infoboxheading{   
 background-color: transparent;  /* dark grey #bbc3d3  */  
 padding:0px 0px 0px 0px;
 margin:10px 0px 0px 0px;
 text-align: right;
}
/* tags holding image in infobox-header  */
.shoppingcart, .specials, .reviews, .notifications{
/*
float:left;
padding-right:5px;
margin-top:0px;
*/
}