A Cool Tip ? Clickable InfoBox Header Text

JuxiZoza · March 11, 2004

Sorry, if this is common knowledge. But, I didn't see it in forum or contributions and don't remember seeing any osCommerce sites that do this.

This tip turns InfoBox header text into a clickable link.

Optionally, remove ?arrow- right? which is no longer needed.

Files effected

catalog\includes\languages\english.php (5 lines of code)
catalog\includes\languages\classes\boxes.php (2 lines of code)

file = catalog\includes\languages\english.php
====================================

line = 79

replace:

define('BOX_HEADING_WHATS_NEW', 'What\'s New?');

with:

define('BOX_HEADING_WHATS_NEW', '<a href="' . tep_href_link(FILENAME_PRODUCTS_NEW) . '">' . 'What\'s New? »' . '</a>');

==========

line = 87

replace:

define('BOX_HEADING_SPECIALS', 'Specials');

with:

define('BOX_HEADING_SPECIALS', '<a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . 'Specials »' . '</a>');

==========

line = 90

replace:

define('BOX_HEADING_REVIEWS', 'Reviews');

with:

define('BOX_HEADING_REVIEWS', '<a href="' . tep_href_link(FILENAME_REVIEWS) . '">' . 'Reviews »' . '</a>');

==========

line = 96

replace:

define('BOX_HEADING_SHOPPING_CART', 'Shopping Cart');

with:

define('BOX_HEADING_SHOPPING_CART', '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . 'Shopping Cart »' . '</a>');

==========

line = 107

replace:

define('BOX_HEADING_NOTIFICATIONS', 'Notifications');

with:

define('BOX_HEADING_NOTIFICATIONS', '<a href="' . tep_href_link(FILENAME_ACCOUNT_NOTIFICATIONS) . '">' . 'Notifications »' . '</a>');

Remove no longer needed ?arrow_right.gif? from heading.

file = catalog\includes\languages\classes\boxes.php
====================================

line = 110 & 111

$right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';

} else {

comment out by placing // at beginning of lines.

// $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';

// } else {

The journey continues...

jenso · March 12, 2004

It is nice, short and easy to do.

Thanks for it.

Rich

EricK · March 14, 2004

Very nice!

I had to change the box header text .css style, it's set in catalog/includes/classes/boxes.php about line 122

cheers,

EricK :P

JuxiZoza · March 14, 2004

I had to change the box header text .css style, it's set in catalog/includes/classes/boxes.php about line 122

What did you change it to? Could be due to another contribution or version.

The changes (and line #) I gave are for a clean 2.2ms2 installation. The only thing being done is turning the text into a link. osCommerce uses the 'BOX_HEADING_xxx' the same as it aways does, but the text is now a link.

EricK · March 15, 2004

The info box heading text is defined by class="infoboxHeading", however if you've changed the color scheme you may need to define new classes in stylesheet.css:

.infoboxHeading A {

.infoboxHeading A:hover {

Anyway, that's what I did because my infoBox bg is dark blue, and the link color was too dark.

HTH,

EricK

JuxiZoza · March 15, 2004

Gotcha, makes sense now.

March 19, 2004

I made this tweak and it works great, although there is a very very strange thing appeared.

Above the first letter of each linked title are 3 little dots in a half arc.

You can see what I mean here, any ideas what has caused this?

rsjparts · April 1, 2004

Hi-

I was just trying this out and it went well!

In this vein, I'd like to have the word 'categories' be linked to a page with all the categories on it. Do I have to create this new page or is there some way I can make the filename_product_info link do what I'd like?

Here's what I have:

// categories box text in includes/boxes/categories.php
define('BOX_HEADING_CATEGORIES', '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO) . '">' . 'Categories' . '</a>');

here's the page I'm working on:

My page

There will probably be 10-12 listings under categories, I just thought having a full page of them might be easier to navigate.

Thanks!

cdamianou · April 14, 2004

Hi

I tried doing the above but i get an undefined error. I thought i did something wrong. I tried again, same problem.

Can anyone help me?

Crags · May 14, 2004

I made this tweak and it works great, although there is a very very strange thing appeared.

Above the first letter of each linked title are 3 little dots in a half arc.

You can see what I mean here, any ideas what has caused this?

Hi hotnuts

I'm not sure if you've sorted this out or not, but what it LOOKS like is happening, is that the first letter of your word is using a background image of your top left box. Effectively putting your curly bit behind the letter. The 3 dots you can see is where the transparency is and the matte colour is set to the background - so basically you can see where the image would be trying to "blend" to the background matte.

Hope that makes sense. If you check your CSS for the one your header text is using, make sure it doesn't have a background on it.

:huh:

tayl1684 · June 8, 2004

Hi

did the above and modified it for and infobox header image eg

define('BOX_HEADING_SPECIALS', '<a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . '<img src="images/infobox/Specials.gif">');

Works great, the only problem is that i get a border around the header image, anyone got any ideas how to get rid of this?

Cheers

Ian

6.2k · June 8, 2004

Hi

did the above and modified it for and infobox header image eg

define('BOX_HEADING_SPECIALS', '<a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . '<img src="images/infobox/Specials.gif">');

Works great, the only problem is that i get a border around the header image, anyone got any ideas how to get rid of this?

Cheers

Ian

use borders=0 for the image

the border is only produced by certain browsers

cdamianou · June 8, 2004

When i do the following

file = catalog\includes\languages\english.php

====================================

line = 79

replace:

define('BOX_HEADING_WHATS_NEW', 'What\'s New?');

with:

define('BOX_HEADING_WHATS_NEW', '<a href="' . tep_href_link(FILENAME_PRODUCTS_NEW) . '">' . 'What\'s New? »' . '</a>');

I get the following error:

Fatal error: Call to undefined function: tep_href_link() in /home/damianou/public_html/includes/languages/english.php on line 81

Can anyone help?

Thanks

gazzzzzza · June 8, 2004

about the categories thing

i dont see why you have it linking to product info page but anyways

i suggest making a new page called categories_list.php or something and link to that

include all the headers/footer/columns left&right etc then just do a simple query to get all the categories from the database and their ids

use the id to create the links as oscommerce does fromt eh categories box on the left

it should work fine

tayl1684 · June 8, 2004

Thanks for you reply Steve.

Couldnt get borders=0 to work but border="0" did, Just incase anyones interested.

Pointed me in the right direction though, so thanks a lot.

Cheers

Ian

cdamianou · July 11, 2004

Any solutions to my problem?

oakhill · July 12, 2004

Just wondering how to change the colours of the links. Its all working fine but I need to change the box header .css style and EricK did mention previously that you may need to define new classes in stylesheet.css - that I can do but I am wondering where it needs to be changed in catalog/includes/classes/boxes.php. I have tried a few times but no success!!

Thanks

gazzzzzza · July 12, 2004

cdamianou

guessing that the includes/functions/html_output.php file has not been included at this time which is why it does not know what to do with the function tep_href_link. i am pretty sure the function is in output_html.php so I suggest putting an include of that file in before you attempt to use the function.

I could be wrong though!

wiredkiwis · September 14, 2004

This is a great tip it works a treat.

thanks to JuxiZoza for it, I'm a newb to this so its great to see those handy hints flying around :)

(didn't use the »)

I ended up keeping the side image but turned it into a [questionmark] ?

works for me.

thanks also to EricK for pointing out the css change.

made life a whole lot easier

sinryder · September 17, 2004

hello guys , i have followed all the instructions and its working fine , but i can get rid of the arror next to the text . like this

Shopping Cart ?
Specials ?

Revies ?

also my text for these three headings is now in Black color. All other are in White.

any help is greatly apprecaited.

thankyou

November 15, 2004

The info box heading text is defined by class="infoboxHeading", however if you've changed the color scheme you may need to define new classes in stylesheet.css:

.infoboxHeading A {

.infoboxHeading A:hover {

Anyway, that's what I did because my infoBox bg is dark blue, and the link color was too dark.

HTH,

EricK

<{POST_SNAPBACK}>

EricK (or anyone in the know)

just done the changes and have the same "problem" as you had with the dark background. Obviously i don't have the same brains to do the same changes as you have suggested above. How/where would i define these new classes?

Thanks for your help

Lev

EricK · November 16, 2004

I added this to stylesheet.css to make the box header links white on a dk red background, with a subtle effect on mouseover.

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 font-weight: bold;
 background: #990000;
 color: #ffffff;
 vertical-align: top;
}

.infoboxHeading a:active {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #FFFFFF;
 background: #990000;  
 vertical-align: top;
 text-decoration: none;
}

.infoboxHeading a:link {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #FFFFFF;
 background: #990000;  
 vertical-align: top;
 text-decoration: none;
}

.infoboxHeading a:visited {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #FFFFFF;
 background: #990000;  
 vertical-align: top;
 text-decoration: none;
}

.infoboxHeading a:hover {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #D7E9F7;
 background: #990000;  
 vertical-align: top;
 text-decoration: none;
}

Someone can probably condense it, but it works for me. Another css tip is define <H1> as follows, removing the huge text effect.

H1 {
font-size: 100%; 
font-weight: normal; 
font-style: normal 
}

Cheers,

EricK

November 26, 2004

http://www.oscommerce.com/community/contri...,infobox+header

Add one line of code to includes/classes/boxes.php and you're done...no CSS edits or anything else. Just one line of code to add. The most simple mod for osC.

bivie · April 30, 2005

http://www.oscommerce.com/community/contri...,infobox+header

Add one line of code to includes/classes/boxes.php and you're done...no CSS edits or anything else. Just one line of code to add. The most simple mod for osC.

<{POST_SNAPBACK}>

I have changed the code as outlined in the beginning of this thread. If I use the above contribution do I change the code back to the orginal or just leave it as is?

dantefoxfox · May 5, 2005

use borders=0 for the image
the border is only produced by certain browsers

<{POST_SNAPBACK}>

Please, where is to insert border="0"?

A Cool Tip ? Clickable InfoBox Header Text

Recommended Posts

JuxiZoza

jenso

EricK

JuxiZoza

EricK

JuxiZoza

Guest

rsjparts

cdamianou

Crags

tayl1684

241

cdamianou

gazzzzzza

tayl1684

cdamianou

oakhill

gazzzzzza

wiredkiwis

sinryder

Guest

EricK

Guest

bivie

dantefoxfox

Archived

Browse

Activity