Forums

next-previous block - button styling

Permalink
i installed this template for the "next-previous" block which gives me arrow buttons instead of text.

for some reason the button does not trigger the link when hovering over the circled button (A) , - only when hovering over the arrow itself (B).

i want the behavior like a normal button.

what am i missing here?

thank you all for inputs.

my next previous block template:
<?php defined('C5_EXECUTE') or die("Access Denied.");
$nh = Loader::helper('navigation');
$previousLinkURL = is_object($previousCollection) ? $nh->getLinkToCollection($previousCollection) : '';
$parentLinkURL = is_object($parentCollection) ? $nh->getLinkToCollection($parentCollection) : '';
$nextLinkURL = is_object($nextCollection) ? $nh->getLinkToCollection($nextCollection) : '';
$previousLinkText = is_object($previousCollection) ? $previousCollection->getCollectionName() : '';
$nextLinkText = is_object($nextCollection) ? $nextCollection->getCollectionName() : '';?>
<?php if ($previousLinkURL || $nextLinkURL || $parentLinkText): ?>
 <div class="ccm-block-next-previous-wrapper"> 
  <?php if ($previousLinkText): ?>    
  <span class="ccm-block-next-previous-previous-link btn btn-blanca">
  <?php echo $previousLinkURL ? '<a href="' . $previousLinkURL . '">' . ' < ' . '</a>' : '' ?> </span><?php endif; ?>
  <?php if ($parentLinkText): ?>
  <span class="ccm-block-next-previous-parent-link">
  <?php echo $parentLinkURL ? '<a href="' . $parentLinkURL . '">' . $parentLinkText . '</a>' : '' ?></span><?php endif; ?>
Viewing 15 lines of 20 lines. View entire code block.



my css:
.btn-blanca {
     display: inline-block;
     color: #666;
     background-color: #fff;
     border-color: #666;
     border-radius: 50%;
     padding: 5px 12px;
     margin: 30px 30px 0px 0px;
     line-height: 1;
     font-size: 28px;
     }
     .btn-blanca:hover,
     .btn-blanca:focus,
     .btn-blanca:active,
     .btn-blanca.active,
Viewing 15 lines of 20 lines. View entire code block.

1 Attachment

kfog
 
hutman replied on at Permalink Reply
hutman
Move your button styles to the a tag instead of the span tag.
kfog replied on at Permalink Reply
kfog
thank you hutman,-
it did not do the trick, - i tried a couple things with changing to <a>-tag.
it must be something else, probably in preceeding css.
hutman replied on at Permalink Reply
hutman
If you could provide a URL to see this it would be much easier to help.
kfog replied on at Permalink Reply
kfog
hi hutman

here's da URL:
http://blancablarer.ch/cms/index.php/projekte/Der-doppelte-Blick...

scroll to bottom, where the next-previous buttons are.

thank you for your input
keith
hutman replied on at Permalink Reply
hutman
I think you can achieve this by removing the classes "btn btn-blanca" from your span and then adding this CSS to your stylesheet

div.ccm-page .arrows-bottom .ccm-block-next-previous-wrapper span{
   display: inline-block;
   margin: 30px 30px 0px 0px;
   line-height: 1;
   border: none !important;
}
div.ccm-page .arrows-bottom .ccm-block-next-previous-wrapper span a,
div.ccm-page .arrows-bottom .ccm-block-next-previous-wrapper span a:visited{
   display: block;
   color: #666;
   border: 1px solid #666;
   border-radius: 50%;
   padding: 5px 12px;
   font-size: 28px;
}
Viewing 15 lines of 21 lines. View entire code block.
kfog replied on at Permalink Reply
kfog
hi hutman
thank you again for helping.
the site is now online, but i haven't figured out to insert your code correctly to make the button work as desired.
since 70% of the site's visitors are using a mobile devidce and are using a finger to navigate, it works just fine, so not to worry.

but perfection is our goal, so i tried many variations with your suggested code. the buttons remain the same or loose the styling.

where exactly do i have to place the new class ".arrows-bottom" shown in your code?

maybe you have another suggestion or somebody else might have an idea.
keith.
hutman replied on at Permalink Reply
hutman
You can put it inline in your view file, or in a view.css, or in your site's main stylesheet.