Remove comment bubble (Twenty Eleven theme)

malinhagman · Member · Nov 23, 2014 at 9:09 am
Copy link

Add topic to favorites
Hi!

I´d like to remove the comment bubble in the right corner above my blog posts. However, I still want my readers to be able to leave comments on my blog, but I would prefer to have a link below my posts that they can click on to leave a reply. Do any of you know how to do this?

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Nov 23, 2014 at 1:33 pm
Copy link
People have asked about the comment bubble before:
https://en.forums.wordpress.com/topic/comment-bubble-css-customization?replies=7#post-1811213

That is a good solution to hide the bubble at the top right of posts on the home page in the Twenty Eleven theme.

but I would prefer to have a link below my posts that they can click on to leave a reply

It’s possible to move the bubble from the top, but a simpler solution would be to just use the “Leave a reply” link that is already in the post footer. You have hidden those with this custom CSS:
```
footer.entry-meta {
	visibility: hidden;
}
```
If you remove that, then you can keep the comment link in the footer and hide everything else in that section. Here is an example:
```
footer.entry-meta .cat-links,
footer.entry-meta .sep {
	display: none;
}
```
I left the edit link there because it is only visible to logged in users with rights to edit—your blog visitors won’t see the edit link.

Your site looks fantastic!!
malinhagman · Member · Nov 25, 2014 at 5:05 pm
Copy link
Hi! I much have missed that topic when I searched the forums. However, when I inserted the code for removing the comment bubble it didn´t work, the comment bubble is still there. Do you know what might be wrong? This is the code I used:

.comments-link a:before {
border-color: #FFFFFF;
}
.comments-link a {
background: rgba(0, 0, 0, 0);
}

The other code worked perfectly, and the “Leave a reply” link is back in the footer. Thanks for helping me, and for the compliment!
thesacredpath · Member · Nov 25, 2014 at 8:39 pm
Copy link
@, I just inserted the following code, from the thread @designsimply referenced, into Appearance > Customize > CSS and the comment bubble disappeared. Was the following the code you inserted into your custom CSS?
```
.comments-link {
    display: none;
}
```
thesacredpath · Member · Nov 25, 2014 at 8:41 pm
Copy link
The code that you reference was to modify the comment bubble. The code I referenced above was down further in that thread at https://en.forums.wordpress.com/topic/comment-bubble-css-customization?replies=7#post-1811213 .
malinhagman · Member · Nov 26, 2014 at 3:04 pm
Copy link
Ok, then I understand why it didn´t work. However, when I inserted the code that removes the bubble the “Leave a reply” link in the footer disappeared too. I still want my readers to be able to comment so I´m wondering if there is any code that will only erase the bubble?
staff-happychia · Staff · Nov 26, 2014 at 5:40 pm
Copy link
This is because comment bubble in the post header and “Leave reply” in the post footer belong to the same CSS class, .comments-link

To target the comments bubble in the post header, use the following CSS. It worked for me so I am fairly sure it works for you as well :-)
```
.entry-header .comments-link {
	display: none;
}
```
malinhagman · Member · Nov 26, 2014 at 9:06 pm
Copy link
It worked! Thanks to all of you for your help. I actually have one more question. It might be my eye playing tricks on me, but it seems like the headline isn´t in the centre. I´ve changed the pictures´ width lately, maybe it has something to do with that?
thesacredpath · Member · Nov 26, 2014 at 11:49 pm
Copy link
Nope, your eyes aren’t playing tricks on you, they are off center because of some right padding. Find this rule in your existing CSS
```
.entry-title, .entry-meta {
    text-align: center;
}
```
and replace it with this
```
.entry-title, .entry-header .entry-meta {
    text-align: center;
    padding-right: 0;
}
```
malinhagman · Member · Nov 28, 2014 at 3:25 pm
Copy link
That looks much better! However, when I replaced the code the “Leave a reply” link in the footer ended up in the left corner instead of in the center. Is there any code I can use to change its location?
staff-happychia · Staff · Nov 28, 2014 at 6:14 pm
Copy link
Please add the following CSS

.entry-title, .entry-header .entry-meta , footer.entry-meta {
text-align: center;
padding-right: 0;
}

to center the entry-meta in the post footer as well.
staff-happychia · Staff · Nov 28, 2014 at 6:17 pm
Copy link
It is almost same as the CSS suggested by @thesacredpath with an additional footer.entry-meta selector. So override your earlier CSS with the following:
```
.entry-title, .entry-header .entry-meta, footer.entry-meta {
text-align: center;
padding-right: 0;
}
```
malinhagman · Member · Nov 29, 2014 at 10:56 pm
Copy link
It worked perfectly! Many thanks to all of you for helping me!

No items found.