I think you can do this in CSS. Add in your style sheet the following:
li.post-comments-count, li.post-comments-add{display:inline;}
Try it and see if it will result in what you want. And, is the image set as a background for the list item with class “post-comments-add”?
Thread Starter
staren
(@staren)
I think that will work, but this is a pretty complex theme. Here is the relevant CSS. Yes the add comment image is set as a background to the “post-comments-add” class. An example of what I want to change can be seen at http://www.morawski.us As you can see it wants to throw the add comment link to a new line obviously because of the use of the individual li tags.
#content .post-comments {
float: right;
background: url("../images/post-comments-left.gif") no-repeat 0 0;
}
#content .post-comments ul {
float: left;
width: 100%;
margin: 0;
padding: 8px 0;
background: url("../images/post-comments-right.gif") no-repeat 100% 0;
}
#content .post-comments ul li {
float: left;
margin: 0;
padding: 0;
background: none;
}
#content .post-comments li.post-comments-count {
margin: 0 10px 0 14px;
}
#content .post-comments-count a:link, #content .post-comments-count a:active, #content .post-comments-count a:visited {
color: #666;
font-weight: bold;
border-bottom: 0;
padding-right: 22px;
background: url("../images/post-comments-bubble.gif") no-repeat 100% 0;
}
#content .post-comments-count a:hover {
color: #333;
}
#content .post-comments li.post-comments-add {
position: relative;
display: block;
width: 16px;
height: 16px;
margin: 0 8px 0;
padding: 0;
overflow: hidden;
}
#content li.post-comments-add span {
position: absolute;
width: 100%;
height: 100%;
background: url("../images/post-comments-add.gif") no-repeat 0 0;
}
#content li.post-comments-add a {
text-decoration: none;
}
Try the following:
1. Add display: inline;
to:
#content .post-comments li.post-comments-count {
margin: 0 10px 0 14px;
}
2.Change display: block;
to display:inline;
here:
#content .post-comments li.post-comments-add {
position: relative;
display: block;
width: 16px;
height: 16px;
margin: 0 8px 0;
padding: 0;
overflow: hidden;
}
Thread Starter
staren
(@staren)
Not perfect, but better. Thanks alot. It fixed the problem with the add comment link being thrown to a new line. Now I just need to fix the error of the entire comment link set-up being thrown to a new line. What I want is the post date and time on one side of the content space and the comment links on the other. Not sure how to do that. I made the changes you posted and here is the code in the theme:
<div class="post-comments">
<ul>
<li class="post-comments-count"><a href="#comments" title="View all <?php comments_number('0', '1', '%'); ?></a></li>
<li class="post-comments-add"><a href="<?php the_permalink() ?>#respond" title="Add a Comment"><span> </span>Add a Comment</a></li>
</ul>
</div>
I trued removing just the ul tags, but that messes up the images. Thanks for all the help.
In your style sheet, the post date and time are within the div with class post-author
. This div has a width of 70%:
.post-author {
float: left;
width: 70%;
margin-bottom: 1.4em;
}
Remove width: 70%;
and see what happens.
Thread Starter
staren
(@staren)
That did the trick. I would not have even considered looking there. Thanks for going through this with me.