Posted 2 years ago #
Hello everyone,
Is there a way to add css tags into the previous_comments_link? I need to add a span tag into the mix. The aim is to create a scalable button with images in the hover state. I've had a look around but I've yet to find a solution. Any help would be greatly appreciated.
Thanks
Dirk
Posted 2 years ago #
Why not just put the code inside the HTML you want...
Example:
<div class="example">
<?php previous_comments_link(); ?>
</div>
Posted 2 years ago #
Thanks for getting back to me,
The problem is that I need to change 2 background images on the hover state of the link (one for the image positioned left of the link and another for the image positioned right). By setting up the CSS in this way the link can handle any text length and still have an image in the background. Traditionally I've used <a href="somewhere.html><span>link to somewhere</span></a> this allows me to style two elements (the <span> and the <a> tag) on the hover state but when trying to apply this to previous_comments_link the span sits on the outside of the a tag thus rendering it useless.
Posted 2 years ago #
I did it like this in the single.php :
<div class="navigationcontainerbottom">
<div class="containerbottomtextalignleft"><?php previous_post_link(' %link', '« Ouder bericht', TRUE); ?></div>
<div class="containerbottomtextalignright"><?php next_post_link(' %link', 'Nieuwer bericht »', TRUE); ?></div>
</div>Then this is in style.css:
.navigationcontainerbottom
{
padding: 0;
font-size: 7pt;
font-weight: bold;
text-align: center;
margin: 4px 30px 6px 20px;
line-height: 12px;
}
.containerbottomtextalignleft
{
float: left;
width: 110px;
}
.containerbottomtextalignright
{
float: right;
width: 110px;
}
Posted 2 years ago #
Thanks for your input henkholland,
But I dont think i'm explaining myself very well the code the php should produce would look like:
single.php (ignore the commers in the a tag!)
<div class="alignleft">'<a'><span>link to somewhere</span>'</a'></div>
style.css
.alignleft a:link{
position:relative;
float:left;
background:url(images/arrow.gif) top left no-repeat;
}.alignleft a:link span{
position:relative;
float:left;
background:url(images/arrow-back.gif) top left no-repeat;
}.alignleft a:hover{
position:relative;
float:left;
background:url(images/arrow-hover.gif) top right no-repeat;
}.alignleft span a:hover {
position:relative;
float:left;
background:url(images/arrow-hover-back.gif)top left no-repeat;
}
Posted 2 years ago #
OK try using...
<div class="purely_example"><?php echo get_previous_comments_link(); ?></div>
It's the manner in which the function operates, try the above function instead...
Posted 2 years ago #
Was the solution for this finished? I am also trying to replace the next and previous comments link text with images.
My comments.php refers to:
<?php next_comments_link() ?>
And I'd like to replace it with an image. t31os_'s suggestion may work but I'm not sure what the corresponding CSS should look like. Does anyone have a complete example of the php and the CSS?
Posted 2 years ago #
You could try the newer paginate comments links function.
http://codex.wordpress.org/Template_Tags/paginate_comments_links
Style classes are covered on that page.
All you have to do is apply CSS to those classes.. look at other classes in your stylesheet that use background images for examples.
Posted 2 years ago #
Something odd I noticed. My left arrow is part of the anchor text, but my right arrow is not! So the arrow styles are different!
The code:
<?php previous_post('%','« ','yes'); ?>
<?php next_post('% »','','yes'); ?>
The output:
<a href="XXXXXXXX">« Title of Previous Post</a> PERFECT!
<a href="XXXXXXXX">Title of Next Post</a> » ARGH!
Does anybody know where to place » to get it to be part of the anchor text on the right side of the post title???? I'd like it to be part of the link and not just decoration on the sides.
This topic has been closed to new replies.
