[Pro] Issue with styling Disqus comments

Freeway
1

On my website I use the Disqus commenting service. This works great, but I have one thing I would like to improve.

The font used by Disqus does not match my websites font. Is there a way I can force the Markup Item I used to embed the Disqus service to use my paragraph style from within Freeway Pro?

I know that on the Disqus website there is a way to alter the CSS, but I do not know how to write code at all. So that is why I prefer to try and do this from within Freeway.

This is an example of one of the pages in my website using Disqus: http://www.dtp2.nl/disqus-freeway-pro.html

Any help is much appreciated.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Can you post a link to the example on Disqus? One of us could translate it into steps for Freeway.

Walter

On Feb 27, 2012, at 3:22 AM, DTP2 wrote:

The font used by Disqus does not match my websites font. Is there a way I can force the Markup Item I used to embed the Disqus service to use my paragraph style from within Freeway Pro?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Walter,

Sure. Here is the page on the Disqus website explaining how it should be done.

http://docs.disqus.com/help/69/

Everything is there except for how to change the font :frowning:
I already copied and pasted some things, but as I told before, my lack of skills prevented me to succeed.

Where I should paste this code you can see in this screen shot. This looks quite straight forward. http://dl.dropbox.com/u/248835/Disqus.jpg

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

The key thing you want to change is the font-family attribute used within the DIV (HTML box) called dsq-content. This box is created by Disqus, but you can add a style to your page to override its default settings.

Try this: copy and paste the following block into your Page / HTML Markup dialog, in the Before /head section (navigate between sections using the picker at the bottom-left of that dialog).

<style type="text/css">
#dsq-content {
	font-family: Palatino, Georgia, serif;
}
</style>

If that changes all of the fonts in your comment box to Palatino or Georgia, then you are clear to move ahead to changing to the fonts you really like. Be sure to use all the alternates from your desired font family when you do this, and any fonts that have spaces in their names get quoted:

font-family: 'Times New Roman', 'Times Roman', Times, serif;

Walter

On Feb 27, 2012, at 9:56 AM, DTP2 wrote:

Hi Walter,

Sure. Here is the page on the Disqus website explaining how it should be done.

http://docs.disqus.com/help/69/

Everything is there except for how to change the font :frowning:
I already copied and pasted some things, but as I told before, my lack of skills prevented me to succeed.

Where I should paste this code you can see in this screen shot. This looks quite straight forward. http://dl.dropbox.com/u/248835/Disqus.jpg

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Did anyone ever told you before you are great? If not, you are great!

Check the result: http://www.dtp2.nl/ralpantoneconversion.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Walter, is there a simple way to change the color of the font being used by Disqus or do I have to lose myself in a steamy bug infested code jungle replete with dastardly animal traps as has been described above ?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

You could try following the previous code example (that’s the quickest way to see if it will work). Instead of font-family, use color as the attribute, and try some lurid color to see if it works. If it does, then you can refine the hack with a properly-selected CSS color like #334455 or something like that.

<style type="text/css">
#dsq-content {
	color: red;
}
</style>

Paste the above into the Page / HTML Markup dialog, in the Before section, on the same page as the Disqus comments.

Walter

On Jan 4, 2014, at 8:37 PM, Limey wrote:

Walter, is there a simple way to change the color of the font being used by Disqus or do I have to lose myself in a steamy bug infested code jungle replete with dastardly animal traps as has been described above ?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Walter
I have never used code before but I downloaded Text Wrangler.I imported the code for the page that is used for Disqus and I tried to follow the instructions on
the Disqus “Appearance Tweaks” page.The link mentioned previously in this post no longer exists, it has been changed to a new link:-

Alas I cannot see any kind of reference to Disqus in my code anywhere so I don’t have any hope of changing anything.
I have attached the URL for the Freeway page, (which is still under construction by the way). Disqus definitely shows up but is ridiculously light and can barely be read.I have tried all the simpler Disqus tweaks and none of them change anything, lighter,darker or auto.

http://www.craigdirgo.com/messageboard2.html

How should I proceed ?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Walter
my mistake, I opened the wrong code, the css code is the one I needed and the disqus entry is there.I just have to figure out how to inspect the tag for the contents after adding

to the code as instructed on the Disqus tweaking page.
If you have a suggestion that might save me spending the rest of the day exploring options for the answer I would appreciate it.

Thanks

On Jan 5, 2014, at 10:38 AM, Limey wrote:

Walter
I have never used code before but I downloaded Text Wrangler.I imported the code for the page that is used for Disqus and I tried to follow the instructions on
the Disqus “Appearance Tweaks” page.The link mentioned previously in this post no longer exists, it has been changed to a new link:-

Disqus Appearance Customizations | Disqus

Alas I cannot see any kind of reference to Disqus in my code anywhere so I don’t have any hope of changing anything.
I have attached the URL for the Freeway page, (which is still under construction by the way). Disqus definitely shows up but is ridiculously light and can barely be read.I have tried all the simpler Disqus tweaks and none of them change anything, lighter,darker or auto.

http://www.craigdirgo.com/messageboard2.html

How should I proceed ?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Please ignore the Disqus instructions, as they are for hand-editing the page, which you never want to do if you can help it (Freeway will overwrite your changes each time you choose Publish or Upload in Freeway, and you’d have to make them again and upload using an FTP application).

The instructions I gave you are to be directly used in Freeway. On the page that contains your Disqus, choose Page / HTML Markup from the main menu, and in the dialog that appears, change the section to “Before ” using the Insert picker in the top bar (Freeway 6) or bottom bar (Freeway 5 and below). Copy and paste the entire bit of style code that I posted – everything inside (and including) the tags. Okay the dialog, and publish. See if the color changed. If it didn’t, then try raising the stakes. Change this line:

color: red;

to read this:

color: red !important;

This is like hitting an upholstery tack with a sledgehammer. If that doesn’t make the text turn red, then we will have to get out even larger implements. In that case, please post a link to the Freeway-generated page, and I’ll see if I can figure out a stronger accessor for you to use. Most everything can be done with CSS in modern browsers, it’s just a matter of asking nicely in the correct manner.

Walter

On Jan 5, 2014, at 1:08 PM, Peter Stallard wrote:

Walter
my mistake, I opened the wrong code, the css code is the one I needed and the disqus entry is there.I just have to figure out how to inspect the tag for the contents after adding

to the code as instructed on the Disqus tweaking page.
If you have a suggestion that might save me spending the rest of the day exploring options for the answer I would appreciate it.

Thanks

On Jan 5, 2014, at 10:38 AM, Limey wrote:

Walter
I have never used code before but I downloaded Text Wrangler.I imported the code for the page that is used for Disqus and I tried to follow the instructions on
the Disqus “Appearance Tweaks” page.The link mentioned previously in this post no longer exists, it has been changed to a new link:-

Disqus Appearance Customizations | Disqus

Alas I cannot see any kind of reference to Disqus in my code anywhere so I don’t have any hope of changing anything.
I have attached the URL for the Freeway page, (which is still under construction by the way). Disqus definitely shows up but is ridiculously light and can barely be read.I have tried all the simpler Disqus tweaks and none of them change anything, lighter,darker or auto.

http://www.craigdirgo.com/messageboard2.html

How should I proceed ?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Unfortunately that red !important idea didn’t quite workout…the upholstery tack got quite a whacking though, went clean through the couch I think !

Anyway I guess it’s time to break out the heavy artillery.
I have attached the link to the Disqus message page.

http://www.craigdirgo.com/messageboard2.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Their script is injecting an iframe into the page to hold the , and CSS (like JavaScript) cannot cross that river. This is going to take a bit more work to get the elements you want into the page. This new style setting is heavily reliant on code editing, and so as the Action for adding Disqus isn’t offering you the controls to insert these bits of code, you’re going to need to do more heavy lifting to fix this.

Walter

On Jan 5, 2014, at 2:17 PM, Limey wrote:

Unfortunately that red !important idea didn’t quite workout…the upholstery tack got quite a whacking though, went clean through the couch I think !

Anyway I guess it’s time to break out the heavy artillery.
I have attached the link to the Disqus message page.

http://www.craigdirgo.com/messageboard2.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Ooooooooooh crikey…sounds as if I should join a gym before tackling this herculean adversary.

How about being a bit cheeky and placing the same text in black in exactly the same position on the background page image in Photoshop? Then when the actual Disqus appears, perfectly aligned to it, the combination text might at least look darker than it does at the moment ? I should find all the font particulars in the code right ?

Maybe it would be worth dabbling with just to see how it works for now, before I need to get a few more squats under my belt.

Thanks Walter

On Jan 5, 2014, at 12:55 PM, Walter Lee Davis wrote:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

How about being a bit cheeky and placing the same text in black in exactly the same position on the background page image in Photoshop?

This is never going to work!

There is no way that you could possibly get things aligned across different Browsers, OS, screen sizes and resolutions.

And would you change the text every time there was a new comment???

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Sadly no matter how nutty the idea, the way Disqus looks as it does now my foolish efforts could hardly make it look worse.

On Jan 5, 2014, at 6:22 PM, DeltaDave wrote:

How about being a bit cheeky and placing the same text in black in exactly the same position on the background page image in Photoshop?

This is never going to work!

There is no way that you could possibly get things aligned across different Browsers, OS, screen sizes and resolutions.

And would you change the text every time there was a new comment???

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options