I need a kind help from you guys. Currently, I am building a website from scratch, the client wants to add his twitter feed to the footer of the website.
But the problem is I could not customize the default twitter feed style. Here is the screenshot please have a look https://i.imgur.com/Gv28Ky1.png
Please help me to customize the twitter feed by CSS.
Kind Regards
Asad
I'm a relative novice, but I had some success using the following javascript function and calling it in the <body> element. Because Twitter grabs its styling through a script, it renders last so any styles in your css sheet will be overruled. The fix is to use a script to directly overwrite the embedded twitter stylesheets.
Try this:
Insert the following script into your website's header:
<script>
var widgetCSS = "" +
"#twitter-widget-0{width: 100% !important;}"+
".timeline-Tweet-text{color:red; font-size:20px !important;}" +
".timeline-Widget{background-color: red;" +
".TweetAuthor-name{color:white !important;}";
function customTwitter(){
var w = document.getElementById("twitter-widget-0").contentDocument;
var s = document.createElement("style");
s.innerHTML = widgetCSS;
s.type = "text/css";
w.head.appendChild(s);
}
</script>
Change the value of var widgetCSS to whatever you want your CSS to look like. I used the inspect feature on chrome to identify the classes that needed to be changed.
Finally, call the function paint(); in the body of html like so:
<body onload="customTwitter();">
...and you should see the changes to the affected elements.
Hope this helps.
Related
Is it possible to change styles of a div that resides inside an iframe on the page using CSS only?
You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
Remember, the same origin policy applies, so you can only do this to an iframe element which is coming from your own server.
I use the Prototype framework to make it easier:
frame1.$('mydiv').style.border = '1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')
In short no.
You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe due to cross-domain resource restrictions.
Yes. Take a look at this other thread for details:
How to apply CSS to iframe?
const cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['frame1'].contentWindow.document.body.appendChild(cssLink);
// ^frame1 is the #id of the iframe: <iframe id="frame1">
You can retrieve the contents of an iframe first and then use jQuery selectors against them as usual.
$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")
$("#iframe-id").contents().find("img").addClass("fancy-zoom")
$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });
Good Luck!
The quick answer is: No, sorry.
It's not possible using just CSS. You basically need to have control over the iframe content in order to style it. There are methods using javascript or your web language of choice (which I've read a little about, but am not to familiar with myself) to insert some needed styles dynamically, but you would need direct control over the iframe content, which it sounds like you do not have.
Use Jquery and wait till the source is loaded,
This is how I have achieved(Used angular interval, you can use javascript setInterval method):
var addCssToIframe = function() {
if ($('#myIframe').contents().find("head") != undefined) {
$('#myIframe')
.contents()
.find("head")
.append(
'<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
$interval.cancel(addCssInterval);
}
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);
Combining the different solutions, this is what worked for me.
$(document).ready(function () {
$('iframe').on('load', function() {
$("iframe").contents().find("#back-link").css("display", "none");
});
});
Apparently it can be done via jQuery:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
https://stackoverflow.com/a/13959836/1625795
probably not the way you are thinking. the iframe would have to <link> in the css file too. AND you can't do it even with javascript if it's on a different domain.
Not possible from client side . A javascript error will be raised "Error: Permission denied to access property "document"" since the Iframe is not part of your domaine.
The only solution is to fetch the page from the server side code and change the needed CSS.
A sort of hack-ish way of doing things is like Eugene said. I ended up following his code and linking to my custom Css for the page. The problem for me was that, With a twitter timeline you have to do some sidestepping of twitter to override their code a smidgen. Now we have a rolling timeline with our css to it, I.E. Larger font, proper line height and making the scrollbar hidden for heights larger than their limits.
var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
Just add this and all works well:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
If the iframe comes from another server, you will have CORS ERRORS like:
Uncaught DOMException: Blocked a frame with origin "https://your-site.com" from accessing a cross-origin frame.
Only in the case you have control of both pages, you can use https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage to safely send messages like this:
On you main site(one that loads the iframe):
const iframe = document.querySelector('#frame-id');
iframe.contentWindow.postMessage(/*any variable or object here*/, 'https://iframe-site.example.com');
on the iframe site:
// Called sometime after postMessage is called
window.addEventListener("message", (event) => {
// Do we trust the sender of this message?
if (event.origin !== "http://your-main-site.com")
return;
...
...
});
Yes, it's possible although cumbersome. You would need to print/echo the HTML of the page into the body of your page then apply a CSS rule change function. Using the same examples given above, you would essentially be using a parsing method of finding the divs in the page, and then applying the CSS to it and then reprinting/echoing it out to the end user. I don't need this so I don't want to code that function into every item in the CSS of another webpage just to aphtply.
References:
Printing content of IFRAME
Accessing and printing HTML source code using PHP or JavaScript
http://www.w3schools.com/js/js_htmldom_html.asp
http://www.w3schools.com/js/js_htmldom_css.asp
I've got this piece of HTML:
<html>
...
<iframe>
#document
<html>
...
<div className='change-me'></div>
...
</html>
</iframe>
</html>
That iframe is taken from stripe React element, I want to access something inside it and change its CSS.
I've dealt before with libraries that offer reusable React components, and managed easily to change every CSS detail there.
Problem: But here I can change nothing.
.change-me { background: red } // This one doesn't work
Maybe it's the fact that the component is making it's own html document, maybe I'm looking at the problem from the wrong end...
Plain CSS is not going to work. You need to change the class of the element with your own class programmatically using JavaScript and the iFrame must contain the CSS file/styling containing that class
For example, you can add your CSS file to the iframe like this:
var iFrame = document.getElementById("youriFrameId");
var head = iFrame.getElementsByTagName("head")[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'path/to/cssFile.css';
head.appendChild(link);
and then add your class to your target element like this:
iFrame.getElementById('targetElementId').classList.add("yourClass");
i know that you can have style-sheets in the head of a page, but i like to have them in a separate file. Now i'm working with a single page application.
Well in an SPA the content is dynamic, right? so i didn't want to import all the style-sheets in the head section with the link tag. Can i somehow import style-sheets as-and-when i need them?
I mean, can i have a link in the body, such that whenever my SPA loads some dynamic content, a style sheet also gets loaded? Such that i dont have to load all the stylesheets even when the dynamic content is not loaded..
I stress again: Whenever the content loads, the styles load.
I know i can do it with the help of an inline style like this:
~PSEUDO CODE
<tagname style="somestyle"></tagname>
but can i have some dynamic file imports too? Can i have the link tag in the body too? Even if it works, is it standard?
You should look into asychronously loading assets, such as the famous google-analytics code. You can load external stylesheets using Javascript.
JavaScript
(function(){
var styles = document.createElement('link');
styles.rel = 'stylesheet';
styles.type = 'text/css';
styles.media = 'screen';
styles.href = 'path/to/css/file';
document.getElementsByTagName('head')[0].appendChild(styles);
})();
Lines 1 and 7 create a new scope for variables such that local variables do not collide or override with globally scoped variables. It isn't necessary just a best practice. This solution also assumes you have a <head> tag in your html.
You can add/remove/edit link tags in your head area with java script to add/remove stylesheet files.
Code example:
Add a stylesheet to the head:
var newstyle = document.createElement("link"); // Create a new link Tag
// Set some attributes:
newstyle.setAttribute("rel", "stylesheet");
newstyle.setAttribute("type", "text/css");
newstyle.setAttribute("href", "filename.css"); // Your .css File
document.getElementsByTagName("head")[0].appendChild(newstyle);
To remove or edit a stylesheet you can give every stylesheet an id attribute and access it with this:
document.getElementById('styleid')
Or you can loop through all link tags in the head area and find the correct one but I suggest the solution with the ID ;)
Now you can change the href attribute:
document.getElementById('styleid').setAttribute("href", "newfilename.css");
Or you can remove the complete tag:
var styletorem = document.getElementById('styleid');
styletorem.parentNode.removeChild(styletorem)
I just tried to give dynamic styling to my webpage. I used a button. On click of it, the CSS will get imported using a method in Javascript.
In my html, I have:
<button type="button" onclick="changeStyle()"> CLICK TO SEE THE MAGIC!! </button>
Then in Javascript, I have a method named changeStyle():
function changeStyle()
{
var styles = document.createElement('link');
styles.type="text/css";
styles.rel="stylesheet";
styles.href="./css/style.css";
document.head.appendChild(styles);
}
It worked perfectly.
I tried to find the solution but can't. I need a custom image for Pinterest (Pin It) button and pin some custom image by url but not a current page.
I created a custom link:
Pin It
in style I set the background image but I see only default Pin It button and not my custom button
There are some solutions where you can set custom button image for Pin It button but I can't change the media={ImageURL} in those solutions.
The popular solution is
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://www.brandaiddesignco.com/blog/PinIt.png'/></a>
But it doesn't help me. Does any one know the solution?
Indeed the popular solution by Jeremy Mansfield at www.brandaiddesignco.com has a great method to customize the Pinterest button any way you want!
I've made three examples, in the form of jsFiddle's, so you can see how it's done using that method.
Reference: jsFiddle Text-Link method
Reference: jsFiddle Custom Logo method
Reference: jsFiddle Custom Logo and Image method
For more Pinterest Info, see my other SO Answer.
Adding an encoded whitespace before the last fragment of the URL will prevent Pinterest's JS from "hijacking" the link:
//pinterest.com/pin/create/%20button?url=
Update:
It seems that my previous solution doesn't work anymore. Here is another one:
//pinterest.com/pin/create%2Fbutton/?url=
At the risk of over simplifying things, use your 'http://pinterest.com/pin/create/button/?url=' path that you've already got, set up your variables, and append them as you do, and just don't include any pinterest javascript. Without that js, it won't find the link and replace it out with their own pinterest button. Just customize your link with an image inside it (or set a background image or whatever) and screw the pinterest js. Set the target to open in a new window.
Custom Link/Button looks like this:
<a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt">
Custom Pin it image or text here!
</a>
Note: I don't think the data attributes need to be encoded (like I did for data-image) but it doesn't seem to hurt it.
JQuery:
$('.btnPinIt').click(function() {
var url = $(this).attr('href');
var media = $(this).attr('data-image');
var desc = $(this).attr('data-desc');
window.open("//www.pinterest.com/pin/create/button/"+
"?url="+url+
"&media="+media+
"&description="+desc,"_blank");
return false;
});
Here is what worked for me :
<img src="../img/custompinint.png" />
The attribute data-pin-custom is what I picked up from Pinterest documentation.
Hope this helps.
After a bit of trial and error, below is what worked for me. This response is a combination of #rharvey's response thread and another stack overflow post. This solution opens up a pop up to share content via pinterest.
Note: In order to prevent 2 windows from popping up you need to set a target. Below is the full solution:
<a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt" target= "pinIt">
Custom Pin it image or text here!
</a>
<script>
$('.btnPinIt').click(function() {
var url = $(this).attr('href');
var media = $(this).attr('data-image');
var desc = $(this).attr('data-desc');
window.open("//www.pinterest.com/pin/create/button/"+
"?url="+url+
"&media="+media+
"&description="+desc,"pinIt","toolbar=no, scrollbars=no, resizable=no, top=0, right=0, width=750, height=320");
return false;
});
</script>
Works for me perfectly.
Your script
<script>
function pinIt()
{
var e = document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e);
}
</script>
Call it with
Pin
The place were I wnat to use the YUI DataTable is in a wiki that allows HTML and javascript. I have created the custom table, put it in a div and gave it an ID and it works really well except that it usees the CSS from the container wiki page and visually it is not presentable. I would like to be able to set the CSS information for this particular table so that it is more readable. As you might guess I cannot modify the "head" information as the wiki only allows me to add things to the "body" of the html. I am by no means an expert in html and as such I am not sure if can specify CSS for a one table?
I was looking around in the YUI documentation to see if there was a mechansim in the YUI DataTable to set the CSS type of information but I could not really find anything. It seems like I should be able to set it in the oConfig object I pass to the table when it is created. So if someone knows of a way to do it using the YUI DataTable parameters that would be appreciated as well.
Can you run Javascript in the page? If so, then you can dynamically add a css link to the page without access to the element.
Here's how from the open source Timeline project:
// Use document for the doc param
function includeCssFile(doc, url) {
if (doc.body == null) {
try {
doc.write("<link rel='stylesheet' href='" + url + "' type='text/css'/>");
return;
} catch (e) {
// fall through
}
}
var link = doc.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", url);
getHead(doc).appendChild(link);
};
function getHead(doc) {
return doc.getElementsByTagName("head")[0];
};
Put your datatable in a specific div with an id
Or: Via the css selector : #yourdivid .yui-dt-data