Next and Previous Button customization
Permalink
(1.) Is there a way to automatically remove the "Previous" button if it is the first page (since there is nothing previous to page 1)?
(2.) Through some super-tricky CSS, I was able to customize the Next and Previous Button solution well enough to suit my needs, but I was wondering if there's an easier way to separate the Next button from the Previous button so that they are not echoed together in one wrapper.
I'd like to embed each button individually: Previous button on the left side, a bunch of content in the middle, and Next button on the right side.
just curious...
below is what I did to achieve this:
TEMPLATE:
CSS:
Basically, the CSS hides one of the buttons on either side, but both sides are really spitting out 2 buttons each. Each pair of buttons is in their own div and floated to the left and right of the center content.
(2.) Through some super-tricky CSS, I was able to customize the Next and Previous Button solution well enough to suit my needs, but I was wondering if there's an easier way to separate the Next button from the Previous button so that they are not echoed together in one wrapper.
I'd like to embed each button individually: Previous button on the left side, a bunch of content in the middle, and Next button on the right side.
just curious...
below is what I did to achieve this:
TEMPLATE:
<!-- PREVIOUS BUTTON-->
<div id="prevButton">
<?php
$bt = BlockType::getByHandle('next_previous');
$bt->controller->showArrows =0;
$bt->controller->loopSequence=1;
//$bt->render('templates/footer_bar');
$bt->render('view');
?>
</div>
<div id="main-col-portfolio"><!--reduce main area since we will have an arrow on either side-->
<!-- MAIN EDITABLE AREA-->
<?php $a = new Area('Main'); $a->display($c); ?>
</div>
<!-- NEXT BUTTON-->Viewing 15 lines of 24 lines. View entire code block.
CSS:
#main-col-portfolio { width:845px; float:left; padding:20px 0; } #prevButton { width:50px; float: left; } #nextButton { width:50px; float: left; } .ccm-next-previous-wrapper { height:30px; overflow:hidden;} #nextButton .ccm-next-previous-wrapper .ccm-next-previous-previouslink { display:none; } #nextButton .ccm-next-previous-wrapper .ccm-next-previous-nextlink { margin-top:-20px; }
Basically, the CSS hides one of the buttons on either side, but both sides are really spitting out 2 buttons each. Each pair of buttons is in their own div and floated to the left and right of the center content.
