8T8T Posted May 11, 2006 Share Posted May 11, 2006 This contribution enables the Manufacturers infobox to be modified by CSS stylesheet. No javascript used. It is easy to install. CSS Manufacturers Box Live demo: http://8t8t.com (list of artists) Enjoy it! :) Quote Link to comment Share on other sites More sharing options...
starynightskyz Posted May 11, 2006 Share Posted May 11, 2006 This contribution enables the Manufacturers infobox to be modified by CSS stylesheet. No javascript used. It is easy to install. CSS Manufacturers Box Live demo: http://8t8t.com (list of artists) Enjoy it! :) Its a great contribution. I loaded it this morning and it looks great. I was wondering If I could ask for your help, or some guidance with css. I don't really know much about css but I would like to learn more. I would like to add css text pupups for each "manufacture" or artist listed in the manufactures list. For example when you hover over the name "alabama" a small pop up would say. Alabama receives Top Vocal Group nomination for 41st Academy of Country Music Awards. Or something else relevant. for short list the pop up can come up undernieth the list. like you'll see onTHIS PAGE . and perhaps for longer lists like yours, could the list be droped down about 150 px to make room for the caption when a customer hovers over each list name? Its just a thought.. I like the fancy pop ups.:D..either way. Thank you for your contribution. It makes giving a site a bit of individual identity a whole lot easier. Nancy :blush: Quote Link to comment Share on other sites More sharing options...
8T8T Posted May 11, 2006 Author Share Posted May 11, 2006 Good idea! You need to add a field to database manufacturers, like manufacturers_description or else. Here I use date_added as an example. in catalog/includes/boxes/manufacturers.php find: $manufacturers_query = tep_db_query("select distinct m.manufacturers_id, m.manufacturers_name from " . TABLE_MANUFACTURERS . " m, " . TABLE_PRODUCTS . " p where m.manufacturers_id = p.manufacturers_id AND p.products_status <> 0 order by m.manufacturers_name"); replace with: $manufacturers_query = tep_db_query("select distinct m.manufacturers_id, m.manufacturers_name, m.date_added from " . TABLE_MANUFACTURERS . " m, " . TABLE_PRODUCTS . " p where m.manufacturers_id = p.manufacturers_id AND p.products_status <> 0 order by m.manufacturers_name"); find: $manufacturers_list .= '<tr><td>' . '</td><td class="infobox_manufacturers_contents" valign="middle"><a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $manufacturers['manufacturers_id']) . '">' . $manufacturers_name . '</a></td></tr>'; replace with: $manufacturers_list .= '<tr><td>' . '</td><td class="infobox_manufacturers_contents" valign="middle"><a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $manufacturers['manufacturers_id']) . '">' . $manufacturers_name . '<span>' . $manufacturers['date_added']. '</span></a></td></tr>'; in catalog/stylesheet.css change the height of the infobox div.manufacturers { background: #fec324; color: #5500cc; padding: 0 0 1px 0; margin: 0; border: 0; height: 178px; /* height of the manufacturers box */ overflow: auto; } add some space at the bottom .infobox_manufacturers { background: white; font: 10px Verdana,Arial,sans-serif; padding-bottom: 30px; } add below to the bottom for the text pop hover div.manufacturers a span { display: none; } div.manufacturers a:hover span { display: block; position: absolute; top: 364px; left: 0; width: 175px; padding: 5px 0 5px 12px; margin: 10px; z-index: 100; color: #555; background: transparent; font: Verdana,Arial,sans-serif; text-align: left; } or simply replace the original code /* CSS Manufacturers Box start */ div.manufacturers { background: #fec324; color: #5500cc; padding: 0 0 1px 0; margin: 0; border: 0; height: 178px; /* height of the manufacturers box */ overflow: auto; } div.manufacturers a { display: block; padding: 2px 2px 2px 5px; border-left: 10px solid #a61818; background-color: #c83a24; color: #f5ccbe; text-decoration: none; width: 100%; } html>body div.manufacturers a {width: auto;} div.manufacturers a:hover { background-color: #ff2200; border-left: 10px solid #be1818; color: #ffffff; } .infobox_manufacturers_heading { background: #fec324; color: #dd0000; border-right: 10px solid #fe8b24; height: 20px; font: bold 10px Verdana,Arial,sans-serif; padding-left: 10px; } .infobox_manufacturers { background: white; font: 10px Verdana,Arial,sans-serif; padding-bottom: 30px; } .infobox_manufacturers_contents { background: #5d1c1c; font: 10px Verdana,Arial,sans-serif; border-top: 1px solid #ec6034; border-bottom: 1px solid #711111; } div.manufacturers a span { display: none; } div.manufacturers a:hover span { display: block; position: absolute; top: 364px; left: 0; width: 175px; padding: 5px 0 5px 12px; margin: 10px; z-index: 100; color: #555; background: transparent; font: Verdana,Arial,sans-serif; text-align: left; } /* CSS Manufacturers Box end */ The result: http://8t8t.com/demo/index.php Quote Link to comment Share on other sites More sharing options...
starynightskyz Posted May 12, 2006 Share Posted May 12, 2006 Wow ! that was quick. Looks pretty much like I was thinking. Now I know very little about this so try not to pull your hair out while I newbie my way through this. So when you say You need to add a field to database manufacturers by database manufactures you mean the manufactures.php page? and not SQL database? With this would I create a whole new page for example called manufactures_popup.php almost like the english.php page. where the list of manufactures could be added too, changed and updated.. from which the pop up text could be drawn from? in place of the [date_added] function that you used? Sorry for my lack of experience. But this seems like an interesting place to start! I hope my questions are not to troublesom! Nan :blush: Quote Link to comment Share on other sites More sharing options...
starynightskyz Posted May 12, 2006 Share Posted May 12, 2006 Ive made up some images to show the basic idea. Short Before Mouse Over Short After Mouse Over Long Before Mouse Over Long After Mouse Over P.S. Only showing for the visual not because I want you to do it for me. Id like to take what you've already shared and see if I can figure it out. Nan :D Quote Link to comment Share on other sites More sharing options...
8T8T Posted May 12, 2006 Author Share Posted May 12, 2006 Wow ! that was quick. Looks pretty much like I was thinking. Now I know very little about this so try not to pull your hair out while I newbie my way through this. So when you say by database manufactures you mean the manufactures.php page? and not SQL database? With this would I create a whole new page for example called manufactures_popup.php almost like the english.php page. where the list of manufactures could be added too, changed and updated.. from which the pop up text could be drawn from? in place of the [date_added] function that you used? Sorry for my lack of experience. But this seems like an interesting place to start! I hope my questions are not to troublesom! Nan :blush: I should say table 'manufacturers', in mysql. 'date_added' is one of the field in table 'manufacturers'. To store the popup text you want, you need to insert a field in table 'manufacturers'. For the popup text input, you also have to make modifications on the admin side. That requires some work. Quote Link to comment Share on other sites More sharing options...
8T8T Posted May 12, 2006 Author Share Posted May 12, 2006 Ive made up some images to show the basic idea. Short Before Mouse Over Short After Mouse Over Long Before Mouse Over Long After Mouse Over P.S. Only showing for the visual not because I want you to do it for me. Id like to take what you've already shared and see if I can figure it out. Nan :D Try the modifications and it should come up as the top 2 columns (short before/after mouse over). The height of the infobox is not affected. Quote Link to comment Share on other sites More sharing options...
8T8T Posted May 12, 2006 Author Share Posted May 12, 2006 Thanks Nancy for your inspiration. I use instead the image as the popup. The revised contribution: CSS Manufacturers Box with Image Popup See the result: www.8t8t.com Quote Link to comment Share on other sites More sharing options...
8T8T Posted May 13, 2006 Author Share Posted May 13, 2006 Oops! >_< I use Firefox and and the popup works. However, it doesn't work in IE and Opera. I appreciate if someone can help. Thanks. Quote Link to comment Share on other sites More sharing options...
starynightskyz Posted May 13, 2006 Share Posted May 13, 2006 Thanks Nancy for your inspiration. I use instead the image as the popup. The revised contribution: CSS Manufacturers Box with Image Popup See the result: www.8t8t.com You're too quick for me! The idea of having images for the Artist menu is great! especially for someone like me. who might not put much thought into a text listing and just run through to get to the artist im looking for. Having the images, I went though the list slower. And the images have more of an impact. ( recognise artists I had long forgot about. so I think it might increase sales. For myself i can put in sample work of the artists and people can pick what they like from that. or a particular style. Great Job!! Nancy :D Quote Link to comment Share on other sites More sharing options...
360fusion Posted August 15, 2006 Share Posted August 15, 2006 (edited) HI, I have installed this contribution and it is exacly what i wanted. The only problem is it adds a scroll bar to the bottom of the infobox in firefox when i click on a link. It works fine in IE. I have played about with the css and have managed to fix it by adding a 1px left and righ border to the .infobox_manufacturers_contents. This fixes the Firefox issue but then causes the top right of the header box to be 2px narrower than the infobox in Internet explorer. It also means the border is thicker than i'd like. Can anyone help me? Thanks in advance Ben Edited August 15, 2006 by 360fusion Quote Link to comment Share on other sites More sharing options...
Guest Posted November 21, 2007 Share Posted November 21, 2007 Works for me. I just removed the rollover image border, so it won't show up in Internet Explorer. Good work! Peace Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.