WordPress.org

Forums

Spun
[resolved] Add text hover-over (22 posts)

  1. sillypad
    Member
    Posted 1 year ago #

    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.

  2. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Do you have a Child Theme set up?

  3. sillypad
    Member
    Posted 1 year ago #

    yes, i do!

  4. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Copy sidebar.php from the Spun theme and paste it into your Child Theme folder.

  5. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    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?

  6. sillypad
    Member
    Posted 1 year ago #

    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/

  7. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    I forgot you said that, sorry. Regarding the CSS you can still add CSS to your Custom CSS plugin if you want to.

  8. sillypad
    Member
    Posted 1 year ago #

    so should i delete the sidebar.php copied from the pastebin and start again?

  9. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    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; }
  10. sillypad
    Member
    Posted 1 year ago #

    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.

  11. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Sorry I meant this Pastebin code: http://pastebin.com/bUnc1BHc

  12. sillypad
    Member
    Posted 1 year ago #

    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).

  13. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    That's my fault for looking at the wrong +

  14. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Remove sidebar.php from your Child Theme.

    Copy content-single.php from Spun and paste it into your Child Theme.

  15. sillypad
    Member
    Posted 1 year ago #

    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?

  16. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Replace the code from your content-single.php (Child Theme) with this: http://pastebin.com/21Y15Uhc

    Then add this CSS:

    .comments-link .tail { text-indent: -9999em; }
    
    .comments-link a:hover .tail { text-indent: 0; }
  17. sillypad
    Member
    Posted 1 year ago #

    ok - that works for the right + button but the text appears when you hover over and then it disappears. can we make the text stay on the screen without disappearing?

  18. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    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/dwaNhJh0

    Then add this CSS (instead of previous CSS):

    .comments-link a { text-indent: -9999em; }
    
    .comments-link a:hover {
     min-height: 5em;
     width: 6em;
     padding-top: 1em;
     border-radius: 100%;
     text-indent: 0;
    }
  19. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    can we make the text stay on the screen without disappearing?

    Replace the CSS from my previous post with this:

    .comments-link a {
     min-height: 5em;
     width: 6em;
     padding-top: 1em;
     border-radius: 100%;
     text-indent: 0;
    }
  20. sillypad
    Member
    Posted 1 year ago #

    awesome. almost done!
    there's a small triangle below the Add a comment circle. does that have to be there?

    http://theartofmotherhood.com/2013/09/09/hello-world/

  21. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    That once was the tail of the speech bubble and that will need to be re-positioned with some more CSS:

    .comments-link .tail {
     top: 48%;
     left: 40%;
    }
  22. sillypad
    Member
    Posted 1 year ago #

    looks great - thanks andrew!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.