Add text hover-over
-
Is there a way to add a text hover-over to the “+” comment icon to say “Add a comment”? i’m getting feedback that people didn’t know where to leave comments.
-
Do you have a Child Theme set up?
yes, i do!
Copy
sidebar.phpfrom the Spun theme and paste it into your Child Theme folder.Then replace all of the contents of your Child Theme sidebar.php file with the code from this PasteBin page: http://pastebin.com/AUvy24Z1 .
Do you want to add some CSS to make the circle fit the “Add a comment” text?
I did the above and it added a “Add a comment” to the “+” on the homepage but I wanted it to be displayed as a text hover-over in individual blog post pages instead.
like this page for example:
http://theartofmotherhood.com/2013/09/09/hello-world/I forgot you said that, sorry. Regarding the CSS you can still add CSS to your Custom CSS plugin if you want to.
so should i delete the sidebar.php copied from the pastebin and start again?
I’ve updated the PasteBin page, could you use that code instead for the sidebar.php file?
Then add this CSS:
.sidebar-link span { display: none; } .sidebar-link:hover span { display: block; }ok, i repasted and added the above to Custom CSS plugin. but it’s still showing up with the blue “+” at the bottom center instead of the gray “+” at the right right.
Sorry I meant this Pastebin code: http://pastebin.com/bUnc1BHc
i wonder if i’m doing something wrong, bc i pasted it in, but the “Add a comment” text is still showing up under the wrong button (it appears on the blue “+” but it should appear for the gray “+” button only).
That’s my fault for looking at the wrong +
Remove sidebar.php from your Child Theme.
Copy
content-single.phpfrom Spun and paste it into your Child Theme.ok – done. i thought i was going nuts there for a second. thanks again for all your help, andrew. you’ve been a godsend!
what do i do next? also, is there a way to have the text fit into the circle?
Replace the code from your
content-single.php(Child Theme) with this: http://pastebin.com/21Y15UhcThen add this CSS:
.comments-link .tail { text-indent: -9999em; } .comments-link a:hover .tail { text-indent: 0; }
The topic ‘Add text hover-over’ is closed to new replies.
