Creating Leave Comment Button by CSS

  • Unknown's avatar
    alguzlan · Member ·

    In the press page (At the end of the menu) and for every post I would like to change the look of “Leave Comment” and to make it exactly as the sharing buttons in the individual post page (white box with gray frame) and then to make this button right alignment.

    Thank you for any help.

    The blog I need help with is: (visible only to logged in users)

  • staff-jeanpierreac · Staff ·

    Hi alguzlan.

    You can use genericons font (http://genericons.com/). In the example I used genericon-chat character, but you could take a look to check if there is any one else you like more.

    Your reply link is inside a div whose class is -comments-link, so the following code reuse for it parameters used in those sharing buttons. I have changed margin value to move a little bit upwards the comment pic (Otherwise, the image and “Posted in Road Safety Tagged Road Safety” text are not aligned). float:right is used to “make this button right alignment”. Finally, to hide current “leave a comment” text, it is used visibility:hidden and line-height:1

    Then the picture (f108 character ) is added to -comments-link:after with the same font-size the social buttons have.

    .comments-link
	{
         font-family: 'Genericons';
         border: 0 none;
         text-decoration: none;
         display: inline-block;
         line-height: 1;
         font-size: 0 !important;
         color: rgb(34, 34, 34) !important;
         margin: -5px 5px;
         visibility:hidden;
         float:right;
	}

.comments-link:after {
	content:'f108';
	visibility:visible;
	font-size: 37px !important;
	}

    I hope this helps you.

  • Unknown's avatar
    alguzlan · Member ·

    Hi Raulanton,

    Thanks for your help, you are a genius. However, there are still two missing points:

    1- This code applied only on the first post and not on the posts below. It only hides the “Leave Comment” in the posts below.
    2- The Genericon you created is not clickable.

    I hope you find time to solve these two issues, otherwise thank you a lot.

  • staff-jeanpierreac · Staff ·

    Hi alguzlan.

    This code should display a comment icon instead of any “Leave comments” text hidden. Are you sure you have enabled comments in those posts/pages in which there are no link? (You could check how to confirm that and how to eventually enable comments here and here).

    About the clickability: it’s true. In fact the genericon was added to the .comments-link, but it should be added to the link inside .comments-link. Sorry about that. This code should solve it:

    .comments-link a
	{
         font-family: 'Genericons';
         border: 0 none;
         text-decoration: none;
         display: inline-block;
         line-height: 1;
         font-size: 0 !important;
         color: rgb(34, 34, 34) !important;
         margin: -5px 5px;
         visibility:hidden;
         float:right;
	}

.comments-link a:after {
	content:'f108';
	visibility:visible;
	font-size: 37px !important;
	}

    I hope this time anything goes! if otherwise, let me know… :)

  • Unknown's avatar
    alguzlan · Member ·

    You are right, comments were disabled for the other two, you are a super genius, but can you add the code for hovering color. I thought it will take same social icons behavior.

    I would like you to excuse me if I ask you again for replacing genericon with a normal button, as I mention first, having the same action of “leave a comment”.

    I can do a button with url link in a static page, but not in a post page with a specific task, like “Leave a comment”.

    Thank you again.

  • Unknown's avatar
    alguzlan · Member ·

    I don’t believe that I did it. I played around with your code until I got it.

    This is the new code 

    .comments-link a {
	font-size: 0 !important;
	float: right;
	border-radius: 3px;
	Background: #222222;
	padding: 1px 19px;
	color: #ffffff;
}

.comments-link a:hover {
	background-color: #fa5a00;
	color: #ffffff !important;
}

.comments-link a:after {
	content: 'Read more';
	font-size: 14px !important;
}

    Thank you a lot. The last thing I wanted to do with post page is to hide the text under every post image, so there will be a meaning for “Read more”

    Any idea?

    I really appreciate your assistance.

  • staff-jeanpierreac · Staff ·

    That’s amazing, alguzlan! You did it by yourself! Now, don’t you think css + WP is… intuitive and amusing? :D

    About the text under post images… I’m not sure which text do you mean. Could you please add an example (page and text)?

  • Unknown's avatar
    alguzlan · Member ·

    I’m very happy with what I did because of your support, but I have changed the whole idea just to make it more simple for the readers. I created a new page that includes clickable post photos only (except first one, not published yet). Then readers will click whatever they are interested in.

    Originally, the post page was a mess, showing the full post without sharing buttons.

    The disadvantage here is that after 10 posts, I need to delete the oldest post manually, which ok for me.

    Thank you, I had a very good experience with you.

  • staff-jeanpierreac · Staff ·

    You are welcome and thank you: I am really glad to read that!!

    :))

  • The topic ‘Creating Leave Comment Button by CSS’ is closed to new replies.