Incorrect Disqus Styles - javascript

I'm using the Disqus comments plugin on my wordpress site on http://swiftcarbon.com/carocap-the-journey-thus-far/
As you can see it is using a much darker blue (rgb(0,0,238)) than the sites blue (##288ce4), for the underlines, and anchor tags.
I've read the documentation on https://help.disqus.com/customer/portal/articles/545277 , but according to this article Disqus should apply a black colour to those links, which I'd be happy with.
So far I've tried to override the style with !important to change the colour which didn't work. I've even tried, although I know it's a no-no, to inject styles using the Javascript on the $(window).load() method to ensure the Disqus section is loaded before the js runs.
css
#disqus_thread .publisher-anchor-color {
color: black !important;
}
js
$("#disqus_thread .publisher-anchor-color").css("color", "black !important");
or
$("#disqus_thread .publisher-anchor-color").removeClass("publisher-anchor-color);
Has anyone had a similar problem and managed to change the style.s

The disqus thread is get inside an iframe. You can't change the css of the frame content from the parent page. So this need to be resolved on disqus side - maybe there is an api option that you need to set.

Disqus link colors are inherited from your site's "a" defined color, change your css to define new link colors, and it will automatically pick it up

The final working solution :
<html>
<head>
<style>
#disqus_thread a {
color: red;
}
</style>
<script type='text/javascript'>
/* <![CDATA[ */
var embedVars = {
"disqusConfig":{"platform":"wordpress#4.3.1","language":""},
"disqusIdentifier":"5829 http:\/\/swiftcarbon.com\/?p=5829",
"disqusShortname":"swiftcarbon","disqusTitle":"CAROCAP: THE JOURNEY THUS FAR",
"disqusUrl":"http:\/\/swiftcarbon.com\/carocap-the-journey-thus-far\/",
"options":{"manualSync":false},"postId":"5829"};
/* ]]> */
</script>
<script type='text/javascript' src='http://swiftcarbon.com/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.3.1'></script>
</head>
<body>
<div id="disqus_thread">
<iframe id="dsq-app1" name="dsq-app1" allowtransparency="true" frameborder="0" scrolling="no" tabindex="0" title="Disqus" width="100%" height="100%" src="http://disqus.com/embed/comments/?base=default&version=9c6bf8c60a74cf4ced706cfda8a939f7&f=swiftcarbon&t_i=5829%20http%3A%2F%2Fswiftcarbon.com%2F%3Fp%3D5829&t_u=http%3A%2F%2Fswiftcarbon.com%2Fcarocap-the-journey-thus-far%2F&t_e=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&t_d=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&t_t=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&s_o=default&l=" style="width: 100% !important; border: 1px solid red !important; overflow: hidden !important; height: 475px !important;" horizontalscrolling="no" verticalscrolling="no"></iframe>
</div>
</body>
</html>
**// UPDATED ** And the debug :

Related

Unable to change the styling properties inside an iframe body tag

I have written this html script to display wikipedia inside iframe but i want to change the background color of it, below is the code snippet which i tried. but its not working.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue !important;
/* Adding !important will give this rule more precedence over inline style */
}
</style>
</head>
<body>
<iframe style="background-color:#fc3 !important;" src="https://www.wikipedia.org/" width="100%" height="450px" >
</iframe>
</body>
</html>
You cannot modify the contents of an iframe before loading (using CSS), because it is displaying content from another page. After it loads, you may modify it with javascript.

Remove Google Border From Embedded Google Sheet

I'm looking to embed a Google Sheet into a Google Extension. Simple enough — just use the autogenerated embed code and stick it into an html file. This is what I did:
<html>
<link rel="stylesheet" href="extension.css">
<iframe
width="250px"
height="250px"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&single=true&widget=true&headers=false">
</iframe>
</html>
The result is this: https://imgur.com/CopCfvL. I just want the table with columns "TEAM" and "SCORE", is there a way to get rid of the Google border (i.e., "Color Wars Scoring : Sheet2" and the tab below)? I've looked for built-in ways to remove it and it seems like there once was, but not any more. That being said, I feel like there should be a simple enough work around, possibly with JavaScript. I just don't know enough to figure it out.
Thank you for your help!
iframe {
margin-top: -30px; /* Cut off top bar */
margin-bottom: -30px; /* Cut off bottom bar */
}
div {
overflow: hidden; /* Makes cutoff work */
border: 2px solid black; /* Just for aesthetics, can be removed */
display: inline-block; /* Fit div to contents */
}
<html>
<link rel="stylesheet" href="extension.css">
<div>
<iframe
width="250px"
height="250px"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&single=true&widget=true&headers=false">
</iframe>
</div>
</html>
It's not the most beautiful thing, but I think we can achieve what you want using a container <div> element and negative vertical margins.
You can edit the query string parameters to hide the top and bottom bars.
What you need here is chrome=false (hide the title above) and widget=false (hide the tabs below):
<html>
<iframe
height="170"
width="450"
frameBorder="0"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&single=true&widget=false&headers=false&chrome=false">
</iframe>
</html>
Details of other options here: Google sheet embed URL documentation

Run Skrollr In IFrame

I am attempting to run some very simple Skrollr animations in an IFrame. When I populate the IFrame with the simple HTML Skrollr outputs the error to the console (in FireFox):
'Not well formed'
I have confirmed that the IFrame contents are correct and run just fine if they are not in an iframe and in a standard webpage. And I've confirmed that the Skrollr javascript file/s are loading successfully. All CSS, JS and images are all on the same domain as the parent webpage so there's no cross-domain occurring. The problem exhibits itself when the content is placed in an IFrame. Which makes me think this is a Cross-Scripting issue or that Skrollr is coded to detect cross-domain/cross-scripting?
Any idea's whats going wrong and how I can overcome this? I can provide a simple example if you wish. Hoping to grab Prinzhorn's attention, yes I know Skrollr's not currently maintained and that IFrame's are not officially supported but if I have an idea of whats going wrong or what the problem is I can fork Skrollr and add this functionality.
Edit: Heres a simple JSFiddle example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tasks</title>
<style>
#main-container {
width : 1200px;
height : 1000px;
background-color : #eee;
}
iframe {
width: 100%;
height: 100%;
overflow: scroll;
}
</style>
</head>
<body>
<div class="container text-center">
<button id="load-btn">Load Iframe</button>
<br/>
<div id="main-container" class="text-center">
<iframe id="mf-preview" frameborder="0"></iframe>
</div>
</div>
<!-- Javascript files -->
<script src="js/custom.js"></script>
</body>
</html>
everything is working brother
when the size of your iframe is more then 1000px then it will show the scroll bar
Like example :
<iframe id="mf-preview" src="http://onhax.net" frameborder="0"></iframe>
I have add the source of iframe which is larger then 1200px
and after add this like it will show the scroll bar
check it in JSFiddle

Changing background position with Javascript?

Though I can see this question has been asked before I really need a solution without the use of JQuery, its for an embedded web interface and I don't want the overhead of loading jQuery. I need to be able to manipulate sprites using just the JS on the single page, the state of the sprite is dependent on certain JS variables. I'm sure this must be possible, but can't find anything without the use of JQuery.
The easiest way (I think) is to define your own css classes and change those clasess on certan events. i.e.
<style type="text/css">
.bg1{
/* Some attributes set here */
background-position:cen‌​ter;
}
.bg2{
/* Some attributes set here */
background-position:left;
}
</style>
and then you put your javascript like this
document.getElementById("some_id").class = "bg2";
I think you can use Object.style.backgroundPosition="position" to change your desired background position .
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-image: url('example.png');
background-repeat: no-repeat;
width: 400px;
height: 400px;
border: 1px solid #000000;
}
</style>
<script>
function displayResult()
{
document.getElementById("div1").style.backgroundPosition="center bottom";
}
</script>
</head>
<body>
<button type="button" onclick="displayResult()">Position background image</button>
<br>
<div id="div1">
</div>
</body>
</html>
Reference

How to change font color inside an existing script?

I get a script from a website to put it into my website, but the font color is not what I want.
The script is:
<script language="javascript" src="http://www.parstools.net/calendar/?type=2"></script>
and now I want to change the font color of it. What should I do?
I would really appreciate your help, thanks.
Examining the source of that script, it is simply writing an anchor link with document.write():
document.write("<a href='http://www.ParsTools.com/'>1389/1/31</a>");
You may want to include that script inside a <div>, and then style the anchor links within that <div> using CSS:
<div id="calendar">
<script src="http://www.parstools.net/calendar/?type=2"></script>
</div>
Then you should also add the following CSS class definition:
div#calendar a {
color: red;
}
The following is a full example:
<!DOCTYPE html>
<html>
<head>
<title>Simple Demo</title>
<style type="text/css">
div#calendar a {
color: red;
}
</style>
</head>
<body>
<div id="calendar">
<script src="http://www.parstools.net/calendar/?type=2"></script>
</div>
</body>
</html>
I assume you want to change the font colour of the HTML code produced by the script? If so, just use normal CSS in your external stylesheet and it will apply to the added content.
For example, if you want to make the text inside the element myElement a nice blue colour:
#myElement {
font-color: #0099FF;
}
If the script is not your own, then you will want to analyse the code produced by it to work out which elements you need to style in order to change the colour of the text. Many external scripts that you embed in your website contain inline CSS rules, meaning that you will have to override many elements in your external CSS stylesheet to change simple things like text colour. You may also have to add !important to the end of your CSS rule in order to override the inline styling:
#myElement {
font-color: #0099FF !important;
}

Categories