One of Firefox's default styles is to put a dotted line border around active links. For many sites this is not an issue, and can even be helpful to the user, making it clear when they have clicked on a link. However, with some sites, especially when using images as links in the nav, it can look really ugly. To get rid of the dotted borders use the following CSS:
a:active, a:focus {outline: 0;}
This article covers using the global parameter $paged and the query $wp_query->max_num_pages; to create custom navigation links for previous and next posts. For some reason wordpress treats posts in the past as "next" and posts in the future as "previous" as explained in this exerpt from the WordPress website:
Read on…
Thanks for this interesting technique. I finally realized, though, that this works only for “paged” templates, like the index and categories and tag pages. Can you suggest a technique to use on single-post templates?
I understand that some of this functionality is built in to the next_post_link and previous_post_link tags already, but it is still difficult to make one of them go away if you are using them with nested divs or other complicated bits of CSS — because you don’t have direct access to the anchor tag. Any suggestions for crafting an equivalent “if” statement that will make the previous or next link not show when not needed on a single-post page?
Also, how much of a performance hit will the $wp_query call cause in the above code?
Hi Gus
With the next_post_link / previous_post_link functions you should use the ‘format’ parameter to keep your divs from displaying when the link is not needed. For example:
<div id="post_nav">
< ?php next_post_link('%link', 'Next Post'); ?>
</div>
will still display the div. While:
< ?php
$post_link_format='<div id="post_nav">%link</div>’;
next_post_link($post_link_format, ‘Next Post’); ?>
would only show the div when the link is needed.
Excellent writeup. Another suggestion: if you’re looking for a quick way to fade out elements that are disabled, consider adding a class to your disabled links (i.e. “.disabled”) and then controlling the functionality with jQuery (i.e. jQuery(”a.disabled”).fadeTo(”fast”, .2).removeAttr(”href”);). Thanks a ton.
where these changes will be made, i mean in which file, cofig.php or single post.php etc
do you have a solution that shows page number
offering a direct navigation to the fifth, sixth page?
Privacy Policy | Site powered by WordPress | 76 digital remix by Sam Burdge | © 2012 Sam Burdge
Thanks for the tip. That's been a peeve of mine for some time!
Thanks! That worked like a breeze
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes - examles
http://css-lessons.ucoz.com/link-css-examples-1.htm
http://css-lessons.ucoz.com/link-css-examples-2.htm
where do you plug that code into? i’m trying it on the css style and it’s not working
Thanx a lot!!
M using Object tag but outline Rocks!!!!!
thanks! First search and found exactly what I was looking for!
@skyler
where you’d put all your link attribute styles is where that code will go.
ie. a:link {}
a:visited {}
a:hover {}
a:link, a:focus { outline: none;}
this sits wherever you logically decide to put the code. Stick it with the rest of your tag selectors.
thanks very much for the tip!!