I have a text file from another system that I cannot change. I'd like to improve its appearance (e.g change the font family and font size) in an iFrame or Object but cannot find a way to apply CSS to the text.
<object id="warningsObject" type="text/plain" data="http://192.168.0.123/local/warnings.txt" style="width:400px; height:250px;">
Not supported
</object>
I've tried all the approaches I can imagine might work (put style statement in the object, in a div around the object, applied a class, set up CSS for the body & html etc). I can't get any of those to work.
Would prefer a solution without JQuery if possible ;)
Thank you.
Related
I have some images with svg extension. I need to get those images in grayscale mode. Is it possible to do it only using css or whatever I can do with files or the <svg> tag itself? I don't want to use online tools for this convert, I need the pure styling "tools", like html css js. I have read that adding classes to <img> tag might be helpful. By the way, I need it in its original quality, so just making it gray-colored is the only objective.
Try this
<img src="img.svg" style="filter: grayscale(1);"/>
I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script> and <link> tags into the head of the page, then loading the html into a <div> screen.
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
My question is: Is there any way to limit the "scope" of an external .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?
UPDATE Support for this feature has been dropped. Please seek other options
Original Post:
You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.
The basic idea is
<div>
<style scoped>
#import "scoped.css";
</style>
</div>
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
One alternative would be to use an iframe.
Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:
div#foo{
//All your css
}
And convert it as less to css, it will prepend the right selectors. Note that you'll need to take care manually of things like #media queries and so on.
While writing this, the <style scoped> is deprecated by the Chrome team.
As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags .
Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.
A simple way is adding pre-class before all selector in css file.
I find a grunt script can do this:
https://github.com/ericf/grunt-css-selectors
This is how i do it if not using preprocessor in my project. Search for a online preprocessor then load copy paste the css under the parent class/id
.parent{
// copy paste here
}
Example
Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)
if you are using from a URL add the URL using the load URL button.
Wrap the css code under parent and hit compile then minify.
I had a similar issue and found that Shadow DOMÂ can solve it easily.
let output = d.querySelector('#output')
let shadow = output.attachShadow({
mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTMLÂ content and style injected
Source
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Changing SVG image color with javascript
I'd like to change the fill of an SVG image when I hover over it.
Right now I have a black question mark exported from Illustrator to SVG.
I can put on my page with the img tag and it displays fine, however I have no idea how to change the color in code.
If you need to do hover effects in svg you shouldn't use <img> tags. Instead reference the svg with an <iframe>, <object> or <embed> tag. If you want to save a http GET request you can put the svg markup inline in the html document.
Here's an example showing a simple fill hover effect inside an svg, and another one (slightly more complex that creates an outline on hover using a filter). Anyway, it's basically about applying a :hover CSS rule to set the fill color.
An example with all of the above ways of using svg can be seen here.
SVG Files can be modified directly from javascript, i.e. properties of the "image" are accessible from within the DOM.
Look at this post from stack overflow: modify stroke and fill of svg image with javascript
It's important to remember that to do so, you cannot enclose the svg file in the common HTML <img/> tag, use instead the <svg>...</svg> as shown in the post.
EDIT: svg on w3schools
I added a link to w3schools so you can see more properties of the svg object
Have Fun
If you can post your code, maybe we can troubleshoot it for you.
Try following this: http://tutorials.jenkov.com/svg/svg-and-css.html
Alternatively (not exclusive to SVG), use this type of code with different images:
<img src="image1.svg"
onmouseover="this.src='image2.svg'"
onmouseout="this.src='image1.svg'">
Live demo: http://jsfiddle.net/JNChw/
I have a project where I want to put simple graphic backgrounds into table cells. background-image and a small svg file works great!
But I would really like to keep the source all in one file. That is, I would like to be able to define the image in the HEAD, and refer to it in the inline STYLE css.
I have tried various combinations of ID attributes in the svg and hash references in a css url() function, but no success. This would seem to be a desirable thing to do, but looking around, I haven't seen a hint of an idea. Which tells me either it cannot be done, or it is done some other way...
Suggestions?
You can save your svg file elsewhere and put that up in an iframe.
<iframe src="index.svg" width="100%" height="100%" />
There might be other methods too..
Best tuts for svg is found MDN.
Actually after asking the question and thinking about it, I realized I had read the answer already. You need to use a a data url to create an in-line svg graphic. This you can give to the background-image property of a css class, as thus:
{background-image:url(
"data:image/svg+xml;utf8,\
...\
");}
The encoding utf8 will allow you to type in the code directly, escaping the new lines with backslashes and avoiding double quotes (as far as I know;-). Now you just set the CLASS of the TD and it works great!
Now all I have to do is figure out how to align the background on the bottom rather than the top...
This code might also work:
<svg>
<use xlink:href="..." />
</svg>