Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Fixing Oscommerce Design with CSS


AngFerFer

Recommended Posts

Hi.

 

I am a web designer, and in installing and configurating the OS shop, I have found the problem that you cannot fix the proportions perfectly.

 

I mean I cannot give the same margin between elements and the same proportions to the shop to be a perfect match to the rest of the website.

 

It is a project to install a shop in a website with some years in the Internet.

 

First of all, the width of the content (the website) is 970px, and I have had some problems fixing this.

 

Second, I cannot get a perfect solution for the elements, boxes, buttons and tables to be with the same margins and paddings. You understand, when I fixed the index, I unfixed other parts of the shop along the process. Moreover, there are elements that pop up in certain moments or in the case of error or lack of elements in the shopping process, and I cannot fix them at all.

 

I have been thinking of adding a single css file to each php document to fix it perfectly, but I am not a programmer and I do not know the way. I think it is something about php programming.

 

Even in this case, I think that there might be certain problems.

 

Well, this is the question: how can I get a perfectly fixed Os shop to match a webpage with many design elements?

 

Thanks very much.

Link to comment
Share on other sites

Experienced designers on this website have differing opinions on the 960 system, but if there is one hallmark of the 960 grid system, it is that is it perfectly balanced, and stays perfectly balanced across multiple browsers. All the horizontal measurements are precisely proportional and fit to a single pixel across a 960 width centered on the page. Change a single grid unit or add a single pixel of border or padding without knowing what you are doing or following the 960 grid rules, and the whole design falls apart.

 

You can, however, easily change the width of the 960 page using a 'grid generator' to generate a new 960 stylesheet. Google '960 grid generator' or similar. Here is an excellent example:

 

http://grids dot heroku dot com/

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Hi AngFerFer,

 

Leaving aside that the replies offered by npn2531 and DunWeb are correct, if you are looking for a way to change the margin or padding of elements in OS, I will tell you that there is no need to add additional css files to the already existing in the folders.

 

As describe by npn2531 and DunWeb, you should take a careful look at 960 Grid system, and then change the proportions of the main elements in the template.

 

You have many applications and tools to implement it safely, with Firebug (Firefox extensión) as an excellent option to locate html, css and script elements in the code, and even change them virtually.

 

There are also tools like this one by Spry Soft: http://www.spry-soft.com/grids/

 

I am sure that there must be many post and references about this subject in this same forum, and in the Internet, like this one:

 

http://multimixer.gr...commerce-store/

 

On the other hand, and if you are talking about changing css properties or values in stylesheet.css to format specific elements in php files, I tell you again that you do not need to add new css files, but adding new selectors or tags in the code, or rename the existing ones.

 

I do not know who put the idea of using php to add specific css files to each php file. Just telling you that simplicity is an essential rule when working with css, and it should be the starting point when dealing with structures that include hundreds of elements.

 

Just avoid using more that one css file if you can (I mean stylesheet.css).

 

Regards,

 

José Manuel Rosón Bravo

Link to comment
Share on other sites

Hi everybody,

 

First of all, I think that you 14steve14 are wrong. Consider my case, just for instance: I have a website with 5 years in Internet. For me Oscommerce is a new attachment to my website. The shop. Accesible through a link and a series of banners in my site, but not the site itself.

 

And I think that it is the same case in many other cases. You put a website in the Internet, and sometime after you need a shop in the site to make money out of the resulting traffic.

 

Well, it is my opinion.

 

In any case, I would like to ask for other thing. I thank the answer offered by José Manuel Rosón Bravo and the other members, but (in the case of this member's reply) I would like to format some elements that have no divs or table in the file. Well I am not an expert in PHP and I do not know how it works when forming elements like stockmessageerror and success. You know, when you change things, etc. I would like to give a very special format and different in create_account and certain parts of the checkout process, and I am not sure where to put the css rules and properties.

 

What I mean is that this elements are not in, for example, create_account.php, just a php code.

 

Thanks for any reply.

Link to comment
Share on other sites

The CSS pages are in various locations. The main CSS page, stylesheet.css is on the main catalog level, the stylesheet with the CSS elements for the 960grid is ext/960gs/960_24_col.css. The stylesheet for the jquery elements is ext/jquery/ui/redmond/jquery-ui-1.8.6.css.

 

There are a couple of tools that will help locate specific CSS elements on the pages. Firefox has a powerful set of CSS tools available that will do things like label every element on a page with it's CSS reference, etc. Firefox>tools>web developer>css

 

You can also use this handy tool, CSS Assistant by FWR Media, to locate the pages that specific CSS elements are on:

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

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Hi again AngFerFer,

 

I really don’t understand your point. The other forum members are telling you that everything is in Grid 960, with plenty of tools to locate and modify css elements. And they are right.

 

In any case, the css for messageStackError messageStackWarning and messageStackSuccess are in stylesheet.css, with common properties and values for all the pages in the OS system.

 

If your are looking for a way to singularize one of these elements in a single php file, just put the php code into another selector and set the properties and values in stylesheet.css.

 

Thus, in create_account.php you have:

 

<?php

if ($messageStack->size('account') > 0) {

echo $messageStack->output('account');

}

?>

 

Then, you can put it into a class selector:

 

<div class="name">

<?php

if ($messageStack->size('account') > 0) {

echo $messageStack->output('account');

}

?>

</div>

 

And write the css code for .name in stylesheet.css.

 

The messageStack is then formatted as you want just in this page (create_account.php), with (perhaps) a completely different aspect in other pages in the shop. If this is what you want.

 

What I do not understand is why you should do that. What for?

 

Regards.

 

José Manuel Rosón Bravo

Link to comment
Share on other sites

Hi everybody,

 

First of all, I think that you 14steve14 are wrong. Consider my case, just for instance: I have a website with 5 years in Internet. For me Oscommerce is a new attachment to my website. The shop. Accesible through a link and a series of banners in my site, but not the site itself.

 

And I think that it is the same case in many other cases. You put a website in the Internet, and sometime after you need a shop in the site to make money out of the resulting traffic.

 

Well, it is my opinion.

 

 

Thanks for any reply.

 

You can set up redirects from your old pages to your new pages. Your page layout and design over your clients site will then be consistant, with no need to duplicate content.

 

Still you are more than able to do it whatever way you wish.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

First of all, I think that you 14steve14 are wrong. Consider my case, just for instance: I have a website with 5 years in Internet. For me Oscommerce is a new attachment to my website. The shop. Accesible through a link and a series of banners in my site, but not the site itself.

 

That's just linking to another site or subdomain. Using that logic I could make the NYTimes website an 'attachment' to my site. Now if you could get your old site and the the OSCommerce site to read and write customer information and other data out of the same database, for example create a single login, then you are well on your way.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Yes, perhaps you are right and OS shoud be my front page, but at this moment and in relating to my current project, I prefer to use it just to set a shop. As a section in my website.

 

On the other hand, thank for the information on Firebug and the other tools, I have found them very useful and learnt many things about the internal structure of OS.

 

Thanks very much.

 

Now, I would like to ask again for a way to install a css file for a single php file. I have understood everything about the convenience of putting all the styles in a single css file, but I would like to set a special one for just a few pages in OS. Perhaps you think that it is not necessary, but I would appreciate some help in this case.

Link to comment
Share on other sites

A quick and dirty way to do this is to open the page you wish to have a unique stylesheet and change this:

require(DIR_WS_INCLUDES . 'template_top.php');

to this:

 

require(DIR_WS_INCLUDES . 'template_top.php');
?>
<link rel="stylesheet" type="text/css" href="unique_stylesheet.css" />
<?php

It's quick, but it's dirty because the unique stylesheet will not be located within the <head> tags, but it works, and it is 'below' the other stylesheets so any conflicting CSS will defer, default, to the unique stylesheet . Of course you will need to upload the new stylesheet to the appropriate folder, which in the example above is the same folder as stylesheet.css

 

If when they designed 2.3 they had put the closing </head> on each individual page as I had suggested, it would be a breeze to reference stylesheets, and javascript files and snippets from individual pages like you wish to do.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Well, I think that there is a cleaner way to have a given css file for a single page in OS, with the css file finally located within the head tags.

For instance, to have a css file just for contact_us.php:

 

In:

 

includes/application_top.php.

 

After this:

 

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

 

Insert this:

 

<?php

$url = $_SERVER['REQUEST_URI'];

$base = basename($url);

if($base == "contact_us.php"){

echo '<link rel="stylesheet" type="text/css" href="the-css-file.css"/>';

}

?>

 

And , like as said, you'll have the-css-file.css within the head tags.

 

Obviously, you’ll have to insert this piece of code for each css file to include in your shop.

 

Regards.

 

José Manuel Rosón Bravo

Link to comment
Share on other sites

This is the best forum indeed.

 

I have tried the solution by José Manuel Rosón Bravo, and it is exactly what I was looking for. The way described by npn2531 also works, but not to insert the css in the head, and the best is that you only have to modify the application_top.php, installing some lines of php code for any single page.

 

Thanks very much José Manuel and the other forum members for your help.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...