Replacing Logo with liquid CSS, (almost there...)

[paulm]

To use css rollovers you should use a <a> in stead of the image, and add the image to the background (as done with the divs in the example above).

Just for the record: I would not use floats here myself. Not saing that it's bad or wrong, but I think using absolute positioning (or even a table) is more logical here.

edit: I don't have time now, but I can post an example of the css rollovers later if you like.

[paulm]

Ok, next example. Now includes CSS rollovers

Since I do not have the hover images I decided to changed the background colors on hover (which may be removed once the images are available), but the code is exactly the same.

See it working here: http://www.zen-cart.nl/tmp/peace_logo_hover/

The HTML:

<a href="#" class="peace-logo" id="peace-logo1"></a>
<a href="#" class="peace-logo" id="peace-logo2"></a>
<a href="#" class="peace-logo" id="peace-logo3"></a>
<a href="#" class="peace-logo" id="peace-logo4"></a>

And the CSS:

.peace-logo {
display: block;
  }
#peace-logo1 {
position: absolute;
left: 0;
top:0;
width: 490px;
height:115px;
background: url(images/logo/GPCMainBanner-e.gif);
z-index: 99;
  }
#peace-logo2 {
background: url(images/logo/gpc-logo-trans-line.gif);
height:115px;
margin-left:490px;
margin-right: 85px;
  }
#peace-logo3 {
position: absolute;
right: 25px;
top:0;
width: 60px;
height:115px;
background: url('images/logo/GPCMainBanner-animation.gif');
  }
#peace-logo4 {
position: absolute;
right: 0;
top:0;
width:25px;
height:115px;
background: url('images/logo/goto-gpc.gif');
  }
#peace-logo1:hover {
background: red url(images/logo/-image.gif);
  }
#peace-logo2:hover {
background: green url(images/logo/hover-image.gif);
  }
#peace-logo3:hover {
background: blue url(images/logo/hover-image.gif);
  }
 #peace-logo4:hover {
background: green url(images/logo/hover-image.gif);
  }

[Peace Freak]

Will you all take a bow please!

What can I say! This is amazing! What surprises me is with CSS there seems to be several ways to achieve the same result...

I have now got my logo working as I hoped it to be... With many, many thanks to everyone...

Even though everything is contained in this thread, sometime in the next week or so I will write a short tutorial so others will benefit from this. For someone who has never used CSS I think it will come in handy...

Domo arigato gozaimasu from Japan! (This is a very polite form of ‘thank you.’)

[Peace Freak]

Actually I should give a super special thank you to Kuroi San and to paulm for their really detailed answers and sample code. That sample code really really made the difference for me!

[kuroi]

douitashima****e

Edit: It would appear that a very common combination of letters in Japanese is considered rather rude in this forum, and requiring of auto censoring. But, Peace Freak, I'm sure you know what I was trying to say

[paulm]

Well, I just like both CSS and peace so .... :-)

Two notes:

1) I think you made two typos at http://english.globalpeace.jp/store/, the first and last logo link miss the closing ">"

2) Just in case someone's not happy with the links being empty and the logo images only sitting in the background, I would like say that that's very easy to change of course. Just insert the <img> tags into the links and add the following to the CSS:

.peace-logo img {
display: none;
}

(the images need to be hidden, or else they will sit in front of the backgrounds, and thus hover effect won't work anymore of course)

This way the logo(s) will stay visible even if CSS is disabled.

[Peace Freak]

Thank you both Paul and Kuroi San... Your contributions to our GPC site really mean a lot to us... Thank you for your support and I would like to send you both a couple of peace related DVD’s if you are interested... Let me know and if you are, we can work out a way to exchange addresses.

Paul, thank you for going over my code and checking it for errors... You are really first class and well, such attention to detail is really wonderful. I am sure you are really appreciated where you work...

Thank you for the idea on removing the links from logo 2 and 3...

I inserted the <img> tags I believe in the right place in the tpl_header.php, eg. :<a href="<img>" class="peace-logo" id="peace-logo2"></a>

but for the life of me could not work out where to put the CSS code:
.peace-logo img {
display: none;
}

I tried about a dozen different places but just couldn’t get it to fly... Just goes to show that I don’t have a basic grounding in CSS... Anyway, that is one of the reasons I will write the short tutorial on this, so that newbies to Zen and CSS will be able to do create a similar logo without actually knowing CSS... and not have to bother you guys as I have...

I guess you noticed that for the hover images 2 & 3 I did this:
#peace-logo2:hover {
background: url(http://english.globalpeace.jp/store/...ans-line.gif);
}

Was this the correct thing to do???

Once again, thank you!

[kuroi]

Hi Peace Freak.

The DVD offer is very kind, but I'd prefer that you save your resources for your campaign or donate to Zen Cart.

Something puzzles me about final solution. No problem with absolute positioning, Paul's right, it's just as effective for eliminating those pesky 3px gaps in IE as my solution. However, why have you used links and rollover on all four logo images and not just the left and right ones that actually do something.

It's not a minor issue either since clicking on one of the two middle images causes your site to fall over with a file not found error. You could easily just use images and position them in the same way with CSS avoiding not just the errors, but also the problems that viewers using text or speech browsers will have trying to navigate non-existent links.

Also, we wouldn't normally use full pathnames for image files. the bit starting images/... should be sufficient and would make it easier should you ever wish to move the site in the future.

Best wishes

[paulm]

I fully agree with kurio here.

Probably I wasn't clear enough about that it's only example code that I posted. I assumed you would change it to your needs, and to fit to Zen coding standards.

So I got some new notes:
:-)

1) I would only use links an hovers for the parts that really need it (as kurio already suggested). I was not sure which images you wanted to be "hoverable" that why I did it on all four. But you should decide which ones should be <A>s and which ones should be <DIV>s (or <IMG>s) and which ones need hovers (and remove the unneeded from de CSS).

2) I see another serious error in your HTML code:

<a href="http://english.globalpeace.jp/store/" class="peace-logo" id="peace-logo1" title="Click here to return to the Global Peace Campaign Store Top Page" alt="GPC Main Logo" ></a>
<a href="<img>" class="peace-logo" id="peace-logo2"></a>
<a href="<img>" class="peace-logo" id="peace-logo3"></a>
<a href="http://english.globalpeace.jp" class="peace-logo" id="peace-logo4" title="Click here to go to the English Global Peace Campaign homepage" alt="GPC Site Logo" ></a>

This does not look like a typo I am afraid. I think you should first read about the usage of de <a> and <img> tags etc (for example at http://www.w3schools.com/).

3) I am not sure, but I *think* this is an error too:

#logoWrapper, { }

I would remove it, or change it to:

#logoWrapper { }

4) The

.peace-logo img {
display: none;
}

needs to be added to your stylesheet. I would put it along with the other peace-logo CSS you already have

5) Once you know how to use the <img> and <a> tags you should put in some Zen Cart code for the src and href when you apply it to the templates.
For *example* like this:

src="<?php echo $template->get_template_dir('top-arrow.gif', DIR_WS_TEMPLATE, $current_page_base,'images') ?>/top-arrow.gif"

href="<?php echo zen_href_link(FILENAME_WHATEVER, '', 'NONSSL'); ?>"

(only needed for internal links)


6) I suggest to use http://validator.w3.org/ to check for HTML errors, it can save you a lot of trouble.

http://validator.w3.org/check?verbos...ex%26cPath%3D2

[Peace Freak]

Well, I have been a bit busy so was not able to get back to this till just now...

I believe I have now eliminated the unneeded links (I hope correctly) and have shortened the pathnames... I gather that the best place to store such images is as I have done, in my_template/images rather than in the CSS folder itself and not in the main store/images folder either... At first I could not understand how the path names worked. That is why I put the full URL in there, but I think I have the hang of it now...

Paul, for Item 2 in your list of things to do, I was not sure what error you were meaning... I went to w3schools and looked over the CSS tutorial, and discovered that alt should only be used with images, so I dumped that, but my untrained eye could not find anything else that was incorrect... Here is the code as it now stands:
**********
<div id="logoWrapper">
<a href="http://english.globalpeace.jp/store/" class="peace-logo" id="peace-logo1" title="Click here to return to the Global Peace Campaign Store Top Page" ></a>
<a class="peace-logo" id="peace-logo2"></a>
<a class="peace-logo" id="peace-logo3"></a>
<a href="http://english.globalpeace.jp" class="peace-logo" id="peace-logo4" title="Click here to go to the English Global Peace Campaign homepage" ></a>

</div>
**********
As for item five (...you should put in some Zen Cart code for the src and href when you apply it to the templates...), that is over my head. I am not even sure what function the code performs. If you could explain more about this, that would be great...

I took your advice and tried out the HTML validator... Wow, that is something else! Excellent idea. I discovered I was not writing the apostrophe correctly. I am now in the process of going through each of the pages and fixing them... BUT, it also found a lot of other mistakes that appear to be in the PHP code, such as:
**********
Warning Line 210 column 114: reference not terminated by REFC delimiter.
...store/index.php?main_page=index&cPath=18" title="Click here to go to see our
?

Warning Line 210 column 114: reference to external entity in attribute value.
...store/index.php?main_page=index&cPath=18" title="Click here to go to see our
?

Error Line 210 column 114: reference to entity "cPath" for which no system identifier could be generated.
...store/index.php?main_page=index&cPath=18" title="Click here to go to see our
*********

In total there were 56 errors! I wonder what I need to do regarding them... Some how I feel I should not be messing with the php files, or should I?

Once again, thank you very much for your time and patience...