Please help with information box CSS

[mondobongo3]

I added a information box to a STS webpage and I want to make the active links to show bold. I made that in css, But the text is bolded only when the mouse button is pressed over it. After the page (shipping.php ,privacy.php, conditions.php or contact_us.php), the text from link returns to normal.

 

I guess that happens because of the redirects inside each accessed page. So, how can this be tricked and set (dynamically ?) a CSS bold property to active link?

 

Thanks.

[Guest]

I added a information box to a STS webpage and I want to make the active links to show bold. I made that in css, But the text is bolded only when the mouse button is pressed over it. After the page (shipping.php ,privacy.php, conditions.php or contact_us.php), the text from link returns to normal.

 

I guess that happens because of the redirects inside each accessed page. So, how can this be tricked and set (dynamically ?) a CSS bold property to active link?

 

Thanks.

There are 4 stages to the css link.

 

a:link -> Defines the style for normal unvisited links

a:visited -> Defines the style for visited links

a:active -> Defines the style for active links. A link becomes active once you click on it

a:hover -> Defines the style for hovered links. A link is hovered when the mouse moves over it

 

If you want the link to be bold when you first load the page, add it to the a:link section.

[mondobongo3]

There are 4 stages to the css link.

 

a:link -> Defines the style for normal unvisited links

a:visited -> Defines the style for visited links

a:active -> Defines the style for active links. A link becomes active once you click on it

a:hover -> Defines the style for hovered links. A link is hovered when the mouse moves over it

 

If you want the link to be bold when you first load the page, add it to the a:link section.

Thanks, but I know that, I've done that... that is why the link gets bolded when the mouse button is pressed, i guess... but I have no idea how the browser decides when the link is active.

The problem is that the link goes back to normal text after I release the mouse. So, here is something more than CSS.

 

Waiting for better answer.

[mondobongo3]

Maybe I express myself in a difficult way? I'm sorry if that is the problem, my english is not so good. I'll try again:

I am using STS (last version) and on right column I added $informationbox placeholder, which creates a box with several links (text): Shipping & Returns, Privacy Notice, Conditions of Use, Contact Us.

I want that text to be displayed bold, when the user is on that page, so in my template\boxes directory I made that file

infobox_information.php.html

<div class="infobox_heading">$headertext</div>
<div class="infobox_content" id="information">$content</div>

then the CSS:

#information a:active{font-weight:bold;}

But is not working !! The link gets bolded only when the mouse button is pressed over that link. My guess is that I should do some kind of trick somewhere in PHP, like is done in categories.php, where <b> tag is added dynamically to selected category.

The website is not yet online, so I can not show you what is all about.

 

Please give me a clue. Thank you.

[multimixer]

With what you do, in the best case you will achieve to get all content of the informationbox to be bold. How should the whole box know what page you are on? How can it ever be the case that te $content tag is active? It's not even a link. But again, whatever you set gets overwritten by other css setings that get applied later, when the $content tag is filled by the actual content of the information box

 

Your issue is not related to STS in the stage you are now, and you have 2 ways to go

 

1) You pick and alter the file includes/boxes/information.php. You will see that it is nothing else that a collection of links. Apply css to this links

2) You place the links to the infopages directly into your template and don't use a box at all. You can read here about how to create links in STS, its about products and categories, but you can easily change this by putting FILENAME_SHIPPING instead of the category path

[mondobongo3]

Well, the more I try, the stranger it becomes... I've done like this:

 

catalog\includes\template\boxes\infobox_information.php.html

<div class="infobox_heading">$headertext</div>
<div class="infobox_content">
<br>
<?php
echo '<a href="' . tep_href_link( FILENAME_SHIPPING ) . '">' . BOX_INFORMATION_SHIPPING . '</a><br>';
echo '<a href="' . tep_href_link( FILENAME_PRIVACY ) . '">' . BOX_INFORMATION_PRIVACY . '</a><br>';
echo '<a href="' . tep_href_link( FILENAME_CONDITIONS ) . '">' . BOX_INFORMATION_CONDITIONS . '</a><br>';
echo '<a href="' . tep_href_link( FILENAME_CONTACT_US ) . '">' . BOX_INFORMATION_CONTACT . '</a>';
?>
<br><br>
</div>

 

and the CSS:

.infobox_content a:active {font-weight:bold;}

But the link gets bolded only as long as I keep the mouse button pressed. In the moment I let down the button, the selected page is loaded and when I see the text link again, is normal, not bolded :blink:

[multimixer]

Mondo, again you do some strange things, no wonder that they don't work

 

1) Having an STS template file, like infobox_information.php.html, you are in a plain html environment. You could type in "hello all" without any quotes, echos, escapes, and you'll see it in the site. The connection to the php are the tags ie $content and php tat is recommended to use if using some functions like the tep_href_link

 

So, you don't need to start complete php sections, you just use php wherever it is necessary.

 

For example, in my footer.php.html file, where I have the links to the infopages, they look like this

       <ul>
         <li><a href="<?php echo tep_href_link(FILENAME_DEFAULT, '', 'NONSSL'); ?>" ><?php echo(LINK_INDEX); ?></a></li>          
         <li><a href="<?php echo tep_href_link(FILENAME_ABOUT, '', 'NONSSL'); ?>" ><?php echo(LINK_ABOUT); ?></a></li>
         <li><a href="<?php echo tep_href_link(FILENAME_CONDITIONS, '', 'NONSSL'); ?>"><?php echo(LINK_CONDITIONS); ?></a></li>          
         <li><a href="<?php echo tep_href_link(FILENAME_PRIVACY, '', 'NONSSL'); ?>"><?php echo(LINK_PRIVACY); ?></a></li>          
         <li><a href="<?php echo tep_href_link(FILENAME_SHIPPING, '', 'NONSSL'); ?>"><?php echo(LINK_SHIPPING); ?></a></li>          
         <li><a href="<?php echo tep_href_link(FILENAME_SITEMAP_SEO, '', 'NONSSL'); ?>"><?php echo(LINK_MAP); ?></a></li> 
       </ul>         

The whole thing is wrapped into

<div id="footer">

and the css to it looks like

#footer A:link, #footer A:visited { text-decoration: none; color: #bbbbbb; }
#footer A:hover, #footer A:active { color: #ee9f01; }

 

Other way is o apply the css directly to the link in that way

<a href="<?php echo tep_href_link(FILENAME_DEFAULT); ?>" class="LinSt1" ><?php echo(LINK_INDEX); ?></a>   

and the css

a.linSt1, a.linSt1:link, a.linSt1:visited {text-decoration: none;color: #00FF00;}
a.linSt1:hover, a.linSt1:active { color: #372000; }

You can ofcourse separate the 4 link stages and apply anything you want.

 

You see hat I don't use a box at all

 

2) If you want to stick with the box model, then there is no need to repeat the links in a new file, you just go to file includes/boxes/information.php and apply css to each link

'<a href="' . tep_href_link(FILENAME_PRIVACY) . '" class="LinSt1">' . BOX_INFORMATION_PRIVACY . '</a>' .

[mondobongo3]

Well, I did as you said:

<div class="infobox_content">
<a href="<?php echo tep_href_link(FILENAME_SHIPPING, '', 'NONSSL'); ?>" ><?php echo(BOX_INFORMATION_SHIPPING); ?></a><br>
<a href="<?php echo tep_href_link(FILENAME_PRIVACY, '', 'NONSSL'); ?>" ><?php echo(BOX_INFORMATION_PRIVACY); ?></a></li><br>
<a href="<?php echo tep_href_link(FILENAME_CONDITIONS, '', 'NONSSL'); ?>"><?php echo(BOX_INFORMATION_CONDITIONS); ?></a><br>
<a href="<?php echo tep_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo(BOX_INFORMATION_CONTACT); ?></a>
</div>

I also tried to embed the class in each link and apply directly to it. Same thing: when mouse button is pressed, the sis bold, but when page is loaded, the text becomes normal.

I forgot to mention that a:hover worked each time, my links got bolded on hover.

[multimixer]

Well, then maybe you try to apply something like this

 

<?php if (basename($_SERVER['PHP_SELF']) === FILENAME_SHIPPING) { ?>
     Link to be like this
<?php } else { ?>
     Link to be like that
<?php } ?>

 

if you work in the template

[Guest]

Well, the more I try, the stranger it becomes... I've done like this:

 

catalog\includes\template\boxes\infobox_information.php.html

<div class="infobox_heading">$headertext</div>
<div class="infobox_content">
<br>
<?php
echo '<a href="' . tep_href_link( FILENAME_SHIPPING ) . '">' . BOX_INFORMATION_SHIPPING . '</a><br>';
echo '<a href="' . tep_href_link( FILENAME_PRIVACY ) . '">' . BOX_INFORMATION_PRIVACY . '</a><br>';
echo '<a href="' . tep_href_link( FILENAME_CONDITIONS ) . '">' . BOX_INFORMATION_CONDITIONS . '</a><br>';
echo '<a href="' . tep_href_link( FILENAME_CONTACT_US ) . '">' . BOX_INFORMATION_CONTACT . '</a>';
?>
<br><br>
</div>

 

and the CSS:

.infobox_content a:active {font-weight:bold;}

But the link gets bolded only as long as I keep the mouse button pressed. In the moment I let down the button, the selected page is loaded and when I see the text link again, is normal, not bolded :blink:

Did you read my original reply?

a:active -> Defines the style for active links. A link becomes active once you click on it

If you want the link to be bold at all times, add font-weight: bold; to the rest of the link properties.

[mondobongo3]

Did you read my original reply?

 

If you want the link to be bold at all times, add font-weight: bold; to the rest of the link properties.

I read your original reply and I want the link to be active as long as I am on the link's page. If I click on Contact Us, I want that Contact Us text to be bold ONLY as long as I am on contact us page. So, YES a:active is what I need. What you don't understand is that doesn't work as expected !

I'll try multimixer's suggestion/trick, because "legit" ways seems to not work :(

[multimixer]

If I click on Contact Us, I want that Contact Us text to be bold ONLY as long as I am on contact us page. So, YES a:active is what I need.

 

 

The four links states are:

 

a:link - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

 

Thats from w3schools

 

What you want is out of the possibilities for css styling. A link is active in the moment I press on it after that it's either link or visited.

 

Use the if/else I explained before