Add Button to Load Comments Area

Here is what I am trying to do:
I have added the Disqus Conditional Load plugin and at the bottom there will be a button to ‘Load Comments’. Here is a link to what it looks like now:
http://s29.postimg.org/tme03tudz/image.png

Now, I would like to style it just like this (Load More), but maybe have the corners rounded on the Load Comment:
http://s10.postimg.org/bhgm71vtl/image.png

Note, when you hover on the ‘Load More’, the text will change from White to Blue, which I would also like to add on the ‘Load Comments’.

Thanks in advance.

Probably need to add custom styles for the plugin since that’s not managed by theme.

Look at the page source to see the style class for that plugin’s button; then put some custom CSS over ride in theme panel.

Many plugins now have an option to put custom CSS as part of the plugin itself for when it loads its javascript for the show/hide function.

Sorry if that doesn’t help – just food for thought.

Yes I am going to need some help as I have tried everything and am getting the same ugly grey block. I think you guys are on break and don’t want to leave it live on the site for to long, so I will wait when you guys are back in office.

Hi

The break it’s over and now we are back at work. Please provide your site url so we can inspect the situation closer and provide the code that you need.

Thanks!

Here is the link:
http://www.sneakerfiles.com/air-jordan-xxx-30-release-date-colors/

Scroll to the bottom of the page, you will see the ‘Load Comments’ Button.

I would also like to style it like the homepage ‘Load More’ Button seen here:
http://www.sneakerfiles.com

Thank you

Hi

Unfortunately the html structure of the button limit the customization possibility. The text inside the button can’t have a different color with this structure. Now the button can be customized like this: http://screencast.com/t/RkoJYjoC7sma

button, html input[type="button"], input[type="reset"], input[type="submit"]{
width: 100%!important;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

You can modify the radius values as you want. Also if you want to change the button’s background color add this line:
background-color: red;

Hope this help.
Thanks!

That seemed to work. Is it possible to change the height and add a hover effect to it?

Also, not sure if it helps, there is a field for the plugin to add custom CSS. This is what it says:

Custom Button Class
to customize the button

Here you can add any custom class to the button. By using custom class you can use your own style for comment button. Leave empty if you don’t care. (Works only with “On Click” option)

So shouldn’t I be able to make it unique?

Hi

Try this css: http://screencast.com/t/mVlY6ugSoSj

#dcl_comment_btn:hover {
background: #3071A9
}
#dcl_comment_btn{
height: 40px;
}

I suppose that the indicated box refers only at this button, but its options are limited by the html structure of the button.
Thanks!

When I add this code with it:
button, html input[type=”button”], input[type=”reset”], input[type=”submit”]{
width: 100%!important;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

It makes my search button go all out of whack

Actually I was able to fix it and change the size of the text.
Now the new problem is, the button is not displaying on the mobile site.

Hi

Sorry about that, I’ve targeted the wrong selectors for the button. Try the css like this: http://screencast.com/t/rBFBHgl0am

#dcl_comment_btn {
width: 100%!important;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

Thanks!

Will the new code allow it to display on mobile?

Hi

Yes the code should work fine on mobile devices. You can test it and let me know how it goes.
Thanks!