I'm currently developing a website in Drupal and I'm trying to put a custom twitter block. Here's my HTML code:
<ul id="twitter_update_list" class="twitter"><li>Twitter feed loading</li></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/terryamorin.json?callback=twitterCallback2&count=5"></script>
And here is the relevant custom CSS:
#twitter_update_list a {
color: #CA0A6C;
}
Now for some reason the code won't update properly or will only work for one link and not all of them. I checked with firebug and if I choose the element and disable/re-enable the font-size in here:
element.style {
font-size: 85%;
}
then it shows properly for that one link. Why is this happening? Am I not overriding the right properties?
UPDATED:
<div class="content">
<ul id="twitter_update_list" class="twitter">
<li><span>Vote for Cooper in the Fido Casting Call once a day every day! We could have our own UOGC puppy in a commercial !! http://t.co/bDwdKlQ6</span> <a style="font-size:85%" href="http://twitter.com/UOGreekCouncil/statuses/237535525911793664">about 15 hours ago</a></li></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/uogreekcouncil.json?callback=twitterCallback2&count=1"></script></div>
FIXED:
I used the following CSS instead and it seemed to work:
#twitter_update_list a{
color: #CA0A6C;
}
This is simply a case of your attribute selector not actually matching. The attribute getting set on the actual element is style="font-size:85%", while the attribute you're searching for in your CSS is style="font-size: 85%;" (notice the extra space and the addition of a semicolon). The text must match perfectly.
You could change the selector to look for the actual style property being set:
#twitter_update_list a[style="font-size:85%"]
See the jsFiddle.
Additionally, since those links appear to be the only ones using inline styles, you could just look for the presence of the style attribute, like so:
#twitter_update_list a[style]
Since you're using an external JavaScript file to create this HTML, modifying it to use classes instead probably isn't an option, although that's what I'd ultimately recommend. Looking for specific styles may work for now, but if the JavaScript ever changes and the structure isn't exactly the same, it will instantly break your CSS.
Related
I'm working on a webpage and I have an issue, I've created a css function for my image
#my_linkedin {
background: url("../img/linkedin.png");
}
but my isssue is that when I'm calling the class in my HTML, the image doesn't appear.
<div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
<a onclick="window.open(this.href,'_blank');return false;" class="my_linkedin" href="https://www.linkedin.com" target="_self"></a>
</div>
My file is called creative.css and I also have the same file but minified. The issue is that on the webpage, the css are coming from the minified file, so how can I import my css who's coming from the creative.cssplease ? Because I don't want to have to put it in the minified one.
Thanks.
In this case you can have 2 problems.
First - link just empty and it width and height are equals to 0. So you cant see you backdround.
Second - I can see that you are using #my_linkedin as a selector which means that you is searching by id, replace to .my_linkedin.
You want .my_linkedin { ... }. # is for writing styles to match elements with matching id="..." attributes. . is for classes.
Some errors here.
You are referring to a css rule, not function.
You are defining a css rule for a specific id, but on your html your element don't have an id, instead it have a class.
#someid {
color: red;
}
.someclass {
color: green
}
<p class="someid">BLACK</p>
<p class="someclass">GREEN</p>
<p id="someid">RED</p>
<p id="someclass">BLACK</p>
Your problem isn't related to whether or not the file is minified. Your selector applies to an element with id="my_linkedin, but your HTML doesn't have such an element. You can either change class="my_linkedin to id="my_linkedin" or you can change the CSS selector to read .my_linkedin
In CSS you don't call that a function. The #my_linked part is called a selector and the stuff inside the curly braces are called properties. Likewise, you can't call anything in CSS as you would in a programming language.
I need to be able to embed HTML snippets (nested elements and CSS) fetched from a remote api inside my document, in a way that their CSS won't affect on my whole document.
I need to fetch (random) gmail messages HTMLs and embed them in my website. The thing is that most messages have their CSS tags to style the message html. The problem is that some of these CSS mess up with my own document CSS. How can I embed an html snippet with CSS, in a way that it will have its own scope and not interact with what's outside of it?
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
The h1 tag outside the gmail-message div is also affected and is therefore red.
What do I need to do to get around this?
One solution would be to use an iframe.
Another solution would be to extract all css and html, then add an attribute (example: scope) to every html tag inside of gmail-messag.
Then modifiy the css and add an attribut selector.
Example:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
But propably using an ifram is a more easy solution.
Easiest way is to use iframe / object / embed tag (tested on firefox).
If you can use Javascript and HTML5 you can also use shadow DOM or make custom element that uses slot tag (also in shadowRoot).
You might want to look into using The Shadow DOM
An important aspect of web components is encapsulation — being able to
keep the markup structure, style, and behavior hidden and separate
from other code on the page so that different parts do not clash, and
the code can be kept nice and clean. The Shadow DOM API is a key part
of this, providing a way to attach a hidden separated DOM to an
element.
However, be aware this is new tech and, as always, Microsoft browsers don't handle it.
I've found my solution.
First, insert an empty iframe tag somewhere.
<iframe id="iframeTag" src="about:blank"></iframe>
Second, load the html snippet into that iframe, the following way:
var doc = document.getElementById('iframeTag').contentWindow.document;
doc.open();
doc.write(<html_snippet>);
doc.close();
This way the <html_snippet>'s css won't mix up with the outer document's.
Use the srcdoc attribute on iframe to scope your HTML and CSS.
<iframe srcdoc="<p>Hello world!</p>"></iframe>
It's supported on all major browsers: https://caniuse.com/iframe-srcdoc
I'm attempting to style my third-party share buttons (code supplied by Facebook, Twitter, LinkedIn) using attribute selectors. I currently have a set of styling rules allowing me to display these in an inline-block, as intended. However, each set of CSS properties relies on an exhaustive list of IDs - this is not efficient in any sense.
It seems I've tried everything, from applying using classes as selectors and so on, and nothing seems to work. I thought maybe attribute selectors may be the way to go, but have been having trouble there as well.
This is what I've tried thus far, to no avail:
<div class="fb-share-button" data-href="https://www.tylercharboneauprofessional.com/international-pulse/your-guide-to-the-french-election/" data-layout="button" data-mobile-iframe="false"></div>
Tweet<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script><script type="IN/Share"></script>
<style> [class|="fb"] { display: inline-block; } </style>
<style> [class|="twitter"] { display: inline-block; } </style>
<style> [class|="IN"] { display: inline-block; } </style>
For Dev Tools purposes: www.tylercharboneauprofessional.com
I would like to decrease the size of my CSS file by about 1/4.
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>
I am using jsonform (https://github.com/joshfire/jsonform) in order to generate forms from json schema, and the jsonform requires his own css for the form, but i am using another css for my site's template.
Is there a way to apply a css only on a specific tag ? for example only to the html inside ?
I am using rails, so the head is not changing from page to page.
thanks.
If you're using a CSS preprocessor (i.e. SASS, LESS, SCSS, etc.) then it might be an easy job to just indent your custom css under one class/id/tag. You can check this SO question: apply CSS style to particular elements dynamically.
Try this>>>
<link rel="stylesheet" type="text/css" href="theme1.css">
<link rel="stylesheet" type="text/css" href="theme2.css">
Inside theme 1 you would link to certain classes and in theme2 you would link to other classes. Please comment back if you need more help or this is not ideal
for example html
<div id="test" class="testing"></div>
the css would be
#test{color:red;}/*for ids*/
.testing{color:red}/*for classes*/
the styling in the curly brackets can be changed to what you want and the classes and ids can be in any external css if you link your page to it using link rel=
Yes you can. You need to give an ID to the body of your HTML doc if you want to target only that page, or give an ID or class to the element you need to.
<!-- HTML -->
<div class="your-class">
Your content
In the CSS:
.your-class {
your: style;
}
or
<!-- HTML -->
<body id="your-id-name">
<div class="generic-class">
Your content
/* using CSS */
body#your-id-name {
your: style;
}
body#your-id-name .generic-class {
your: style;
}
Hope it helps ;-)
Yes, offcourse there is, that's what CSS is all about.
If you add an ID or a class to the containing element that holds the form, you can add that ID or class to all the CSS selectors in the JSONform css.
for instance:
<div class="jsonform">
{json form goes here}
</div>
and then in your jsonform css, prepend '.jsonform' to all the necessary selectors:
.jsonform input.text {border:none...}
.jsonform input.submit {background-color:...}
I had a look at that jsonform css. I'm amazed that it just uses the complete Twitter bootstrap CSS, there's quite a lot of styling in there that will definitely override your own CSS. I would try to strip out anything that's not directly needed for the form, like body, img, p and h1 declarations.
Maybe the form works fine without the extra styling; you can then apply your own CSS to the form elements...
The CSS included with jsonform is Bootstrap, but the README.md in the /deps directory states that usage of this file is optional. As long as you don't include bootstrap.css in your HTML, you can style the form controls however you'd like/avoid Bootstrap overriding your own styles.
If you want to keep using Bootstrap for jsonform ONLY, you can try "namespacing" the Bootstrap styles using LESS or SASS. Have a look at the first two answers to 'How to namespace Twitter Bootstrap so styles don't conflict' for an idea how to do that with LESS.