I have an html file containing just the menu and include it on my html page using embed tag:
<embed type="text/html" src="menu.html">
How can I apply css class to the code being included? I tried adding it to the menu.html file but that did not work
The embed tag isolates the source file, so CSS in the parent page will not cascade into the embed element.
You will have to load the CSS file inside the menu.html file for it to apply to the content in that file.
Try Inline CSS classes in menu.html file.
Figured out the issue - I needed to set the width of embed tag to see the whole thing as by default the width did not allow me to see the entire file
Related
I am trying to style elements of SVG using CSS. I used iframe in my index.js file to reference my SVG, and the SVG displays fine. However, my CSS styling didn't apply as it would have had I just copy/pasted the SVG contents into my index.js. The contents are stored under an object #document. How do you reference iframe contents using CSS?
Are you using an <iframe> or an <object>? Your title says the former, but your questions suggests the latter.
Assuming you really mean an <iframe>. Then the answer is: you can't. CSS does not work over document boundaries. So you can't style the contents of an iframe from the page that contains the iframe. The content of the iframe is a separate file (the SVG file).
If you want to style the SVG, then you will need to put the CSS in the SVG (using a <style> element), or reference the CSS file using the XML way of including style sheets:
<?xml-stylesheet href="common.css"?>
See: https://www.w3.org/TR/xml-stylesheet/
Assuming your svg is on the same domain, you could append a stylesheet after loading via js:
let svgIframe = document.querySelector('.svgIframe');
if(svgIframe){
svgIframe.addEventListener("load",function(e){
let svgDoc = svgIframe.contentDocument;
let iframeSvg = svgDoc.querySelector('svg');
let css = document.createElementNS("http://www.w3.org/2000/svg", "style");
css.textContent = 'path{fill:red;}';
iframeSvg.appendChild(css);
});
}
I use a link in my html. How i can copy code of this file to edit it?
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
Do you really want to edit a minified file?
It can be done but it's difficult.
Instead, put that whole address minus the .min in your browser's address field
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css
and you should see the code unminified which you can then copy/save to your local system for editing. (on Windows this would be by right clicking the mouse/pad).
I am not sure whether you do want to actually edit this file, or whether you want to change some of its effects. If the latter you link to the file then put your own CSS in style element following and it will overwrite with whatever settings you have given.
You have to add your custom css style after it so it will overrite it.
In main html file you can just add styles right after <head> for example:
<head>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: red;
}
</style>
So what happens now it imports bootstrap styles but after that overrides it so you can add your custom styles inside <style>
You can simply open the url - https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
and save (ctrl+s) the file locally in your project and include the css file path with the help of this tag given below :-
You can also use custom css and then overide the css.
(Note :- Format the document/css file then you can edit the document)
i am working on helpdesk system and i am creating this system in mvc.
i am designing this system in bootstrap framework.i have created my master page with bootstrap template.
i am using bootstrap.min.css file for bootstrap design.
so my question is can i use my own css for my render body design and can i create my own css file and add those css class and so my website will be responsive ???
or should i have to write those css in bootstrap.min.css file.
but when i am adding my own css class in bootstrap.min.css then there is no effect of css.
can u guys me some suggestions please????????
you should write your own css and add link. don't change bootstrap.min.css.
and your site will be responsive
Bootstrap.min.css is only for the default styling of spans and rows using Bootstrap. You can and should write your own css file to override any of the basic styling, instead of modifying Bootstrap.min.css.
You can always use your own css independently of the css of the framework "bootstrap", of course.
Write the properties in the bootstrap.min.css is not well. It's more clean to write your property in a new css file or directly in the html tag of which you want add your property with the 'style' attribute.
Example :
<a style="text-decoration:none;color:red;">
Now, if you use your own property css, it can happen that some properties is applied to your component by default because you use bootstrap. To use your property value and not coming from 'bootstrap', you have to use "!important".
Example :
color : black !important;
Do not edit the bootstrap.min.css file. Use that as your base and then include your own CSS roles after it so that any changes you make will overwrite the bootstrap.min.css file leaving you with the code that you customized.
How can I make Diazo to use theme's css file?
Whenever I replace something using (for example):
<replace css:theme="#footer" css:content="#portal-footer" />
It doesn't use the #footer style I defined in the theme's css file. Since I didn't enable Plone's css files either, it behaves as if there was no style at all. I found a workaround by renaming the style on my css file to match the one in Plone (i.e: renamed #footer to #portal-footer) but then what is the purpose of the theme's css file?
Thanks in advance.
The replace statement replaces the entire tag found by the theme selector with the tag found by the content selector, attributes too. So if you want to maintain the original class you will have to append/prepend/replace only the children of that tag:
<replace css:theme-children="#footer" css:content-children="#portal-footer" />
More info:
http://diazo.org/advanced.html
Sorry if this is obvious but I just don't know what more to do.
I am using fancybox jQuery plugin to load html content into a modal, but the content doesn't show the css styles of the main document.
CSS rules are called in the main document AND inside the loaded html in a <style> tag, but nothing.
How can I fix this without having to apply individually each element's css with jQuery .css() calls?
Thank you
Note: I know this may be over-duplicated, but I still haven't found the right solution.
Edit: Ajax-loaded content is inside an iframe
Since, as you mention in the comments, you're actually loading content into an iframe, this loaded content will not be affected by styles in the container document. They're two distinct HTML pages, despite the illusion created by the iframe.
Your best bet is to configure the content you're loading to use the same set of styles and style sheets as the container document, or a subset thereof. Treat it like just another HTML page on your site.