Hover box make hyperlink like read more for posts

Hi,

Simply insert the button with the link to your concrete post page. Make sure that you use the correct link to the post from the live site.

Sincerely,
Hella

Hello,

I have a similar question regarding the hover box.

I'm using hover box for my blog template. And I'd like to use the whole over slide as a button to go to the post. It should react the same way like the default behavior of the "Post Header" component. When I click here, it leads me directly to the connected post.

Is it possible to configure the over slide of the hover box to do the same thing like the post header link? I don't want to add the specific links manually. Wouldn't make sense anyway for a CMS.

Thank you very much for your help in advance!

Kind regards,
Robert

Hi Robert,

Hover Box is a simple html control. This is container for other controls and it has no connection to CMS. Therefore there is no easy way to achieve this except adding Post image to the hover slide. Post Image is an image link to the article.
To navigate the CMS article you need to place something to the hover slide which will navigate to the article. In other words you need a link to the article.

As a possible solution you can place CMS Code control (Insert tab >> More) on the hover slide and add the following code:

<?php if (isset($data['header-text']) && strlen($data['header-text'])) : ?>
<?php if (isset($data['header-link']) && strlen($data['header-link'])) : ?>
<a <?php echo funcBuildRoute($data['header-link'], 'href'); ?>>
<?php echo $data['header-text'];?>
</a>
<?php else: ?>
<?php echo $data['header-text']; ?>
<?php endif; ?>
<?php endif; ?>

This code creates a link to the article.
Bu removing <?php echo $data['header-text'];?> line you can create empty link.
This empty link can be stretched to the whole size of the CMS Code control:
< a style="display: block; width: 100%; height: 100%" <?php echo funcBuiltRoute...
The control itself should be stretched the the whole size of the hover slide.

Thank you,
Olivia

Hi Olivia,

thank you very much! I tried to use and edit the script, but it doesn't work for my purposes.

In general it works. But now the hover effect from the hover box is no longer working. When I move the mouse over the Post image, I can click it, but no hovering effect at all.

Could you please tell me, what commands I have to add to the script to bring back the hover effect?

Thanks a lot,
Robert

Hi,

The solution works just fine on my side. I've added a CMS Code control to the hover slide.
Could you please attach the theme with provided solution so we can check it on our side? If you do not want to attach it here please create new Private topic.

Thank you,
Olivia

Last edited 11 January 2017 by Support Team

Hi Olivia,

I've done the steps you've mentioned again and now it ist working. Thank you very much for your code!

Unfortunately I have another question regarding the hover box: If the mouse cursor is above the box with the Post Header the Over Slide appears. Do you have an idea, how to implement the same functionality to the Post Image? It would be great if the Over Slide also appears, if I move the mouse cursor over the Post Image. I think I've had this functionality already, but now it is gone.

All the best,
Robert

Hello Robert,
you may add the HoverBox control inside the Posts control. Locate the Post header control on the Back Slide of the Hover Box and locate the Post Image control on the Over Slide.

Regards,
Aileen

Hello Aileen,

your solution sounds very logic. But I have no idea how to do that in Themler.
Could you please be so kind and post screenshots to show how to perform the steps in your answer.

Thank you very much in advance!

All the best,
Robert

Hello Robert,
you may apply one of predefined layouts to Blog for testing and check the settings of Hover Box

Regards,
Aileen