Basics for design

[lindsayanng]

ok. i feel completely stupid, but i did something to my site where all of the borders are gone, and now i want some of them back. I went to the style sheet to add them, but NOTHING is working..

 

basically MOST of the stuff is calling for

main

 

or

infoboxcontents

 

I tried to add the borders to infoboxcontents, but i got nothing.

[♥toyicebear]

ok. i feel completely stupid, but i did something to my site where all of the borders are gone, and now i want some of them back. I went to the style sheet to add them, but NOTHING is working..

 

basically MOST of the stuff is calling for

main

 

or

infoboxcontents

 

I tried to add the borders to infoboxcontents, but i got nothing.

 

 

The default way of adding/changing borders on the boxes in osCommerce is to change the background color on the infobox class in stylesheet.css

[lindsayanng]

OHHHH yea... i remember now.. I totally forgot that it wasnt actually a border!!! that is why i was soo lost. Thanks for the tip!

[auntdeen]

I'm a newbie - and I am banging my head against the wall ...

 

My client's site is a new one, but as I had not done an ecommerce site before, she bought the database & oscommerce setup from a competitor. His guy installed all. So since Sunday I've been working around the clock to change all the site info to hers, and change the design.

 

Except for a few last tweaks & tests, it's ready, EXCEPT that no matter what I've tried, I can't center the site within the container. I have spent hours here, and tried many of the fixes, but something is just not right. Please see here at trollbeadisland.com. The look should be like jennifersjewelrybi.com. The site structure was from trollbeadking.com - you can see that I've come a long way, but still need to overcome my last hurdles.

 

It looks worse in Firefox than IE. And each page shows up differently.

 

The stylesheet code is:

BODY {

margin-top: 0;

margin-right:auto;

margin-bottom:0px;

margin-left:auto;

text-align:center;

width: 800px;

height: auto;

position: relative;

background: #e9f4fe;

}

 

#content {

width: 778px;

margin: auto;

border: 1px dotted #0262d2;

text-align:center;

background: #ffffff;

}

I have added the div to the header & closed it in the footer.

 

The index reads:

<!-- body //-->

<table border="0" width="778" cellspacing="0" cellpadding="0" align="center">

<tr>

<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="0" valign="top">

 

I would really appreciate any advice on what else I need to change (and where to find it - I'm starting to get the hang of the structure, but still end up looking at the wrong file first...)

 

Thanks!!!

[♥toyicebear]

I would really appreciate any advice on what else I need to change (and where to find it - I'm starting to get the hang of the structure, but still end up looking at the wrong file first...)

 

Thanks!!!

 

 

Your columns and center content have to be sized so that they can fit in the total width you have set for your container.

 

If one or more of the parts are to wide , they will stretch the container and you get design displacements.

 

 

Also your css body tag is unnecessary "complicated" and is probably causing you some problems. You can download and look at the same 2 tags in the basic design pack to see a simpler and working example.

[auntdeen]

Your columns and center content have to be sized so that they can fit in the total width you have set for your container.

 

If one or more of the parts are to wide , they will stretch the container and you get design displacements.

 

 

Also your css body tag is unnecessary "complicated" and is probably causing you some problems. You can download and look at the same 2 tags in the basic design pack to see a simpler and working example.

 

Thanks for your response!

 

The columns are sized to 150px, which should leave a center of 500px. I somehow can't "see" which table is the center - the ones that I've tested to change from 100% to 500px haven't made any difference. The java pix width is 450, padding 12 - I'm just really puzzled, no content should be pushing it out. And the offcenteredness is different on the different types of pages, too. It almost seems like there's an extra cell or two in there.

 

The css body tag is definitely kludgey, but I "inherited" it. I downloaded the design packs a day or so ago, have been loathe to test them in case there's something else lurking in this modified site that I'm unaware of. I will try that.

 

Any advice on which table to modify for the center would be much appreciated.

[♥toyicebear]

You site width is set to 778

 

With side bars of 150px and adding in the 3 px padding , you will get a max with of 466 px and that is not calculating in any padding used for the center part.

[auntdeen]

You site width is set to 778

 

With side bars of 150px and adding in the 3 px padding , you will get a max with of 466 px and that is not calculating in any padding used for the center part.

 

I cleaned up the stylesheet, that helped. I still have two issues that I've spent 12 hours on today, that I still can't resolve. I've looked everywhere for the 3px padding/spacing , and can't find it. Really, everywhere. I can see it in the code when I download the front page using Jsss, but I can't find it. Not stylesheet, index, header, footer - or a few dozen other places that I've looked!

 

I also can't figure out where to change the body cell of the index.php to stop blowing out of the container. Pages that don't use the index, and even the category pages that do use the index are fine (after I fix the above issue). It's just the home page. I even tried putting breaks in the text!

 

I know that I need to resize the pix for the javascript on the front page, but even at 450px there's enough room to have that right sidebar pulled mostly in (the table cell measures at 530px or so). There's no reason that I can see for the sidebar to be blown out so far.

 

I would appreciate any suggestions on these two issues. Thank you so much for your help!

[auntdeen]

I forgot to put link - http://www.trollbeadisland.com - also to say that the stupid 3px padding is okay in IE (shows around inside container evenly at least) but really bad in Firefox, it leans over the edge of border on right side.

[♥toyicebear]

There is no point in posting anything more in regards to this issue in this tread.

 

Your problem is simply size of images, size of content and side bar sizes vs total site width...

 

So its just a mather of adjusting those to work together.

[auntdeen]

There is no point in posting anything more in regards to this issue in this tread.

 

Your problem is simply size of images, size of content and side bar sizes vs total site width...

 

So its just a mather of adjusting those to work together.

 

Thank you so very much for your help. I specifically choose this thread because after hours of trying to find the answers to my questions, you seemed to be the most patient and knowledgeable person to ask. Apparently I was wrong.

 

It's just not simple to me to have inherited a modified site, spent over 80 hours in the past 6 days with zero prior knowledge of Osc, PHP & mySQL. I've asked for two things - point me in a specific direction to find the cause of a center (body) cell blowout, and where a 3px padding could be hiding if not in the stylesheet, header, footer or index.

 

There is no reason to yell at me for polluting your thread. Obviously my problems are a matter of adjusting sizes, which I would happily do if I could find them.

 

Have a nice day.

[♥toyicebear]

Thank you so very much for your help. I specifically choose this thread because after hours of trying to find the answers to my questions, you seemed to be the most patient and knowledgeable person to ask. Apparently I was wrong.

 

It's just not simple to me to have inherited a modified site, spent over 80 hours in the past 6 days with zero prior knowledge of Osc, PHP & mySQL. I've asked for two things - point me in a specific direction to find the cause of a center (body) cell blowout, and where a 3px padding could be hiding if not in the stylesheet, header, footer or index.

 

There is no reason to yell at me for polluting your thread. Obviously my problems are a matter of adjusting sizes, which I would happily do if I could find them.

 

Have a nice day.

 

 

Read this...

[Jacob.R]

5. Remove default oscommerce gifs, to do that use this contrib:

 

When I replace the images with blank gifs, I still get a width over lap on my centered site? what can I do? can I just leave out the images altogether?

 

	<td align="right" valign="bottom"><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_account1.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>  <a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart1.gif', HEADER_TITLE_CART_CONTENTS) . '</a>  <a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?>  </td>

 

Thanks

 

Edit

 

Ok, just read this post on how do I remove.. and it says just delete the above code.

 

Sorry.

 

This post help me loads :rolleyes:

[superbogel]

i am trying to customise the design :D i will give it a try thx for the useful topic :D

[captmorgan]

Just to thank you for this most excellent and useful thread :)

[Jacob.R]

7. Now you are ready to change colors and/or text formating for your web shop, this is done in a file called stylesheet.css which is located in your main folder.

 

For instance if you want to change the color of the infobox header, this is the code which need changing:

 

CODE

TD.infoBoxHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

font-weight: bold;

background: #bbc3d3;

color: #ffffff;

}

 

 

Changed to a red info box header, it would look like this:

 

CODE

TD.infoBoxHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

font-weight: bold;

background: #990000;

color: #ffffff;

}

 

 

These are universal changes and will affect all the related parts of your web shop

 

Now feel free to play with the colors and/or fonts to your own liking........

 

Please Please...

 

How do I create unique styles for the boxes? say if I want one to be red the other blue.. then one to sit further up/down the page than the other etc.?

[bigbear69]

Thanks alot everybody. I'm new here and I chose Os commerce because of all the help and the great community answers. I have one question. How do I get into my files where the code is so I can do the stuff you guys are showing in this thread. I can do stuff in the admin page but can't seem to find the actual code. Thanks alot for the help.

[captmorgan]

Thanks alot everybody. I'm new here and I chose Os commerce because of all the help and the great community answers. I have one question. How do I get into my files where the code is so I can do the stuff you guys are showing in this thread. I can do stuff in the admin page but can't seem to find the actual code. Thanks alot for the help.

 

The way I do it is by using Dreamweaver or JEdit. You have to connect to your server via the FTP connection, then you can download and open, and then edit the files, and re-upload them for preview.

 

JEdit is Java open source and is available from here. You may need to install the FTP module, it is not difficult.

 

If you don't know you FTP access details, check you original welcome email from your ISP, or post a ticket with their support.

 

Make sure that you backup your shop before you change anything. You may be able to do this in your server control panel.

 

The files you want to edit are clearly refered to in the previous posts, remember you may have to change all the languages you are using. Hopefully this is familiar to you, as to change the front page text seems to require the ability to do the above.

 

That is the bear bones of it. I hope that helps.

[Jacob.R]

7. Now you are ready to change colors and/or text formating for your web shop, this is done in a file called stylesheet.css which is located in your main folder.

 

For instance if you want to change the color of the infobox header, this is the code which need changing:

 

CODE

TD.infoBoxHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

font-weight: bold;

background: #bbc3d3;

color: #ffffff;

}

 

 

Changed to a red info box header, it would look like this:

 

CODE

TD.infoBoxHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

font-weight: bold;

background: #990000;

color: #ffffff;

}

 

 

These are universal changes and will affect all the related parts of your web shop

 

Now feel free to play with the colors and/or fonts to your own liking........

 

Please Please...

 

How do I create unique styles for the boxes? say if I want one to be red the other blue.. then one to sit further up/down the page than the other etc.?

 

Will someone please, please, please, reply to my question?? if only to say "hey moron it's easy, look here!" or what about "Sorry, I don't know how to do it"?

 

:blink:

[captmorgan]

Will someone please, please, please, reply to my question?? if only to say "hey moron it's easy, look here!" or what about "Sorry, I don't know how to do it"?

 

:blink:

 

I would love to be able to help, but I have yet to get a grip of how the templates work. In principle if there is only one style for as seen below

 

TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #990000;
color: #ffffff;
}

 

Then you are stuck with all the 'infoBoxHeadings' being one colour or another. You're not being stupid. In order for there to be infoboxes with different colours you will need to create another style for example.

 

TD.infoBoxHeadingNew {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #000000;
color: #ff0000;
}

 

Of course this is not going to change anything, as that style does not exist in your template design. So the next thing to do is find your template design, search for all the instances of "infoBoxHeading" in the code, and change one to "infoBoxHeadingNew" upload the edited styslesheet and template to the server, refresh your page and see which box has changed colour. After that experiment untill you have changed the boxes you want.

 

Adjust your stylesheet until you are happy with the colour, and hopefully job done.

 

Please note: This is guess work on my part, I don't have time to test it.

 

That deals with the colours, as far as position of the boxes is concerned, a whole different ball game. That bit of code I have posted is only relevant to one cell of a 'table' The table is the thing you will want to move, you will need to check the table tag, see what style sheet is controlling it, look in the style sheet and see if the position is dictated there, if so... play with it! If the table has no position in the style, you may find that the table is contained in a 'div' tag, which will be controled for position by a style, (that's how I would code it), look in the style sheet and play with the position.

 

Personally I wouldn't, why run before you can walk?

 

I hope that helps. ;)

[Jacob.R]

Thanks Morgan

 

Ok, look for all the instances of "infoBoxHeading" Yes, thank you that's a good start.

[auntdeen]

Read this...

Well thank you so much for directing me to a very good website with some great info.

 

However, it's unfortunate that you jumped to the conclusion that I'm a help vampire. I'm completely self taught, and the last question that I asked in any coding forum was about 8 years ago.

 

Had you assumed that I was honest about the amount of time I had already put into the problems, and that I had already spent hours searching the forums before I asked, you might have realized that the key words were that I had inherited a modified site.

 

It turns out that the side blowout was in the javascript itself on the home page. Not any part of the OsC code and not something that I installed.

 

But the 2-3px padding that made everything on the home page lopsided was not even that obvious. Because the site had been modified, someone had stripped out a crucial cell-padding=0 & cell-margin=0. Hard for me to find something that didn't exist - but I finally did. Apparently the software adds by default a padding/margin unless set to zero, but somehow I was unable to find that information through searching (current forum topic guide to searching). Perhaps if I had installed the original site myself, I would have known that - but I didn't install it.

 

Had you simply mentioned that because the site was modified, I should also be looking for things that could be missing instead of assuming that I didn't bother thinking about it first, it would have been a lot more productive for both of us and for anyone else who may try to search the forum with the same problem.

 

Perhaps next time you may need to think a bit more before jumping to the conclusion that someone is a help vampire. And you may want to consider that inheriting a modified site has challenges that are not the ho-hum normal questions that you are so obviously bored with.

[Guest]

1. make the new about_us.php page and the coresponding language about_us.php and add them to your web server.

 

2. add the defines to the includes/filnames.php

define('FILENAME_ABOUT_US', 'about_us.php');

 

3. add link defines to includes/languages/english.php

 

define('BOX_INFORMATION_ABOUT_US', 'About Us');

 

4. Add the link to /includes/boxes/information.php

 

 . '<a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a><br>' .
. '<a href="' . tep_href_link(FILENAME_ABOUT_US) . '">' . BOX_INFORMATION_ABOUT_US . '</a><br>' .
'<a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a>');

 

I have to admit, this forum is a plethera of information. I have learned so much and am very, very grateful.

 

I did do the above steps and with what I have been through in the last 3 weeks, I sincerly thought I would be able to manage the very simple steps. Unfortunately, I didn't succeed with this one.

 

I'm not sure where I went wrong. After completing the steps, refreshing my shop, the new About Us is not listed in the category Information ... or anywhere else on the page (LOL). If it helps at all, I am still unsure what is called from where, so all the above steps were made for the httpdocs/shop ... then copied from host FTP to httpsdocs/shop. A refresh was made after the original attempt and again after the copy.

 

Might someone have a suggestion? Quite honestly, after looking over this thread, I didn't read every page of the total 67, but did read more than half of them. Thank you, I appreciate your time.

 

My site is www.watsonlanding.com/shop

[♥toyicebear]

I have to admit, this forum is a plethera of information. I have learned so much and am very, very grateful.

 

I did do the above steps and with what I have been through in the last 3 weeks, I sincerly thought I would be able to manage the very simple steps. Unfortunately, I didn't succeed with this one.

 

I'm not sure where I went wrong. After completing the steps, refreshing my shop, the new About Us is not listed in the category Information ... or anywhere else on the page (LOL). If it helps at all, I am still unsure what is called from where, so all the above steps were made for the httpdocs/shop ... then copied from host FTP to httpsdocs/shop. A refresh was made after the original attempt and again after the copy.

 

Might someone have a suggestion? Quite honestly, after looking over this thread, I didn't read every page of the total 67, but did read more than half of them. Thank you, I appreciate your time.

 

My site is www.watsonlanding.com/shop

 

The link text now showes in your info box...

 

but the text defines for it seems to be missing: they should be in this file: includes/languages/english.php

 

define('BOX_INFORMATION_ABOUT_US', 'About Us');

 

 

Also something is not correctly done in your new about_us.php file

 

I suggest you just make a copy of privacy.php and rename it about_us.php

 

This goes both for the main file in your /shop/ folder

 

and the corresponding language file in

 

includes/languages/english/

[Guest]

The link text now showes in your info box...

 

but the text defines for it seems to be missing: they should be in this file: includes/languages/english.php

 

 

 

 

Also something is not correctly done in your new about_us.php file

 

I suggest you just make a copy of privacy.php and rename it about_us.php

 

This goes both for the main file in your /shop/ folder

 

and the corresponding language file in

 

includes/languages/english/

 

Thank you toyicebear;

 

I was in there playing around again last night, suddenly the new line appeared and I thought I was doing ok ... until I checked the link. LOL.

 

I went to make sure that all was well, and was greatful for having an index.php.bak, as just re-entering the define field took out my index.php again. Good thing I am not as fickle as that page, I will keep trying.

 

Thanks for the tip on the copy of the privacy.php, I will re-do the page and try that again ...