Hiding the sidebox heading fonts/links....

I can't seem to find what to change to hide the sidebox heading labels....(Search by category, search by manufacturer, shopping cart, login, featured items, etc.... )

I have separate images I would like to use for each of the different sidebox headings and I found this in the stylesheet which I'm assuming is what I should be looking at....

Quote:

---

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
font-size: 10px;
color: #ffffff;
}

---

BUT i can't figure out how to just hide the FONT. It hides the background color and everything else.............:wacko:

Unfortunately, CSS just can't do this by itself. It could do everything except stopping the text display. You will need some coding.

In /includes/templates/your_template/common/tpl_box_default_left.php, the whole core of the file is

PHP Code:

---

<!--// bof: <?php echo $box_id; ?> //-->
<div class="leftBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
<h3 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>
<?php echo $content; ?>
</div>
<!--// eof: <?php echo $box_id; ?> //-->

---

Change the $title to
(file_exists(DIR_WS_TEMPLATE_IMAGES . 'boxhead-' . $box_id . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'boxhead-' . $box_id . '.gif') : $title)

PHP Code:

---

<!--// bof: <?php echo $box_id; ?> //-->
<div class="leftBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
<!--box header image  gjh42 2007-07-01-->
<h3 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo (file_exists(DIR_WS_TEMPLATE_IMAGES . 'boxhead-' . $box_id . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'boxhead-' . $box_id . '.gif') : $title); ?></h3>
<?php echo $content; ?>
</div>
<!--// eof: <?php echo $box_id; ?> //-->

---

Name images like boxhead-categories.gif and save in /your_template/images/. Look in view source to get the box id at the top of each sidebox output.

Repeat this process for tpl_box_default_right.php.

Note - it just occurred to me that this will remove the link that some headers have. There is an easy way to redo this to keep the link - I'll post as soon as I verify that it works.

Ok, tested...

In /includes/templates/your_template/common/tpl_box_default_left.php, leave the code shown above in its original state. Above it, see

PHP Code:

---

// choose box images based on box position
  if ($title_link) {
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';
  }
// 


---

and replace this with

PHP Code:

---

//box header image if file exists  gjh42 2007-07-01
$title = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'boxhead-' . $box_id . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'boxhead-' . $box_id . '.gif') : $title);
if ($title_link) {
  if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'boxhead-' . $box_id . '.gif')) {
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . '</a>';
  } else {
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';
  }
}
// 


---

Name images like boxhead-categories.gif and save in /your_template/images/. Look in view source to get the box id at the top of each sidebox output.

Repeat this process for tpl_box_default_right.php.

AWESOME!!!!
I could figure out everything except how do not display the text.
I can even hide the manufacturers heading (label) and the linked headings via the css, just not the normal headings.

Thanks for your help! I would have never figured that out.!!!

ok so the only sideboxes I am still getting headings for are categories and my loginbox...

Can you post a link to your site?

http://eclecticaclothing.com
Just give me a sec to get if off of maintenance...

I really appreciate your help!!!!!

Looks like you have this pretty well in hand now... The Manufacturer heading is gone. Make up your "Shop" image for the categories header, and you should be good to go.

Did you double-check that you have the login header image named correctly?

BTW, nice looking site. It does seem that the categories navigation is not working. Is this true, or is there something else that needs to happen... nevermind, I bet you need javascript enabled for it to work. If that is the case, it wouldn't hurt to say that somewhere; or better yet, have alternate <noscript> functionality so customers can shop no matter what. That is even more important than having your cool js functions.

I did double check both the categories and login images and they are named correctly, just not showing up....

I see they are showing correctly now. What worked to make them appear?

It just occurred to me that your "shop by manufacturer" function is already there, and you only need the text changed. This can be easily fixed by searching in the Developers Toolkit for "Please Select", or better still "define Please Select".
THis should show you the language file where that text is defined, and you can edit that to read as you wish. You might check that it is not a universal constant that is used elsewhere; if so, it will be trickier to separate out.

well, the categories image needed to be name boxhead-chcategories.... =)
I will try looking for that "please select" again, hopefully i can find the right one!

I noticed that chcategories in your view source, but assumed you had accounted for it... oh well :)

Happy hunting for selects!

A fix just occurred to me for a minor bug with this if there is a mix of images and non-images. If there is any padding for the text header, it will also be applied to the image header, which will generally not be desirable.
Add this to your stylesheet if this is an issue:

Code:

---

h3.leftBoxHeading a img, h3.leftBoxHeading label img, h3.rightBoxHeading a img, h3.rightBoxHeading label img {
    margin: -.5em -.5em;
}

---

Adjust to equal and cancel out the padding total on the text headers.

Note: I have not tested this. If anyone tries it, please post with your results (and a link to see), and I will tweak if necessary.

Doesn't work for me...

Here's what I did:

Step one,

In /includes/templates/my_template/common/tpl_box_default_left.php, change from this

PHP Code:

---

// choose box images based on box position
  if ($title_link) {
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';
  }
// 


---

to this

PHP Code:

---

//box header image if file exists  gjh42 2007-07-01
$title = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'boxhead-' . $box_id . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 

'boxhead-' . $box_id . '.gif') : $title);
if ($title_link) {
  if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'boxhead-' . $box_id . '.gif')) {
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . '</a>';
  } else {
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';
  }
}
// 


---

Step two,

Save image in here /my_template/images/boxhead-categories.gif

Step three,

In stylesheet,

Code:

---

#manufacturerHeading {
  background-image: url("../images/boxhead-categories.gif");
}

---

Is there something I missed? :unsure:

Quote:

---

Originally Posted by miles

Doesn't work for me...

Here's what I did:

Step one,

In /includes/templates/my_template/common/tpl_box_default_left.php, change from this

PHP Code:

---

// choose box images based on box position
  if ($title_link) {
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';
  }
// 


---

to this

PHP Code:

---

//box header image if file exists  gjh42 2007-07-01
$title = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'boxhead-' . $box_id . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 

'boxhead-' . $box_id . '.gif') : $title);
if ($title_link) {
  if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'boxhead-' . $box_id . '.gif')) {
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . '</a>';
  } else {
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';
  }
}
// 


---

Step two,

Save image in here /my_template/images/boxhead-categories.gif

Step three,

In stylesheet,

Code:

---

#manufacturerHeading {
  background-image: url("../images/boxhead-categories.gif");
}

---

Is there something I missed? :unsure:

---

are you using your left sideboxes or is everything on the right?
If you are only using sideboxes on the right side you need to
edit includes/templates/my_template/common/tpl_box_default_right.php
instead of /tpl_box_default_left.php....or edit both if you are using sideboxes on both sides.....

Thanks for the reply,

Actually I'm only using the left sidebox. So, I've made changes only to the tpl_box_default_left.php.

Do all the steps I'd made are the the right way to do?

Three points:

1) This method makes the image the "title", and it will be displayed without any addition to the stylesheet - you do not want to also make it the background.

2) url("../images/boxhead-categories.gif");
The quotes "" are not needed for this format; you can just use url(../images/boxhead-categories.gif);
I don't know if the quotes will cause a problem.

3) There is now a packaged copy of this mod in Downloads (Image Titles), modified to increase functions and be compatible with multiple languages. It requires no editing aside from uploading the files and image files to the correct locations.

I just gave (Image Titles) mod a try, but it only changed the 'categories sidebox' header. What I need is to change the left 'manufacturer sidebox' header from text to image.

Can you help me on this? A step-by-step would be great...

Thanks for the help.

When you uploaded the Image Titles files, did you overwrite the first custom copy of tpl_box_default_left.php? If not, you don't have a fully functioning version, which would explain only the categories swap if that was the only one you tried the first time.

If you did, there is nothing else you need to do beside load your boxhead-manufacturers.gif into /includes/templates/your_template/buttons/english/. You do need to be sure of the box name so that you name the gif properly.

Aha..when you said

Quote:

---

there is nothing else you need to do beside load your boxhead-manufacturers.gif

---

I knew what went wrong. I have to rename each image to its own name.

e.g
Categories sidebox header - boxhead-categories.gif
Manufacturer sidebox header - boxhead-manufacturers.gif

Now its done. Works like charm.

Thanks gjh42 for your support.:smartalec:

Hello,

Is this mod meant to remove the text/colour bar in the sideboxes, and replace it with my custom logo, or do I need to make extra code changes to remove the text/colour bar of the sideboxes?

I tried to follow the thread, however got extremely confused.

Kind regards,
Anthony

The mod by itself will not affect the "color bar" which is a background image named tile_back.gif; it will replace the text with the image that you save with the correct name.

You don't need to do any of the coding that this thread describes, just download and install the Image Titles mod from Free Addons.

If you need any more assistance, please post in the Image Titles Support Thread.

I have a method that uses just the CSS to hide the text and display an image instead, so this method needs no code changes - and if you later want to revert to the text headings, its a matter of either "commenting out" or deleting the relevant css declarations.

The method involves:

1. Creating suitable images for each sidebox, making sure that they are a standard height and width (where width does not exceed the sidebox width setting you have specified in your admin>>>configuration>>>layout settings...Column Width Left Boxes and Right Boxes.

Give these images suitable names (categorieshead.jpg , etc...) and FTP them to your template's images folder.

2. Creating the CSS declarations, and making sure these are appended to the BOTTOM of stylesheet.css so they override earlier declarations governing sidebox headings.

The css looks like this:

HTML Code:

---

/* - - - - - SIDEBOX HEADINGS WITH IMAGES AND NO TEXT - JUST CREATE NEW IMAGES FOR ALL ACTIVE SIDEBOXES - - - - - -*/
/* - - - - PART ONE. DETERMINE THE ID FOR ALL RELEVANT SIDEBOXES AND APPEND TO THIS LIST - - - */
/* - - - - WHERE HEADING IS A LINK BE SURE TO INCLUDE THE LINK AND VISITED ID - - - -  eg: #whatsnewHeading a, #whatsnewHeading a:visited */

#categoriesHeading, #reviewsHeading, #reviewsHeading a, #reviewsHeading a:visited, #informationHeading, #moreinformationHeading, #whatsnewHeading, #whatsnewHeading a, #whatsnewHeading a:visited, #ezpagesHeading, #extralinksboxHeading {
        color: transparent;
        font-size: 0px; /* --- makes text headings invisible in MSIE - Stupid MSIE behaviour -----*/
        height: 30px; /* - - HEIGHT OF YOUR IMAGES */
        background-position: top left;
        background-repeat: no-repeat;
        background-color: transparent;
        }
/* - - PART TWO. NOW FOR EACH SIDEBOX LISTED ABOVE - CALL ITS IMAGE FROM YOUR TEMPLATES IMAGE FOLDER - - */
#categoriesHeading {
        background-image: url(../images/categorieshead.jpg);
}
#reviewsHeading {
        background-image: url(../images/reviewshead.jpg);
}
#informationHeading {
        background-image: url(../images/informationhead.jpg);
}
#moreinformationHeading {
        background-image: url(../images/moreinformationhead.jpg);
}
#whatsnewHeading {
        background-image: url(../images/whatsnewhead.jpg);
}
#ezpagesHeading {
        background-image: url(../images/ezpageshead.jpg);
}
#extralinksboxHeading {
        background-image: url(../images/extralinkshead.jpg);
}

---

Nice work! The one concern I would have is that search engines are said to not like "hidden" text (transparent/white-on-white, 0 height...).
If it can be confirmed that this is not a real problem in this usage, I would recommend the method.

What about just leaving font-size: 0px; and getting rid of "transparent"?

Will the SE's see font = 0px and penalize that too?

Looking at the source code I don't actually think that either transparent or font=0px in the CSS will have any influence on SE activity here...

Where's Melanie Prough... ? Please help us here!

Here's an interesting post in webmasterworld.com...

Quote:

---

There have been reports of googlebot fetching some stylesheets, I myself have never seen it

I *think* as part of google Algo that they may very well try to fetch a stylesheet for further reading *if* the site it's crawling also raises some other flags.

I do not believe it can or ever will simply fetch a stylesheet and parse it for the words display: none; or visibility: hidden; or z-index: -9999px; etc..

the Cascade and Specificty would make it very hard for them to put it all in context based on a single rule and besides there are very many legitimate uses for such rules. If anything they, google, might just get enough flags from various sources of their algo, not just the css, to warrant a hand check on a site. So if you're using it legitimately all will be well, regardless of if the stylesheet is read or not.

There's a lot of FUD promoted about stylesheet properties and hidden text, but common sense always prevails ;)
Google themselves are using an image replacement technique which uses the word "hidden" in the css

---

Yes, that's one of those things that a human can glance at and say "no problem", while a bot might or might not get the correct take on it... only a well-placed expert can say for sure.