timmle Posted July 6, 2008 Share Posted July 6, 2008 I'm trying to put a background image behind the text in the infobox headers. Of course each infobox has certain images to corner off the boxes etc, but after changing the colour in stylesheet of the infobox header to the same as the background colour of my site i am still left with the corner_left image in place. (I have completely removed column_right so corner_right is not a problem) I would like to know, if anybody can help, how to 1) remove completely the corner image on the left (not just colour it the same as the background in photoshop) and then 2) how to place a background image behind the infobox title. I have tried - background-image: url (location of the image); - in the stylesheet but that did not work atall. Please could you help with this, anybody? Link to comment Share on other sites More sharing options...
Puckle Posted July 6, 2008 Share Posted July 6, 2008 I want to do the exact same thing... by the by, how did you remove the entire right column? I've removed all of the boxes in it, but the area where it's supposed to go is still there. Link to comment Share on other sites More sharing options...
Guest Posted July 6, 2008 Share Posted July 6, 2008 I'm trying to put a background image behind the text in the infobox headers. Of course each infobox has certain images to corner off the boxes etc, but after changing the colour in stylesheet of the infobox header to the same as the background colour of my site i am still left with the corner_left image in place. (I have completely removed column_right so corner_right is not a problem) I would like to know, if anybody can help, how to 1) remove completely the corner image on the left (not just colour it the same as the background in photoshop) and then 2) how to place a background image behind the infobox title. I have tried - background-image: url (location of the image); - in the stylesheet but that did not work atall. Please could you help with this, anybody? The info box corners are images. You can turn them off in the info boxes. in a line like new infoBoxHeading($info_box_contents, true, false); change to true to false like new infoBoxHeading($info_box_contents, false, false); Link to comment Share on other sites More sharing options...
germ Posted July 6, 2008 Share Posted July 6, 2008 I've removed all of the boxes in it, but the area where it's supposed to go is still there To remove the whole right column and free up that space, in your /catalog/index.php find this code: <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2"> <!-- right_navigation //--> <?php require(DIR_WS_INCLUDES . 'column_right.php'); ?> <!-- right_navigation_eof //--> </table></td> Replace it with: <?php if ( false ) { ?> <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2"> <!-- right_navigation //--> <?php require(DIR_WS_INCLUDES . 'column_right.php'); ?> <!-- right_navigation_eof //--> </table></td> <?php } ?> Unless you remove or "comment out" the code for the <td><table>...</table></td> osC uses for the right column, what you end up with is a blank table in the HTML. :blush: It's always a good idea to backup any file before making any edits. If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there > Link to comment Share on other sites More sharing options...
germ Posted July 6, 2008 Share Posted July 6, 2008 And this thread may prove useful in removing the image: Click Me If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there > Link to comment Share on other sites More sharing options...
timmle Posted July 6, 2008 Author Share Posted July 6, 2008 Thankyou for answering my question, now i have removed both the corner images by replacing both corner_right_left line and corner_left line with just - $left_corner = ''; . Now how would i go about putting an image i have created behind the infobox title. It's going to be about 20pixels in height and about 100 in width. What code do i need to insert in that same file (includes/classes/boxes.php), and where do i place it so i can have this as the background image? Thankyou again. Link to comment Share on other sites More sharing options...
germ Posted July 6, 2008 Share Posted July 6, 2008 Actually, I'd try it in the stylesheet. In your /catalog/stylesheet.css find this code: TD.infoBoxHeading { font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; background: #bbc3d3; color: #ffffff; } Change it to something like this: TD.infoBoxHeading { font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; background: #bbc3d3; background-image: url(images/image.gif); background-repeat: no-repeat; color: #ffffff; } Your code for your TD.infoBoxHeading class may have different code in it. The point I am getting across is to just add these two lines to it: background-image: url(images/image.gif); background-repeat: no-repeat Of course you will need to use your own image name in place of image.gif There are other values for the background-repeat: property that you may want to experiment with here: CSS background-repeat Property Please note that sometimes when you change your stylesheet nothing seems to change. That can be because you are looking at your PC's cache of the site. If that happens, try clearing your browser cache then reload the page, or if you are using IE or Firefox hold down the <Ctrl> key while doing a page refresh. This forces the browser to reload the page contents from the server. If this doesn't work or isn't what you want, I don't have anything else to try. If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there > Link to comment Share on other sites More sharing options...
timmle Posted July 6, 2008 Author Share Posted July 6, 2008 That worked a treat! Thankyou very much. I just need to try and increase the height of the area so that it fits my entire image now instead of cropping it down but will that be in the classes/boxes.php? Increasing the font size will do it but i want to leave the text the same size and just increase the size of the heading, in pixels if possible. Link to comment Share on other sites More sharing options...
germ Posted July 6, 2008 Share Posted July 6, 2008 The size is controlled in the stylesheet in the area you just edited: font-size: 10px; Try adjusting what you have for the font-size in the TD.infoBoxHeading CSS property. If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there > Link to comment Share on other sites More sharing options...
germ Posted July 6, 2008 Share Posted July 6, 2008 Or look at the PHP code: class infoBoxHeading extends tableBox { function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) { $this->table_cellpadding = '0'; if ($left_corner == true) { $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif'); } else { $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif'); } 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'); } else { $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14'); } $info_box_contents = array(); $info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"', 'text' => $left_corner), array('params' => 'width="100%" height="14" class="infoBoxHeading"', 'text' => $contents[0]['text']), array('params' => 'height="14" class="infoBoxHeading" nowrap', 'text' => $right_corner)); $this->tableBox($info_box_contents, true); } } That's my code. Note near the end it has: height="14" several places. You could try adjusting yours there. If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there > Link to comment Share on other sites More sharing options...
Puckle Posted July 6, 2008 Share Posted July 6, 2008 Thanks, it worked really nice with the image (except for a small pixel that's kind of repeating the image even though it's not repeated... but it's ok, I'll figure that out later) I've got one more question, how do I go about removing the text? ("Categories") I commented out this part: $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES); But that just made my image brake. Thanks again!! __________________ EDIT: I removed the text by leaving the define BOX_HEADING_CATEGORIES ' ' blank. thanks! Link to comment Share on other sites More sharing options...
Oasisrar Posted July 13, 2008 Share Posted July 13, 2008 Back to the top of this. If the corners are pictures than it is not possible to change the color correct? Please let me know so I stop driving myself crazy trying to look for a way to do so. Thanks a lot. This is a very helpful post all together! Stacy Link to comment Share on other sites More sharing options...
germ Posted July 13, 2008 Share Posted July 13, 2008 You have to use some sort of image editing program. Then re-upload the new images. It's not possible (to my knowlege) to change the color by other means. If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there > Link to comment Share on other sites More sharing options...
Oasisrar Posted July 15, 2008 Share Posted July 15, 2008 You have to use some sort of image editing program. Then re-upload the new images. It's not possible (to my knowlege) to change the color by other means. Ok, I have changed the corner colors and gotten them to work on most of my boxes except the "New Products for July" box. Where is this located so I can change it manually so it identifies my corners (I had to change the format from gif to bmp so I have to change it in the php. Most of them changed when I changed it in the boxes.php but not the "New Products for July".) Thanks! Nevermind. I found it. Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.