Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Removing infobox rounded corners


Emmett

Recommended Posts

I followed a post about making changes to the rounded corners.

I want to remove as many images as possible to reduce page load time.

 

I commented out the appropriate lines of code in classes/boxes.php and all works fine except for some reason the <tr><td> New Products For ... cell still has the left rounded corner image in it.

 

I did not comment out this code:

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);

}

}

So perhaps this is the reason. This block of code is a bit too complicated for me to figure out how to comment out the part I don't want to use.

The New Products For month cell has no right rounded corner image so it makes me wonder if the above code is for that cell or not.

 

Is there another way to prevent these images from displaying.

It seems to me that the html code would be easier to change but alas I have been unable to find that because I don't really know what I'm looking for.

Since I do not know a lot about code it is hard to find things sometimes.

Getting better at it every day though. :)

 

Thank You

Emmett

Link to comment
Share on other sites

OSC uses an image even for all the squared corners (/images/infobox/corner_right_left.gif) in your infoboxes as well as the "New Products For..." box, probably for indenting the titles and arrows.

 

This prevents the text/arrows from showing right next to the border of the table as both cellspacing and cellpadding are set to 0.

 

But if you still want to get rid of ALL the cornered images (/images/infobox/corner_right_left.gif, /images/infobox/corner_left.gif, /images/infobox/corner_right.gif), you can try the following:

 

Modify the if/else statements in the

class infoBoxHeading extends tableBox { block as follows:

if ($left_corner == true) {

       // $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif');

       $left_corner = '';

     } else {

       // $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');

       $left_corner = '';

     }

     if ($right_arrow == true) {

       $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';

     } else {

       $right_arrow = '';

     }

     if ($right_corner == true) {

       // $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');

       $right_corner = $right_arrow;

     } else {

       // $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');

       $right_corner = $right_arrow;

     }

 

I have just commented out the values of $left_corner and $right_corner and set them to blank, so no image is assigned. It'd be wise to add a space ( ) for indentation purposes, however.

-----

To remove images from the "New Products For..." box, we've to modify the block of code a little that you mentioned above:

 

Find:

$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')));

 

Replace it with:

$info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',

                                        'text' => ''),

                                  array('params' => 'height="14" class="infoBoxHeading" width="100%"',

                                        'text' => $contents[0]['text']),

                                  array('params' => 'height="14" class="infoBoxHeading"',

                                        'text' => ''));

 

Again, you can add a   for indenting the title.

 

I hope this is helpful. :)

Link to comment
Share on other sites

After completing all edits suggested by H20 all works exactly as I wanted.

 

Note: There is no need to use the   for spacing.

 

Go to the stylesheet.css and make a change to this class:

 

TD.infoBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #bbc3d3;

color: #cc0000;

text-indent: 4px;

}

 

Just add text-indent: 4px; which adds 4 pixels to the left of the text that follows which in this case is the infoboxheading.

 

Of course 4px is my choice, you can put as much space there as you want.

 

Take Care

Emmett

Link to comment
Share on other sites

text-indent: 4px;

Hi Emmet,

 

I see you use text-indent i.s.o. padding

padding-left: 4px;

 

I never thought about text-indent, but it might be a great idea for some cases. Because padding added to a box is treated differently by different browser (the total boxsize= boxsize+padding+border or total boxsize = boxsize: padding and borders within the box)

 

Is that why you use text-indent, and is it supported well by different (old, buggy) browsers?

Link to comment
Share on other sites

Emmett:

- Good point. Using CSS to add indents is more efficient.

 

xecutech:

- All the changes are done in the same file (classes/boxes.php), but different blocks of codes.

 

Instructions for modifying the "New product for the month" table are in the second part of my post above.

Link to comment
Share on other sites

  • 1 year later...

Hey

I know this is an old post, but I followed the directions in the first part... it took away my corners, but added all of these random rows of "n"s and made my page really long and strange. Any suggestions for fixing it?

 

Thanks!

Link to comment
Share on other sites

  • 9 months later...
  • 1 year later...
  • 1 month later...
includes/Boxes/categories.php and change 'true' to 'false' on about line 68

 

 

 

I looked for this and found that the setting is already set to new infoBoxHeading($info_box_contents, false, false); I still have that number 1 but it is located on the right side of the shopping cart box. So far this thread has been excellent help. thanks to everyone for thier input

Link to comment
Share on other sites

I looked for this and found that the setting is already set to new infoBoxHeading($info_box_contents, false, false); I still have that number 1 but it is located on the right side of the shopping cart box. So far this thread has been excellent help. thanks to everyone for thier input

 

 

Nevermind guys.. I was trying to edit the actual code without copy and paste. I may have left out a change. I tried to copy and paste the entire change posted above and it worked for me thanks/// :-"

Link to comment
Share on other sites

  • 3 months later...
  • 1 month later...

Hi there.

 

I just used the guide. It DId get rid of the rounded corners but made some other wonky changes.

 

For example: "Categories" has no rounded edges, but underneath is five line white in color, with the letter "n" on the left.

 

Under that, are 10 or so lines in the same color as "categories". again with the letter "n" on the left of each line.

 

This repeats for all the info boxes.

 

Help!!

 

Selena

Link to comment
Share on other sites

I just used the guide. It DId get rid of the rounded corners but made some other wonky changes.

 

For example: "Categories" has no rounded edges, but underneath is five line white in color, with the letter "n" on the left.

I assume you used the filemanager in the admin to make those changes? Bad move. Always download the file to your computer. Use a text editor to make the changes. Test it on your own computer where you have a backup of your store and database to test things (you do use that do you?) and then ftp it back to the server. Never use the filemanager. Better even delete that file or rename it to a .txt file.

 

The n's you see are from line endings (backslash n) with the backslash removed, so the n remains.

Link to comment
Share on other sites

Yes, I was using the file manager. I'm so new and so lost at this.

 

Thanks so much. For your helpI

I appreciate your help greatly.

 

Selena

had just found this and it worked.

 

I got it!!!!

 

The dude that posted that thread made a typo. I tried a backward slash (\) instead of a forward slash (/) in front of each n and voila, this solved the problem.

 

Example:

 

$tableBox_string .= '>' . "n";

 

change to

 

$tableBox_string .= '>' . "\n";

 

Do this for each occurance of the "n".

 

What I noticed is that the backward slash disappears when you reopen the file after saving, but the problem is solved.

 

Weird PHP bug......

 

I hope this will help other osCommerce users

 

This post has been edited by illufox: Jul 27 2007, 12:21 PM

Link to comment
Share on other sites

  • 5 months later...

you can always do what I did... I always try for simple...

if you are using the default cart layout (not a custom skin)

 

 

the curved corners are just 11x14 pixel graphics

I customized all the colors in my cart, logo etc... to match into my main site

 

i just made new ones to match the colors i changed the cart to

the uploaded them and overwrote the existing ones

done

 

there are 4 different images and they are located in:

catalog/images/infobox/

 

since they are images you can also use different colors to add a bit of contrast too if you like

 

 

btw.. if your having a hard time matching your colors download pixie

its a webmaster MUST HAVE its free easy and insanely handy

 

www.nattyware.com/pixie.html

or if they ever move it

just google "pixie color picker"

Link to comment
Share on other sites

  • 2 months later...
Can someone please advice me. After removing all the corners. Instead of gifs I have number "1" displayed in "Categories" and "Shopping cart" infoboxes. Can someone help removing it?

 

 

605622539ef6.jpg

 

5e59846e74a5.jpg

So it begs the question, how did you remove the rounded corners?

Link to comment
Share on other sites

I did it as described here in the Post #2 of this thread.

 

Plus I added "text-indent: 4px;" to stylesheet.css as described here below.

post 11 has a solution.

Link to comment
Share on other sites

  • 1 month later...
you can always do what I did... I always try for simple...

if you are using the default cart layout (not a custom skin)

 

 

the curved corners are just 11x14 pixel graphics

I customized all the colors in my cart, logo etc... to match into my main site

 

i just made new ones to match the colors i changed the cart to

the uploaded them and overwrote the existing ones

done

 

there are 4 different images and they are located in:

catalog/images/infobox/

 

since they are images you can also use different colors to add a bit of contrast too if you like

 

 

btw.. if your having a hard time matching your colors download pixie

its a webmaster MUST HAVE its free easy and insanely handy

 

www.nattyware.com/pixie.html

or if they ever move it

just google "pixie color picker"

 

 

Ahhh, if more thought on the "simple plane"...LOL After finding out that the corners are .gif files, I thought that I should just make a box of my desired color and replace it and low and behold, there your idea was. Sooo much easier than hacking all that code, plus, if you wanted to, you could make it a different color or a VERY small simple image. GREAT MINDS THINK ALIKE..LOL. Sometimes people make things harder than they have to be. Thanks!!!!!!!!!!

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...