I'm bringing a Twitter feed through to my site using the following code which is described on https://publish.twitter.com/
<a class="twitter-timeline" href="https://twitter.com/ACCOUNT-HERE" data-tweet-limit="3">Tweets by</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
The feed is displayed correctly. However it uses CSS which is provided via Twitter.
When I inspect it using Chrome dev tools I can see the following classes around the Tweets:
<p class="timeline-Tweet-text" lang="en" dir="ltr">
So I thought it would be a simple case of targetting this in CSS, e.g.
.timeline-Tweet-text {
}
However, this doesn't apply any styles to the Tweets. Why not?
I have also referred to Twitters guidance on this here https://dev.twitter.com/web/overview/css but that also doesn't work.
The only reason I want to do this is so the font used within the widget matches the font used by the rest of the body text on my website.
Simply adding a style rule to your top-level page won't work, because they are two different and isolated documents as far as the browser is concerned.
However, with the use of kevinburke's Customize Twitter 1.1 project, you should be able to embed CSS into a timeline. It does this by injecting a link to an external CSS file directly into the contents of the document within that frame.
In Kevin's published example, It makes all the text white, which looks a bit broken, but when I took this example and adjusted it to also turn the background red, we can see it's working as intended and you can therefore make any adjustments you like, provided you have a CSS file for it.
Note that this is only possible because Twitter have configured platform.twitter.com so that it can be embedded in frames. For security reasons, many websites will nowadays send a HTTP response header to prevent framing of the content, to avoid people meddling with their contents.
From https://dev.twitter.com/docs/embedded-timelines
Customization Options
Embedded timelines are available in light and dark themes for customization. The light theme is for pages that use a white or light colored background and follows the twitter.com aesthetic, while the dark theme is for pages that use a black or dark color background and looks more like Tweetdeck.
As with your twitter.com profile, you may choose a custom link color for your embedded timelines so that the content matches the links of your website and feels integrated into the color palette of your site.
For sites where the theme and link color do not provide enough customization to make the Tweets feel like they’re a part of the page, we offer a set of additional client side customization features. These settings allow you to control the background color, borders, header, and footer of the timeline, and are detailed in the “Client Side Options” section below
You Can Use CSS * Property for Setting the Fonts for all the Pages...
Example:(this might be useful for you)
#twitterFeed * {
font-family: "Lato" !important;
}
Reference Link for Twitter Widget Style :
https://dev.twitter.com/web/overview/css
https://www.solodev.com/blog/web-design/styling-your-websites-twitter-feed.stml
Unfortunately (Unless it has been changed recently) you can't manipulate CSS inside of an iframe
https://jsfiddle.net/tm94g9n4/5/
.timeline-Tweet-text {color: red;}
I added the color red to the text but as you can see when you inspect it doesn't even appear as overwritten. It's not referenced at all.
I think you'll need to look in to custom libraries for this. I can't recommend any as I've not done this before.
https://stackoverflow.com/a/6495816/1379450
Hope it helps
EDIT
It seems it is possible (Duplicate question)
How to apply CSS to iframe?
I have implemented a simple solution in my project recently, you can customize all kinds of styles to have it fit in seamlessly with your website branding.
jQuery('.twitter-block').delegate('#twitter-widget-0','DOMSubtreeModified propertychange', function() {
//function call to override the base twitter styles
customizeTweetMedia();
});
var customizeTweetMedia = function() {
// overrides font styles and removes the profile picture and media from twitter feed
jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('display', 'none');
jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none');
jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-avatar.Identity-avatar').remove();
jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-size', '12px');
jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-family', "'Proxima Nova', lato, sans-serif");
jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '12px');
jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-family', "'Proxima Nova', lato, sans-serif");
// also call the function on dynamic updates in addition to page load
jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {
customizeTweetMedia(this);
});
}
Link to my complete example
Related
I'm using Ionic with Angular to develop an App. I intruduced dynamic theming adding two .scss files into my theme folder. I've got app.scss where I define only the layout of my components without colors. All colors are in the theme-*.scss files. To apply a theme I use a class over <ion-nav> element into my app.html. Something like this:
<div [class]="selectedTheme">
<ion-nav [root]="rootPage" ></ion-nav>
</div>
The selectedTheme is a string that assume the name of my theme so when I change it with an event such (click) or (ionChange) I can change the colours of my app.
A file theme-*.scss has the following structure:
.dark-theme {
ion-header {
//colors
}
ion-content {
//colors
}
}
This way works like a charm, but I've got a little issue I want to avoid. I set the default theme in constructor of app-components.ts file, before the famous platform.ready().then(...) that hides the splashscreen. My issue is that when the splashscreen hides I can see my app with its layout but without the correct theme applied. I see all white backgrounds and all black colors for a small amount of time, then the default theme is applied. I'm importing my custom themes in variables.scss, I tried to import them also in app.scss but the behaviour remain the same. It seem that before import the themes it applies the layout in app.scss and only after it applies the imported theme with all its colours. Someone has already see something like this?
I think that your issue is caused by timing of first paint which is an attribute on browsers. The webview where ionic runs can be consider as a sort of browser. So, same issue occurs.
why-first-paint-is-happening-before-domcontentloaded is a great explanation related to your question.
This page talks about first paint can start before DOM is fully loaded.
Especially, the below cited paragraph from the link describes same phenomenon of your app.
E.g. the parser obviously cannot emit Element nodes before processing
all of its attributes, but it can emit the node while still processing
its child tree. And the renderer may render the node without its
children. And it may be rendered with incomplete styles only to
undergo a reflow later, e.g. when javascript inserts another style
sheet or simply because the child nodes which have yet to be inserted
affect how it will be rendered.
In conclusion, you can not guarantee DOM is loaded before painting. So, I think that practical solution is hiding your splash screen a little bit later.
I know it's probably not possible, but I want to be able to create a file of some kind that will automatically disable part of a website's CSS. Basically, when I go to the site, I want this to be disabled instantly:
Is there any way this can be done?
Check out userstyles.org – they have a browser plugin called 'Stylish' which you can use to apply custom CSS to a particular site. For example, the CSS style that would do what you want here is:
.roundfield .usertext-edit textarea {
background: none;
}
If you need to do this for all website, you will need to Build a Chrome Extension, or Firefox Extension, those will help you to access every website's html/js/css. Then you can simple use a small javascript to disable everything you want.
Yes using jQuery disable the elements on page load or set the css as empty.
$(document).ready(){
$('#target_element).css();
}
It looks like you're using Chrome. You can edit Chrome's user style sheet and override the style of any site. Put the URL about:version in the search bar and note the "profile path". Browse to the profile path (e.g. C:\Users\you\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets) and in your profile folder open the user style sheets folder. Look for a file called custom.css and add your styles (e.g. .roundfield .usertext-edit textarea { /* your css here*/}). Note that you may need to use the dreaded !important declaration in your rule to override the rules of the site you're targeting.
yes, it can be achieved with javascript/jQuery, on page load target all elements with the specific class and set their background to none.
I'm not great with html, but people I have asked are telling me it is impossible to change the color. The script comes from a separate website and is not my own. I would like to change the color of the link. All my other links are black, and I would like to keep them that way, but I want this one to be #f2f2f2. Although there isn't a color code in the script itself, is there a code I can add elsewhere to change it?
The script won't show up so I have screenshotted it and here is the link to see
<script src="http://tc.freehostedscripts.net/tcounter.php?url=kittycocaine.tumblr.com&name=x" type="text/javascript"></script>
This script is from an outside website, and is used to track activity. The website that created the script will not allow me to change anything in the script posted above.
I have total control over where I can place the script, but I would like it to show up in top left so I was just going to post it at the top of the head tags. I put the entirety of my html into pastebin in case that helps with anything
http://pastebin.com/PbuYkDbQ
Based on your question, this script is adding some url link to the page.
Is there any reason you can't style it with CSS for whatever color you want? If the inserted href doesn't include any class, you could target it to be inserted into a div with some class in it (or just re-purpose whatever element its nested in, if there are no other urls).
Your question is still unclear, but possibly what you could try is:
Surround your script with a named div, e.g. <div id="activityLink"> { your script code ... } </div>
Add a style section to the head of the html: <style> </style>
Create a CSS rule for the link color within the style block : #activityLink a { color: #f2f2f2; }
Links can have different colors depending on their state, see CSS Links page on W3schools.
If you want to do any web development, I'd strongly suggest learning CSS, a basic knowledge is quite easy to learn and very useful.
I see your file has the extension .php it has to be .js.
According to your comment, "I'm not even sure how to do that I'm sorry, what would I do?", As you said that is a file from another domain. If that domain is yours please change the file extension from .php to .js by going into your folder and right click edit it and then remove that .php and then write .js in there.
One easy way could be to search for CSS thing on google.
I have been working on a simple web site (one page at the moment) to display some basic information. This site also contains several links that refer the user to downloadable content (2 links to a PDF and one link to a zip file).
These links, like most of my page, are hidden using the display:none CSS attribute if the user cannot run JavaScript, which several features of the site require. A message is then displayed in the <noscript> tag to inform the user of why they aren't seeing the scripted content. This was all working perfectly when I previewed the files on my personal computer without hosting them.
My problem came after hosting on the site on GoDaddy.com. Now, whenever <noscript> is called upon (regardless of browser), every link from my site is pulled out and shoved in the upper-left corner where the user can see it. CSS styling does not appear to affect these links and I cannot figure out how to get rid of them.
How can I solve this? Most importantly, how to make the links go away unless I set them to visible again?
This is my <noscript> tag, at the bottom of the page:
<noscript>
<div class="scriptError">
<h1>Javascript is disabled!</h1>
<div id="noScriptNotice">
<p>This site works best with Javascript enabled. A 'noscript-friendly' version is currently in progress, but for now please enable Javascript to view the contents.</p>
</div>
</div>
</noscript>
Everything else (including links) is inside this div:
<div class="scriptedContent" style="display: none;">
<script>
//If scripting is enabled, display the site.
$(".scriptedContent").css("display", "block");
</script>
If it's working on your own localhost, but not Godaddy.com , you should first and foremost try to submit a support ticket to see if that provides any help.
The links that are re-appearing, see if you can apply this CSS style to the links that you are trying to hide:
font-size: 0;
text-decoration: none;
That should do the trick of hiding the links, that is, if your CSS is affecting them at all.
If not, try to "right click > view source" of the page, and then view and compare the source with your own.
Alternative if that does not work:
Try making your links (in the HTML code) something along the lines of:
Text
and seeing if that stops them from overriding your Styling.
It could be a HTML question as well...
I have a UIWebView with a page (from the hand made html string) loaded. For the url link on the page, if you tap on it, it has gray as background, which I think is the default behavior on iPhone.
Is there a way to programmingly (thru javascript) change that to be other colors, say, blue? It doesn't seem to work for me anyhow.
This can be done via CSS (no javascript is necessary) using the following rule:
a {
-webkit-tap-highlight-color: blue;
}
Additional information can be found on the Apple Developer site