Wordpress WP_Discourse Plugin

(Blu McCormick) #1

I am using the WP Discourse Wordpress plugin (thank you).

Specifically, I’d like to know is there any way to make this link to the forum that appears under comments into a button that users will immediately recognize as a link to click to comment on the blog? Currently, the link is text, and my cohorts feel that it is wordy and cumbersome and not clear:

I tried to make it clear by adding this text prior to the link, but then, of course, it’s wordy:

Basically, what I picture as the ideal scenario is a simple button that says, “Comment Here.”


(Simon Cossar) #2

Something like this?

If so, you can do it, but you can’t set the text separately for the Join Discussion and Continue Discussion links.

  • on the Text Content tab, delete the text under the headings Start Discussion Text and Continue Discussion Text
  • set the text you would like to appear in the button in the Discourse Link Text option

You can style the link by targeting .comment-reply-title a. The link should have a class added to it to make this easier. But for now this is the way to do it.

To get some basic styles, you can try using an online css button generator. I got the styles for the button I posted from: http://css3buttongenerator.com/

Replace the css selector from the button generator with .comment-reply-title a

For example:

.comment-reply-title a {
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	background-image: -o-linear-gradient(top, #3498db, #2980b9);
	background-image: linear-gradient(to bottom, #3498db, #2980b9);
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	font-family: Arial;
	color: #ffffff;
	font-size: 20px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;

.comment-reply-title a:hover {
	background: #3cb0fd;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	text-decoration: none;
(Blu McCormick) #3

Wow. That’s exactly what I want, Simon. Where would I insert the code. Apologies. I am not a coder.

(Simon Cossar) #4

Either in your WordPress theme’s style.css file, or through the WordPress dashboard by going to Appearance/Customize and then clicking on the Additional CSS menu item.

(Blu McCormick) #5

Nice. I had so much fun making it. Thanks a bunch. Here is mine:

54 PM

(Lea-Ann McGregor) #6

Oh, this styling will make it so much clearer!

1 Like
(Blu McCormick) #7

I know, right? It would be a nice option to add to the plugin.

(Blu McCormick) #8

Hey @Simon_Cossar,

I find in my wordpress site that every time I edit a button setting in my theme that the button that I coded for the WP Discourse plugin per our discussions in this thread stops working. I found a sort of fix. I repaste the same code and the WP discourse plugin button appears again. Any insights on that? I am also talking to the wordpress theme coders for Idyllic Theme who have been most helpful as well.

(Simon Cossar) #9

What do you mean by ‘stops working’? Do the styles get removed? The text for your button is white, so it’s possible that just the background color is being changed.

(Blu McCormick) #10

Sorry, Simon. The button disappears and just the text remains, which was what it was like before I added the button:

34 PM

Here are screenshots of my exchange with the developer:

30 PM

(Simon Cossar) #11

That’s odd. Is it still a link (clickable)? I don’t think it’s anything that the Discourse plugin is doing, but I’m not sure how editing a setting on your theme could cause the problem either.

1 Like
(Blu McCormick) #12

I posted above my conversation with the theme support in case there is something in my exchange with them that gives us a clue as to the cause. I didn’t think to test the link on the black text before readding the button. :confused:

I will definitely post here if I learn anything from Idyllic Theme support. :slight_smile:

1 Like
(Katie Gray) #13

… The text on the button is white…and the button is red…Now you changed…the text on button is black…and the button is white…So, that why the button is disappear .

1 Like
(Blu McCormick) #14

Thanks, @katiegray. How do you know that is happening in the code? The reason I ask is the black text is the native form on the discourse app unless a button is custom added in wordpress css and the code added to change a different button in the wordpress theme alters the color of the font to white and changes the button to its default which isn’t a white button with black font.

This is the default button for the idyllic theme.

(Blu McCormick) #15

This problem was solved by adding code to my Wordpress website:

.comment-reply-title a {
background-image: none;
background-color: #333;
color: #999;