Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Graphical Borders


spooks

Recommended Posts

Hello Spooks,

 

 

I tried the other older version "Combined Graphical Borders Individual Boxes" because when I used yours my site didnt open at all. so I though there is just some conflict on it. so I tired that one.

 

so i though you can help me this..

 

I'm using:

osCommerce 2.2-MS2 w/ STS v1.4

PHP Version 5.1.6

MySQL 5.0.51

 

 

I only added the GRAPHICAL BORDERS part for my website. and I encountered some problems.

1. my column left all went down....

2. I cant get the borders right. the top, bottom, right, and left sides are all missing. only the corners showned.

(I also changed the things in STS's file)

 

Where did I do wrong? please help me >.< I soooo desprete

 

my website: www.baby-glider.com

 

Note: my website is in chinese... sorry for the inconviences......

 

 

Thank you sooo much in advance!!!

 

Best Regards,

Jac

Link to comment
Share on other sites

  • Replies 244
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

This is the support thread for the Easy Graphical Borders version, there were issues with older versions, as there is no support for the other versions one of which you have done, so I`m afraid your on your own

 

Install Easy Graphical Borders with care instead, I would describe the install as EASY

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Hello Spooks,

 

I'm sorry I redo it and tired yours. It is easiler ^^ thanks!

 

But still got one conflict. When ever I wanna do this part with STS template

 

File name : user_functions_classes.php

FIND:

class contentBoxHeading extends tableBox {
   function contentBoxHeading($contents) {
     $this->table_width = '100%';
     $this->table_cellpadding = '0';

     $info_box_contents = array();
     $info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',
                                        'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif')),
                                  array('params' => 'height="14" class="infoBoxHeading" width="100%"',
                                        'text' => $contents[0]['text']),
                                  array('params' => 'height="14" class="infoBoxHeading"',
                                        'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif')));

     $this->tableBox($info_box_contents, true);
   }
 }

REPLACE WITH:

// Graphical Borders
class contentBoxHeading extends tableBox {
   function contentBoxHeading($contents, $head = true) {
	echo mws_boxHeader ($contents[0]['text']);
    }
 }
// Graphical Borders - end modification

 

My New Products (the only one big InfoBOX on the center of the page), the outer box won't be complete and it will push the left boxes down and out.(like the photo link below)

 

http://www.baby-glider.com/images/image/picture.one.bmp

 

what did I missed?

 

website : www.baby-glider.com

 

Thanks in advance again! ^^

 

Regards,

Jac

Link to comment
Share on other sites

Your not saying what you are trying to do!!

 

You are trying to put new_products in styled box, have u folled the instructions, ie

 

replaced:

 

So did you replace the

 

new contentBox($info_box_contents);

with:

 

  mws_boxHeader ();
new noborderBox($info_box_contents);
mws_boxFooter();

 

and have you checked u properly installed all functions, including mws_boxFooter();

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Hello Spooky,

 

sorry!! ><

 

First I'm trying to add you're Easy Graphical Borders version and I got it installed except for the infobox "New product"

I followed your instruction from the Easy Graphical Borders 1.1.txt and also added a few steps for my sts ( like uploading the file to sts' image folder, and replacing the code:

 

class contentBox extends tableBox {

 

on the file user_functions_classes.php.

 

But everytime I wanna replace the code:

 

class infoBoxHeading extends tableBox {

 

on the same file. the infobox "New Product" 's borders is not complete and will squize out the left infoboxes.

 

And I also tried you're advice replacing

 

new contentBox($info_box_contents);

 

on includes/modules/new_product.php, but it is still the same

 

 

 

Now, what I wanna do is to also have the graphic border on my infobox(new products)

 

and how to equal the width of all the infobox on right and left?

 

Thanks in advance again,

 

Regards ,

Jac

Edited by blueangel159
Link to comment
Share on other sites

Assuming you checked everything I said b4!! The u have a mismatch of open/close tables, without the borders u can get away with that error, but not with them.

 

 

Re Width - learn your html, as stated b4, these are tables, so rules apply accordingly

 

HTML Tuition http://www.w3schools.com/html/default.asp

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Perhaps I was a little harsh ealier, as is standard osC all boxes have 100% width such that the width of the boxes will be set according to the column width set in application_top.

 

However you are able to modify this behaviour through the css (see various infobox css classes)

 

Your site has same width boxes for firefox, but it varies in ie, this would not occur on a default osC install, therefore you have changed something, most likely in the css, that is causing the variations u are seeing.

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Hello Spooks,

 

Its OK. Thank you so much for spending time helping me. I solve the problem with the width. It was my STS pressing them back by 145 width but the boxes need at about 170 to expand.

 

Thanks again! and about the infobox of new product. I'm still trying to check whats wrong.

 

regards,

jac

Link to comment
Share on other sites

Hey, is there a way to remove the box header and the space it uses?

 

Because, if I comment new infoBoxHeading the header dissapears, but the space remains.

 

 

where exactly & what file?

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

I tried it with the categories box, when disable, the box heading dissapears, but the space it uses remains

 

borderspace.JPG

 

For a big box is not really a big problem, but Im using a lot of small boxes (they'll has a single link) in each sidebar, so that's a lot of wasted space.

 

Another weird thing, anyone knows why the text boxes lost their css style?

Edited by Hito_kun
Link to comment
Share on other sites

I tried it with the categories box

 

wHAT IS IT???

 

 

As I said where exactly & what file? (Coding changes)

Edited by spooks

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

catalog/includes/boxes/categories.php

 

new infoBoxHeading($info_box_contents, true, false);

 

When commenting the line the heading dissapears, but the space remained.

 

But luckily, i found a way to fix the space issue, I just cropped the upper_left.gif and upper_right.gif from catalog/images/infobox and catalog/images/infobox_main to make it shorter and it worked :D.

 

And, to remove ALL boxes headers, just comment or remove the content of the infoBoxHeading class in catalog/includes/clases/boxes.php

	function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false, $title_link = false) {
  global $mws_headerText, $mws_headerLink, $mws_TxtLink;
  $mws_headerText = $contents[0]['text'];
  $mws_headerLink = $right_arrow;
  $mws_TxtLink = $title_link;
}

Link to comment
Share on other sites

I thoght it might be an image size issue, but without knowing just what you were doing I did`nt like to mention that.

 

Removing the function will remove all headers, not really sure why u would want to do that though?

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

I final issue, I can't change the font size of the boxes since I installed the contribution, I've tried to add or edit the font-size value in practically every class of my stylesheet and no success.

 

./*
 $Id: stylesheet.css 1739 2007-12-20 00:52:16Z hpdl $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

.boxText { font-family: Verdana, Arial, sans-serif; font-size: px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

BODY {
 background: #ffffff;
 color: #000000;
 margin: 0px;
}

A {
 color: #000000;
 text-decoration: none;
}

A:hover {
 color: #CC0000;
 text-decoration: none;
}

A:visited{
  color: #CC0000;
}

FORM {
display: inline;
}

TR.header {
 background: #ffffff;
}

.MainCategory
{
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: black;
FONT-FAMILY: Verdana, Arial
}

TR.headerNavigation {
 background: #bbc3d3;
}

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

A.headerNavigation { 
 color: #FFFFFF; 
}

A.headerNavigation:hover {
 color: #ffffff;
}

TR.headerError {
 background: #ff0000;
}

TD.headerError {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #ff0000;
 color: #ffffff;
 font-weight : bold;
 text-align : center;
}

TR.headerInfo {
 background: #00ff00;
}

TD.headerInfo {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #00ff00;
 color: #ffffff;
 font-weight: bold;
 text-align: center;
}

TR.footer {
 background: #bbc3d3;
}

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

.ltblue_border
{
BORDER-RIGHT: #000099 1px solid;
BORDER-TOP: #828cbf 1px;
PADDING-LEFT: 10px;
BORDER-LEFT: #000099 1px solid;
BORDER-BOTTOM: #828cbf 1px
}
.infoBox {
 background: #b6b7cb;
}

.infoBoxContents {
 background: #d1dfed;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

.infoBoxNotice {
 background: #FF8E90;
}

.infoBoxNoticeContents {
 background: #FFE6E6;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

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

TD.infoBox, SPAN.infoBox {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
 background: #f8f8f9;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
 background: #f8f8f9;
}
/*
TABLE.productListing {
 border: 1px;
 border-style: solid;
 border-color: #b6b7cb;
 border-spacing: 1px;
}*/
/*Easy Graphical Borders*/
TABLE.productListing {
 border: 0px;
 border-style: solid;
 border-color: #b6b7cb;
 border-spacing: 0px;
}
/*
.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #b6b7cb;
 color: #FFFFFF;
 font-weight: bold;
}
*/
/*Easy Graphical Borders*/
.productListing-heading{ 
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
 color: #999999;
 vertical-align: middle;
 white-space: nowrap; 
}
s
TD.productListing-data {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

A.pageResults {
 color: #0000FF;
}

A.pageResults:hover {
 color: #0000FF;
 background: #FFFF33;
}

TD.pageHeading, DIV.pageHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 20px;
 font-weight: bold;
 color: #9a9a9a;
}

TR.subBar {
 background: #f4f7fd;
}

TD.subBar {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #000000;
}

TD.main, P.main {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TD.accountCategory {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 color: #aabbdd;
}

TD.fieldKey {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

TD.fieldValue {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
}

TD.tableHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.newItemInCart {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

TEXTAREA {
 width: 100%;
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

SPAN.greetUser {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #f0a480;
 font-weight: bold;
}

TABLE.formArea {
 background: #f1f9fe;
 border-color: #7b9ebd;
 border-style: solid;
 border-width: 1px;
}

TD.formAreaTitle {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.markProductOutOfStock {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #c76170;
 font-weight: bold;
}

SPAN.productSpecialPrice {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}

SPAN.errorText {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}
/*Product Listing Enhancements*/
.infoBoxProducts {
 text-align: center;
 border: solid 1px #999999; 
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: normal;
 background-color: transparent;
 color: #333333;
 margin-bottom:-8px;
}
.infoBoxProducts a {
 color: #333333;
}
TD.infoBoxGrid {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 border: solid 1px #999999;
}
/* set pos buy/details button on list */
img.buy_now {  
 margin-bottom:10px;
} 
/* set pos buy/details button on thumbnail */
img.thm_buy_now {
 margin-bottom:-3px;
} 
/* set style buy/details seperator thumbnail */
.buy_now {
 font-weight: bold;
font-size: 18px;
color: #999999;
} 
.infoBoxList {
border: ridge 4px #faf0e6;
border-collapse: collapse;
background-color: #fff;
}
.thumbcontent {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color:#666666;
 text-align:center;
}
TD.noborderbox {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

/*Easy Graphical Borders*/
.mws_boxTop	{ background: url('images/infobox/top.gif');
			 font-family: Tahoma;
			 font-size: 11px;
			 text-align : center;
			 color: #999999;
			 font-weight: bold;
			 background-repeat:repeat-x;
			 vertical-align: middle;
			 white-space: nowrap; }
.mws_boxLeft   { background: url('images/infobox/left.gif'); }
.mws_boxRight  { background: url('images/infobox/right.gif'); }
.mws_boxBottom { background: url('images/infobox/bot.gif');
			 font-family: Verdana, Arial, sans-serif;
			 font-size: 11px;
			 text-align : center;
			 vertical-align: middle;
			 white-space: nowrap; }
.mws_boxCenter { background: #d1dfed;
font-family: Verdana, Arial, sans-serif;
}

.mws_boxTop_main	{ background: url('images/infobox_main/top.gif');
			 font-family: Tahoma;
			 font-size: 11px;
			 text-align : center;
			 font-weight: bold;
			 background-repeat:repeat-x;
			 vertical-align: middle;
			 white-space: nowrap; }
.mws_boxLeft_main   { background: url('images/infobox_main/left.gif'); }
.mws_boxRight_main  { background: url('images/infobox_main/right.gif'); }
.mws_boxBottom_main { background: url('images/infobox_main/bot.gif');
			 font-family: Verdana, Arial, sans-serif;
			 font-size: 11px;
			 text-align : center;
			 vertical-align: middle;
			 white-space: nowrap; }
.mws_boxCenter_main { background: #FFFFFF; }
A.mws_boxTop	{ 
	 color: #999999;
			  }

Edited by Hito_kun
Link to comment
Share on other sites

Use tools in firefox to find the css styles applied to any element, then adjust as needed

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

assuming you have installed the web developer plugin and enabled it, select css, or right click & inspect element

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Hi,

 

If it works, it would be awesome as it looks really nice!

 

I've read all 10 pages and tried various things but I still can't get it right.

 

My problem is that all the infoboxes on the right side have gone to the left side so I don't have any infoboxes on the right but left!

 

My css is

 

BODY {

text-align: center;

background: #f5f3eb url('images/bground1c.jpg') repeat-x;

color: #000000;

margin: px;

}

 

 

.fixcenter {

width: 920px;

border: solid; border-width: 0px;

background-image: url('images/bground1b.jpg');

background-repeat:repeat;

color: #000000;

margin: auto;

margin-top: px;

text-align: left;

}

 

I did try the other one Sam pointed out to center the shop then put the code header and footer in an attempt to make this contribution work but failed.

 

I did follow all the instructions correctly. I think it's something to do with my shop's modification but don't really know where to look and what to try...

 

Any advice would be much appreciated!

 

Thank you.

 

Also if you don't mind, can you advise css addon as there seem to be too many for a newbie like me to pick https://addons.mozilla.org/en-US/firefox/co...f2-46b942fa3bdc

 

Thank you again!

Link to comment
Share on other sites

your last text-align: left; should be text-align: center;

 

apart from that issues are usually due to a mismatch of table elements, often you can get away with the errors on the default osC, but with this added the errors cause issues due to the nature of the contrib.

 

validate your site with w3c, make sure u get no errors, then u should be ok

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Thank you for the quick reply!

 

I did change it to text-align: center; but still the same :(

 

I was going to validate the site once I have finished it all. I am nearly there.

 

Will it help me resolve this issue if I validate the site with w3c? I will try it now to see...

 

If you can think of anything else, please advise me.

 

Thank you!

Link to comment
Share on other sites

  • 3 weeks later...
This is a old package but I`m starting this support thread as there aint one.

 

New Install:

 

Easy Graphical Borders

 

The previous install (I havent gone through them all) makes changes to many files & adds loads of extra code to change some of the info box content, adding loads of extra sql queries in the process, this seems rather OTT to me, what you want is the pretty boxes, so this install gives you that with only 3 files to modify! If you want more use an older install.

 

Example page view included in the package.

 

Contribution is at: http://addons.oscommerce.com/info/1702

 

I have just finished installing it in my site www.ellinas.org i had some problems about how to apply this effect to all parts of my multi site (i have a portal section an online free games section a live web camera from athens greece a forum a web hosting and web design section and finally the most important is the e-shop section with Greek but not only products DVDs model kits rare collective items - as you can see yourself i had a lot of things to change) but I believe i have managed everything ok if you can check it for me and tell me if you find a bug in this template, i would be very thankful.

 

Also for everybody's convenience here is the trick code how to apply this style to anywhere that you want!!!

 

add above to whatever you want

   <table border="0" width="100%" cellspacing="0" cellpadding="0">
   <tr>
     	<td><img src="images/infobox/upper_left.gif" border="0" alt="" width="14" height="33" /></td>
     	<td class="mws_boxTop" align="center" valign="middle" width="100%">....</td>
     	<td><img src="images/infobox/upper_right.gif" border="0" alt="" width="14" height="33" /></td>
   </tr>
<tr>
	<td class="mws_boxLeft"></td>
	<td>

here goes what you want to include in this border effect

	 </td>
         <td class="mws_boxRight"></td>
       </tr>
       <tr>
         <td><img src="images/infobox/lower_left.gif" border="0" alt="" width="14" height="12" /></td>
         <td class="mws_boxBottom"></td>
         <td><img src="images/infobox/lower_right.gif" border="0" alt="" width="14" height="12" /></td>
       </tr>
     </table>   

here it ends this effect!

 

I hope i was helpful for all of you - oscommerce community is really helpful to me!!!

 

Live example of this contribution can be seen at www.ellinas.org

Edited by teochris
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...