Jump to content

Replace Logo with a Mapped image


bkessler91

Recommended Posts

Why don't you just add the HTML to the global templates? not sure why you're trying to edit the include files. Look at the skin documentation for v4.

Right... sometimes its just a simple answer.

It would be nice to use an include, just so I only have to update one file, if the navigation bar would need to be changed

Thank you once again for your help Robsta, you have indirectly helped me many times from your other posts.

Link to comment
Share on other sites

Welcome to the forums bkessler91!

The xtemplate system used by CC3 and CC4 does not allow php in the html templates, so you can't use include() there. What you can do is create a new box template containing html, something like styleTemplates/boxes/logo.tpl and call it with something like {LOGO} in the global templates in place of the php include() method.

But as you've probably discovered already, there are only a couple global templates to worry about, so repeating the html in them is not too painful.

To go all-out and make a box template for holding the html in one place, you would need to:

1. Create a php file for includes/boxes/logo.inc.php

2. Create a template file for styleTemplates/boxes/logo.tpl

3. Include the new php file and its placeholder "LOGO" in the includes/global/index.inc.php and cart.inc.php files

4. Put the placeholder {LOGO} into the global templates where you want it.

As Rob suggested, more info on all this at www.cubecartforums.org

Link to comment
Share on other sites

  • 1 month later...
  • 2 months later...

Now that I am using CubeCart Version: 5.1.5

I still would like to replace <p class="logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" />
(this is in /skins/###/templates/main.php)

 

with a series of tables for image mapping.

 

when I insert the table, there are 1px or 2px padding where <tr></tr> separate tables.

 

I've been looking in css files, but can not find anywhere there would be cellpadding applied.

 

Thanks
 

Link to comment
Share on other sites

If you are willing to go with imagemaps, then open the template file main.php and try this:

<p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" usemap="#storelogomap"/></a></p>

Then just above the </body> tag:

{include file='js/storelogomap.html'}

Create the file storelogomap.html and for its contents:

<map name="storelogomap">
<area shape="rect" coords="X1,Y1,X2,Y2" href="URL_1" alt="Desc_1">
<area shape="rect" coords="X3,Y3,X4,Y4" href="URL_2" alt="Desc_2">
<area shape="rect" coords="X5,Y5,X6,Y6" href="URL_3" alt="Desc_3">
</map>

Put the file in the root folder /js/, or, if you have different logos for different skins (if you use different skins) and need distinct map coords, put the file in the skin's folder /js/.

 

Clear the skin cache and let us know how it goes.

Link to comment
Share on other sites

Thanks, but I dont think I was clear enough.  :/

 

I have used ImageReady to create slices.  I have a series of tables and gaps are showing up where you see </tr><tr>

<!-- ImageReady Slices (header.psd) -->
<TABLE WIDTH=1000 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD WIDTH=338 NOWRAP></TD>
        <TD WIDTH=109 NOWRAP></TD>
        <TD WIDTH=101 NOWRAP></TD>
        <TD WIDTH=111 NOWRAP></TD>
        <TD WIDTH=80 NOWRAP></TD>
        <TD WIDTH=20 NOWRAP></TD>
        <TD WIDTH=117 NOWRAP></TD>
        <TD WIDTH=124 NOWRAP></TD>
    </TR>
    <TR>
        <TD COLSPAN=8>
            <IMG SRC="http://www.###.com/headerimages/###Header_01.jpg" WIDTH=1000 HEIGHT=73 ALT="" /></TD>
    </TR>
    <TR>
        <TD COLSPAN=5>
            <IMG SRC="http://www.###.com/headerimages/###Header_02.jpg" WIDTH=739 HEIGHT=93 ALT="" /></TD>
        <TD COLSPAN=3>
            <A HREF="http://###.com/shopping_cart/index.php">
                <IMG SRC="http://www.###.com/headerimages/###Header_03.jpg" WIDTH=261 HEIGHT=93 BORDER=0 ALT="" /></A></TD>
    </TR>
    <TR>
        <TD>
            <A HREF="http://www.###.com">
                <IMG SRC="http://www.###.com/headerimages/###Header_04.jpg" WIDTH=338 HEIGHT=29 BORDER=0 ALT="" /></A></TD>
        <TD>
            <A HREF="http://www.###.com/about_us/index.php">
                <IMG SRC="http://www.###.com/headerimages/###Header_05.jpg" WIDTH=109 HEIGHT=29 BORDER=0 ALT="" /></A></TD>
        <TD>
            <A HREF="http://www.###.com/class_schedule/index.php">
                <IMG SRC="http://www.###.com/headerimages/###Header_06.jpg" WIDTH=101 HEIGHT=29 BORDER=0 ALT="" /></A></TD>
        <TD>
            <A HREF="http://www.###.com/quilt_gallery/index.php">
                <IMG SRC="http://www.###.com/headerimages/###Header_07.jpg" WIDTH=111 HEIGHT=29 BORDER=0 ALT="" /></A></TD>
        <TD COLSPAN=2>
            <A HREF="http://www.###.com/FAQ.php">
                <IMG SRC="http://www.###.com/headerimages/###Header_08.jpg" WIDTH=100 HEIGHT=29 BORDER=0 ALT="" /></A></TD>
        <TD>
            <A HREF="http://www.###.com/contact_us/index.php">
                <IMG SRC="http://www.###.com/headerimages/###Header_09.jpg" WIDTH=117 HEIGHT=29 BORDER=0 ALT="" /></A></TD>
        <TD>
            <A HREF="http://###.com/shopping_cart/index.php">
                <IMG SRC="http://www.###.com/headerimages/###Header_10.jpg" WIDTH=124 HEIGHT=29 BORDER=0 ALT="" /></A></TD>
    </TR>
    <TR>
        <TD COLSPAN=8>
            <IMG SRC="http://www.###.com/headerimages/###Header_11.jpg" WIDTH=1000 HEIGHT=39 ALT="" /></TD>
    </TR>
</TABLE>
<!-- End ImageReady Slices -->

 

I'm sure I can pop the image into a mapping program and use what you suggested above.

 

Maybe I am too old school.  Open to any and all suggestions.

Link to comment
Share on other sites

I assumed an imagemap when you said, "with a series of tables for image mapping".

 

But, you have collapsed the cellspacing and cellpadding, now also collapse any border="0" that the <img> tags may have. Hopefully, CubeCart's CSS ruleset doesn't add padding or anything to <img> tags.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

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