cpruissen Posted March 28, 2003 Posted March 28, 2003 Hi, Many of my images are of business forms that could really us a border around them to make them stand out. Any ideas how I can do this. Everything is working on my oscommerce program and after all the work getting it to the point of setting it live very soon, I'm too afraid to go in an muck with any of the code without knowing what to do first....lol Thanks as always for the help. Catherine childcare.net
Druide Posted March 28, 2003 Posted March 28, 2003 check the function in includes/functions_html_output.php // The HTML image wrapper function function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') { if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) { return false; } to put a border to ALL your images that use the tep_image function (and thats about everything // The HTML image wrapper function function tep_image($src, $alt = '', $width = '', $height = '', border='1', $parameters = '') { if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) { return false; } I haven't tested it but that's a possibility Robert We all need to learn it once, how hard it may seem when you look at it, also you will master it someday ;)
radders Posted March 28, 2003 Posted March 28, 2003 That would put a border round things such as the rounded corners and the one pixel gifs as well as the cartoon images.
zebra001 Posted March 28, 2003 Posted March 28, 2003 Here is the solution to the borders on only product images. * * BACK UP YOUR FILES FIRST * * You will need to make this change in catalog/includes/functions/htmloutput.php Here is the first part: // The HTML image wrapper function function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') { if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) { return false; } // Zebra001 added $borderforimage = 'false'; if (($width == SMALL_IMAGE_WIDTH) && ($height == SMALL_IMAGE_HEIGHT)) $borderforimage = 'true'; //end Zebra001 added // alt is added to the img tag even if it is null to prevent browsers from outputting // the image filename as default $image = '<img src="' . $src . '" border="0" alt="' . htmlspecialchars($alt) . '"'; if (tep_not_null($alt)) { $image .= ' title=" ' . htmlspecialchars($alt) . ' "'; // Zebra001 added if ($borderforimage == 'true') $image .= ' class=fotgal '; // end Zebra001 added } Second Step: Edit/Add to stylesheet.css .fotgal {border:2px; border-thickness: 2px; border-color: #ffffff; border-style: solid;} A:hover .fotgal, A:active .fotgal {border:2px; border-thickness: 2px; border-color: purple; border-style: solid} Put second step in the main stylesheet.css The css with a white border which trurns purple when you hover over it (Make appropriate changes). The other message contained the changes to htmloutput.php Let me know how this goes. -J
Ajeh Posted March 29, 2003 Posted March 29, 2003 Now that is a crafty addition there ... :D Thanks very much!
Druide Posted March 29, 2003 Posted March 29, 2003 speechless... haven't tried it but what i read in the code is a very smart solution ! 2 thumbs up Robert We all need to learn it once, how hard it may seem when you look at it, also you will master it someday ;)
cpruissen Posted March 31, 2003 Author Posted March 31, 2003 Hi Jeff, Thanks so much for taking the time to help me with this. I sure hope it workd. Right now I am getting a parse error in the html_output from the code you provided, and, being the non-expert I am, I'm hoping you can spot the problem for me. I've tried all different things but to no avail. I look forward to your response. Catherine
cpruissen Posted March 31, 2003 Author Posted March 31, 2003 Hi Jeff, Boy, a little sleep does wonders for the eyesight. I found the problem with the parse errors. A couple of closing } were missing. re: // The HTML image wrapper function function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') { if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) { return false; } } // Zebra001 added $borderforimage = 'false'; if (($width == SMALL_IMAGE_WIDTH) && ($height == SMALL_IMAGE_HEIGHT)) $borderforimage = 'true'; //end Zebra001 added // alt is added to the img tag even if it is null to prevent browsers from outputting // the image filename as default $image = '<img src="' . $src . '" border="0" alt="' . htmlspecialchars($alt) . '"'; if (tep_not_null($alt)) { $image .= ' title=" ' . htmlspecialchars($alt) . ' "'; } // Zebra001 added if ($borderforimage == 'true') $image .= ' class=fotgal '; // end Zebra001 added } Anyway.......that said, and the colours changed in the stylesheet, still no borders....so I'll putz with it and see what happens. Thank you. Catherine childcare.net
Druide Posted April 3, 2003 Posted April 3, 2003 this one is ready for the Tips & Tricks still people are asking for this... Robert We all need to learn it once, how hard it may seem when you look at it, also you will master it someday ;)
jeana Posted April 3, 2003 Posted April 3, 2003 I've tried this edit and nothing shows up....any ideas?
AnnieO Posted April 3, 2003 Posted April 3, 2003 I can get a border on this page, but not the default.php This is the line I added a class="borders" to, and of course that is on the stylesheet. I also put in NULL twice so that I could show the images the actual size. Sorry...I know that is a hack. document.write('<?php echo '<a href="java script:popupWindow('' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], NULL, NULL, 'hspace="5" vspace="5" class="borders"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>'); If someone knows how to get a border on the default.php product, I'd love to hear about it.
Solomon Posted April 4, 2003 Posted April 4, 2003 Annie0, Your solution works even on the default.php page. What are you trying to get borders on the front page for? The, "New Products For this month" products? Regards, D. Solomon Jr. 3DChipset.com
TB Posted August 24, 2003 Posted August 24, 2003 TB: Moved this thread to 'Tips and Tricks' forum. "The price of success is perseverance. The price of failure comes much cheaper."
minglou Posted August 24, 2003 Posted August 24, 2003 i got error with this code. none of them are working with MS1 anyone tried this code?
MaryAnn Posted August 24, 2003 Posted August 24, 2003 i got error with this code. none of them are working with MS1 anyone tried this code? I have this working fine. Here is the code I am using. Just look for the following lines in catalog/includes/functions/html_output and place the lines that Zebra001 added and double check your } to make sure it looks like all the code below. Backup this file first before you touch it. // The HTML image wrapper function function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') { if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) { return false; } // Zebra001 added $borderforimage = 'false'; if (($width == SMALL_IMAGE_WIDTH) && ($height == SMALL_IMAGE_HEIGHT)) $borderforimage = 'true'; //end Zebra001 added // alt is added to the img tag even if it is null to prevent browsers from outputting // the image filename as default $image = '<img src="' . $src . '" border="0" alt="' . htmlspecialchars($alt) . '"'; if (tep_not_null($alt)) { $image .= ' title=" ' . htmlspecialchars($alt) . ' "'; // Zebra001 added if ($borderforimage == 'true') $image .= ' class=fotgal '; // end Zebra001 added } Add the following to the bottom of catalog/stylesheet.css I added the visited but you can omit that if you like and you can change the colors to the colors of your choice. .fotgal {border:4px; border-thickness: 4px; border-color: #8080FF; border-style: solid; } A:hover .fotgal {border:4px; border-thickness: 4px; border-color: #FFC0C0; border-style: solid; } A:active .fotgal {border:4px; border-thickness: 4px; border-color: #E3E4FF; border-style: solid; } A:visited .fotgal {border:4px; border-thickness: 4px; border-color: #C0C0FF; border-style: solid; } Have a great day. Mary :D
drunken master Posted August 25, 2003 Posted August 25, 2003 why not just put borders around the images in a graphics program such as photoshop, surely this would be easier?
MaryAnn Posted August 25, 2003 Posted August 25, 2003 Actually using the stylesheet is easier once you put the code there you don't have to take the time to add borders with image software. Also if you already have alot of images in your shop that would be too time consuming to redo them all. Mary
paulm2003 Posted August 27, 2003 Posted August 27, 2003 This suggested style sheet settings: .fotgal {border:2px; border-thickness: 2px; border-color: #ffffff;border-style: solid;} A:hover .fotgal, A:active .fotgal {border:2px; border-thickness: 2px; border-color: purple; border-style: solid} can be replaced with this: .fotgal {border:2px #fff solid;}A:hover .fotgal, A:active .fotgal {border:2px purple solid;} does the same, only shorter And if osCommerce is well programmed, only one or two lines in the stylesheet is enough, no other codechanges needed. something like: img {border:2px #fff solid;} The images do need to have a class or be in a class to distinct the image from other images (= well programmed) .
paulm2003 Posted August 28, 2003 Posted August 28, 2003 No PHP code change needed! Simply add the quoted css code to /catalog/stylesheet.css This gives borders in productlisting images only: table.infoBoxContents td.smalltext img {border: 4px #09f groove;} example (the borders don't seem to fit the images because these images have already two (left and right) large white borders themselves) at: http://www.televisiedokter.nl/catalog/inde...dex.php?cPath=3 (only temporary available for testing) or some more borders like this (i.s.o. the line above): td.smalltext img {border: 4px #09f groove;} If you want to test/try all (?) CSS borders very fast and easy: http://artlung.com/lab/css/border-style/ hope this is usefull to anyone (or is this to simple?) :?:
paulm2003 Posted August 28, 2003 Posted August 28, 2003 Sorry I just can't get enough of all this. :lol: Add this line to stylesheet.css for a nice hover effect on the borders: table.infoBoxContents td.smalltext a:hover img {border: 4px red groove;}
paulm2003 Posted August 28, 2003 Posted August 28, 2003 Sorry again:oops: Accidently posted styles for new products image borders in previous post These are the styles to add to catalog/stylesheet.css are for the products image borders: td.productListing-data img {border: 4px #09f groove;}td.productListing-data a:hover img {border: 4px red groove;} Hope this is better, it does work on my testsite.
mat_norris Posted June 30, 2004 Posted June 30, 2004 Paul Just finished reading your posts about using stylesheets to add image borders. I tried your examples and they worked just fine, I'm trying to add borders to the category images, these are the ones I defined your each sub category. Do you know how this would be achieved ? Your help would be greatly appreciated. Matt
maruosan Posted July 16, 2004 Posted July 16, 2004 Thank you paulm2003 exelent tip, very helpfull, works very well , just I would like to add the border to the image on the product_info.php/ can you helpme with that THNX :)
sinryder Posted August 28, 2004 Posted August 28, 2004 hey to add the border to the images in category and product info page use this td.smalltext img {border: 1px black groove;}
New 
Recommended Posts
Archived
This topic is now archived and is closed to further replies.