Custom Next/Previous navigation buttons
Permalink
Hello,
I'm currently in the process of "concretizing" my html site that requires very simple next/previous page navigation through two buttons on each side of the page. I've searched on here and on google about this but haven't found what I'm looking for. I found a similar post however I wasn't able to get my version to work:http://www.concrete5.org/community/forums/customizing_c5/next-and-p...
Basically I am trying to implement the Next/Prev default add-on's functionality into my own custom buttons that use images. I'll give an example of the code so that you can understand what my problem is.
HTML:
CSS:
Any help is greatly appreciated!
I'm currently in the process of "concretizing" my html site that requires very simple next/previous page navigation through two buttons on each side of the page. I've searched on here and on google about this but haven't found what I'm looking for. I found a similar post however I wasn't able to get my version to work:http://www.concrete5.org/community/forums/customizing_c5/next-and-p...
Basically I am trying to implement the Next/Prev default add-on's functionality into my own custom buttons that use images. I'll give an example of the code so that you can understand what my problem is.
HTML:
<div class="buttons"> <a href="#" class="prev" title="Previous Page"></a> <a href="#" class="next" title="Next Page"></a> </div>
CSS:
#container .left .buttons{float:left;height:0;padding:0;position:relative;margin:0 -20px 0 -22px;top:99px;width:680px;z-index:1;} #container .left .buttons a.prev{background:url('./images/buttons.png');float:left;width:55px;height:66px;} #container .left .buttons a:active.prev{background-position:0 -67px;} #container .left .buttons a.next{background:url('./images/buttons.png') -55px 0;float:right;width:55px;height:66px;} #container .left .buttons a:active.next{background-position:-55px -67px;}
Any help is greatly appreciated!
Wonderful, just what I was looking for! Thank you!
Thank you for your quick response, it was very detailed and easy to understand however I don't understand how I would go about actually implementing the new block into my actual site template. I'm sorry if I'm not able to explain myself clearly if you need more information please ask. Thanks again for the help.
The instructions I gave you above will make your custom template automatically override the next/previous nav's default template. So all you have to do (after following the steps above) is add the next/previous block to your page. Or if you already have them on pages, they should automatically be updated to reflect the change (if not, try clearing your site cache via Dashboard -> Sitewide Settings -> Clear Cache button).
Oh wait, I think I understand what you're asking -- how to get this to appear on every page automatically without having to add it as a block.
You could hard-code this block into your page type template, like so:
...or if that doesn't work for you, you could add the block to a global scrapbook, then include that global scrapbook block in your theme template like so:
You could hard-code this block into your page type template, like so:
<?php $nav = BlockType::getByHandle('next_previous'); $nav->controller->nextLabel = 'Next'; $nav->controller->previousLabel = 'Previous'; $nav->controller->parentLabel = 'Up'; //$nav->controller->linkStyle = 'page_name'; //Uncomment this line to use actual page titles for labels $nav->controller->showArrows = true; //$nav->controller->orderBy = 'chrono_desc'; //Uncomment this line to sort pages by most recent first (so "next" and "previous" links go in date order, not sitemap order) $nav->controller->loopSequence = false; //set to true if you want to "wrap around" (clicking "next" on the last item goes to first item, and vice-versa) $nav->controller->excludeSystemPages = true; //best to always leave this as true $nav->render('view'); ?>
...or if that doesn't work for you, you could add the block to a global scrapbook, then include that global scrapbook block in your theme template like so:
<?php Block::getByName('Name you gave to the block in the scrapbook')->display(); ?>
Your first answer was what I was looking for. I don't know if I was meant to or wasn't but since after making the new directory and putting the view files in there made no difference I decided to do exactly what you suggested with both the view.php and the view.css files except inside of the next_previous block directory overwriting the old ones and now it's working as I wanted it to. However thanks just as much for the second reply as that will save me a lot of time and I will be implementing that aswell! Thanks!
edit: Nevermind
1) Create a new directory in your site here:
SITE_ROOT/blocks/next_prev/
2) Copy these two files into that new directory:
SITE_ROOT/concrete/blocks/next_prev/view.php
SITE_ROOT/concrete/blocks/next_prev/view.css
3) Edit the new copy of the view.php file, change it all to something like this:
4) Replace the css in the new copy of view.css with your css
That should be all that's required! Note that you're intentionally leaving out the "up" button in your code, which means even if you add the block and choose to include that it will not show up.