Skip to main content
All CollectionsDisqus Pro
Disqus Appearance Customizations
Disqus Appearance Customizations
Disqus avatar
Written by Disqus
Updated over 9 months ago

The following customizations require a Pro or above subscription to enable:

  • Disable Disqus Branding

  • Disable Social Share Icons

  • Disable or customize Voting

  • Use Custom Fonts

  • Customize discussion prompts

  • Customize default thread length

Color scheme and link color edits may be applied by all sites.


Disqus Branding

If you have a Pro subscription plan, you can remove the Disqus logo from your footer. You can update this by going to the General Settings page in your Disqus Admin.

Unchecking the Disqus Branding option will remove the Disqus logo from the right side of the footer:

Social Sharing Icons

This will allow you to disable the Facebook and Twitter social sharing buttons at both the comment and thread level. When on the Pro plan, you may disable social sharing here. Please note that even with Social Sharing icons disabled, a share option will still appear at the comment level, but will only contain a direct link to the comment, with the previous Facebook and Twitter comment share options removed.

Before:

After:

Voting Customizations

Voting needs may vary from site to site. When on the Pro plan, you can now set the voting functionality that will be best for your site. This includes:

  • Upvotes and Downvotes enabled (default)

  • Only Upvotes enabled

  • Upvotes and Downvotes disabled

Please note that the ability to hide downvote details (such as count and voting users) is still available to sites on all plans.

Custom Fonts

For sites with a Business subscription, a variety of fonts will be available for use. The desired font may be selected from the Typeface section of the General Settings page.

Business Publishers may also request for new fonts to be added to the Disqus system. To be assessed for addition, the font must meet the following requirements:

  • Be available through Google Fonts

  • Have the following styles available: 400 weight regular, 400 regular italic, 700 bold, 700 bold italic, and either 500 medium or 600 semi-bold

Customize Discussion Prompts

This will allow you to customize the text that appears in your postbox where your users type their comment. Currently, this text will read "Start the discussion" for a thread with 0 comments, and "Join the discussion" for an active thread. With this feature, you can use any text you'd like with a 45 character limit. This change will be applied to all threads on your site.

Customize Embed Length on Load

This feature allows you to customize how many comments are shown in the embed when Disqus first loads on the page. This can be used to have Disqus load a smaller window when it first appears on the page.

By default, 50 comments will load initially on desktop, and 20 comments will load initially on mobile. This feature can be used to show any number of comments below 50 on initial embed load.

Please note that even with this customization enabled, clicking "Load More Comments" will load an additional 50 comments on desktop, and an additional 20 comments on mobile.

Appearance Tweaks for all sites

The following settings and tweaks can be applied to all sites on Disqus.

Although it's not currently possible to apply custom CSS to the Disqus iFrame, the appearance can still be tweaked in a few different ways.

Light vs. dark color scheme

A light or dark color scheme is automatically selected based on your site's stylesheets.

How is the color scheme determined?

  • The light scheme is loaded when the text color Disqus inherits from your site has >= 50% gray contrast: between color: #000000; and color: #787878;

  • The dark scheme is loaded in all other instances. 

Overriding the color scheme

The color scheme can be overridden in two ways: 

In the Disqus admin

  1. At the Disqus Admin > Setup > Appearance page, locate the Color Scheme option.

  2. Choose the appropriate color scheme, or allow Disqus to choose for you by selecting "Auto".

In your site's stylesheets directly

1. Locate <div id="disqus_thread"> 

2. Insert a <p>  tag into disqus_thread. This requires editing HTML in the web inspector.
3. Inspect the <p> tag > expand the Computed Style dropdown > observe the 'color' parameter. This is the color that is being inherited.

4. Expand the dropdown to the left of the 'color' parameter to expose which specific stylesheet rule is setting this color. Change the color being passed via this rule based on the "How is the color scheme determined?" section above.

Link color

Disqus inherits your site's link colors, and will use this color for all links, the Load More Comments button, and the upvote/downvote buttons when clicked. In order for this to work you'll need to make sure the relevant CSS rules are inheritable by Disqus.


To update the color used by Disqus for these elements, you may insert the following code in your CSS sheet, and then update the color line accordingly:

#disqus_thread a {

color: blue;

}

Width, margin and padding

Disqus is set to fill 100% of the width of its parent HTML element and has no margin or padding set on its <div>. This means Disqus often looks best when its parent container gives it some margin or padding. Additionally, the width of the disqus_thread ID can be adjusted using CSS.

Elements that can't be edited or removed

Did this answer your question?