using css to design osc look : help needed

[phaethon_nyc]

hello, i'd appreciate some help on a little project im trying to get off the ground - to transplant the tables used to structure the design of osc with pure css. i've only just begun, but i've run into some theoretical problems that i want to nip at the bud.

 

i could really benefit from at least a basic list of osc files that are responsible for the design format. for example, to change the look of the front page, i opened /catalog/default.php, found my left column php include at the beginning:

<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>

removed the tables it was nested in, and replaced them with appropriately styled div's with a 3px border. now, the css box with a border is in fact created, but the content created by the php include does not in any way respond to the div it is assigned to.

 

in other words, this snippet of php is supposed to show up *inside* a div that i have styled, but when i load the front page, there are both an *empty* div that i have styled and the information from column_left.php stacked *below* it.

 

can somebody give me a start here? im wondering already if there is more than one file controlling the same elements in the front page, or goshdangit, if im working with the wrong file.

 

phaethon_nyc

[phaethon_nyc]

another way of stating the above:

 

in /catalog/default.php , I:

 

1. released the php include from its table formatting; that worked.

2. put the php include into its new css divs

3. found that there are no mistakes in the css code, but still the php include wont behave as if it is *inside* the div; it acts as if it is supposed to follow it.

[Guest]

When I changed the colums I edited the css, but also adjusted the php files themselves.

 

I found it easiest to do the opposite of what you are trying to do...

I got rid of a lot of the information in the CSS file ie: background colors for tables, and hard coded everything right into the pages.

 

On the default.php I adjusted the table where the <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?> and put the code I wanted in it. It's not as bad as it sounds and it worked.

 

I am not great with PHP and I tried for hours to use just the CSS to make everything look the way I wanted and couldn't accomplish it. Coded directly to the default.php and was done that in about 30 minutes. Now I just have to copy that to the other pages that need the coding and I am good to go.

 

I needed to do more than just change colors and stuff though.

You can see what I mean at

http://work.wendy-james.net

 

It's not a live site but I am working on it for someone.

Hopefully someone who is better at this than I am will reply with a better suggestion or idea. =)

[phaethon_nyc]

i see so let me see if i understand your reply correctly - instead of using more css you are showing me an example of using no css at all? is that what you mean when you say you're doing the opposite of what im trying to do?

 

if that's the case, thanks for you reply, but alas i am decided on using css. if that's not the case - well... i dunno, help me out. looks to me like the stylesheet.css you use is pretty spare.

 

thanks-

[Guest]

Sadie - stop it!

 

By removing the css references you have to go through every file that will display to make your changes work. The site you posted above loses the background on every non-index.php based page - you have to change each one of those too. Then if your client doesn't like it you'll have to change every file again - it defeats the whole pint of css!

 

BTW by removing the breadcrumb trail there is no way to get 'home'.

[Guest]

the php pages are linked threw the site, remember the bread crumb trail, the boxes show up on all pages, default .php here and there, I don't know you mission, but it manybe simpler to look at the cart structure. Maybe the links below can help

[phaethon_nyc]

listen, maybe im unclear. let me give an example of my problem again, in steps, as i understand it.

 

A. default.php controls the look of the left column using tables, like for example, the width.

B. take away the <td>'s and <tr>'s from the php include that ties into column_left.php , save changes, and the left column loses its shape - for example, its width explodes to 100% because it has no assigned width.

C. now - the point here - use css to shape the left column again - and nothing seems to work . in the same place in default.php, i put the php include in a div and assign it to an id set in my stylesheet.

 

this does not work. how come?

[Guest]

lol I told you I was doing the opposite.

 

Just easier for me and took me much less time to do. Sorry to upset you Paul. =) And as I said in my post, I haven't finished. I know they can't get back home and I know many of the sub pages don't look the way they are suposed to.

 

lmao Gunna make a note to not mention how I do things. =)

[josheli]

it's not as easy as what you want it to be, obviously. this is because the table structure is sprinkled throughout various files and functions; the html is hard-coded into the php code.

for instance,

1. default.php wraps /include/column_left.php in a <table>.

2. column_left.php includes various "boxes" files e.g. /boxes/categories.php

3. categories.php itself has it's content inside <tr><td> tags.

4. that content is in turn produced by calls to info_box objects (/classes/boxes.php).

5. and if you look at boxes.php, what is actually created is a table with various settings and css classes

 

so what is required to do what I think you want to do (replace <table>s with CSS) is really a total application architecture redesign. i think this is planned for MS3, and there are several contributions which attempt this sort of templating to various degrees.

[Guest]

Another point is that having converted tables to CSS, you are then locked into that version/snapshot and any upgrade or additional mods is going to involve stripping out the tags all over again.

 

I don't want to poor cold water on your efforts, but rather save you a lot of wasted time - unless this is your hobby!

 

The big bugbear with OSC is the versions - virtually one for every day of the year - every year! At least wait for MS2 (out 'any minute now').

[Guest]

I think you should take a look at this if you have not already:

 

http://www.w3design.ca/osccss/forum/viewforum.php?f=1

 

regards

[rthrash]

Thanks for posting that, Ola.

 

Definitely a contribution to look for in the near future... especially as it seems that MS2 will be out today! :D Here's a preliminary overview:

 

The first step will be to make a template system (adhering to the MS3 workboard entry) so the entire store can be controlled (from a look and feel standpoint) with just a few files instead of 50 or so PHP pages.

 

Once this is done and thoroughly tested, the next step will be to create an alternate set of XHTML templates that are styled by CSS. This will mean creating a new divBox class to write infoboxes as DIVs instead of TABLEs. This will also require a more in depth administration system. A comp of what parts of it may look like can be found at www.vertexwerks.com/osctemp/

 

The ultimate goal would be to have an intuitive way to install custom store designs without touching any PHP or HTML code.

[brad_f]

The casual user of web technology might not even know what CSS are. Or graphic artists who design stores for non-technical people. The latest version of Candy Press came out with what I think is the greatest way to customize their store. They got rid of headers and footers and made it one simple include. You can copy-paste that thing inside of a table in a custom webpage, or whereaver and you're good to go. I hope osCommerce follows suit. If this is going to remain a leading solution you've got to take the power out of the hands of the geeks and make configuration a no-brainer.