Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

[Contribution] CSS Manufacturers Box


8T8T

Recommended Posts

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:

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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:

Link to comment
Share on other sites

Ive made up some images to show the basic idea.

 

 

Short Before Mouse Over small1.jpg

Short After Mouse Over small2.jpg

Long Before Mouse Over long1.jpg

Long After Mouse Overlong2.jpg

 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Ive made up some images to show the basic idea.

Short Before Mouse Over small1.jpg

Short After Mouse Over small2.jpg

Long Before Mouse Over long1.jpg

Long After Mouse Overlong2.jpg

 

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 months later...

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 by 360fusion
Link to comment
Share on other sites

  • 1 year later...

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...