I'm trying to display a website's content (preview) inside an admin interface. Thet requires the entire CSS stylesheet for the content (website) to be applied to the .preview DIV in the admin interface. The website.css file is not always the same as it depends which website is being previewed.
I' trying to use LESS.JS and Nested Rules but it will not work with Inline styles. I'm on a windows platform.
<style>
.preview {
<- Dynamically loading Website.css file content here ->
}
</style>
Problem is that LESS.JS will not act on inline styles. I'd like to keep the website.css file intact.
I could load the website.css, add the extra class, rename it to .less and write it back to the folder, and link the .less file... but it seems a bit too much for something so simple...
Thanks, ended up using LESS.JS which is pretty well suited for this task. I wrapped the Website.css file in a .class of the container DIV.
Less.JS compiles the CSS and adds the .class in front of all definitions, wich does the trick. – mfr just now edit
#*LESS.JS CSS*#
<style type="text/less" >
.preview
{
#File.ReadAllText(Server.MapPath(DesignHelper.GetTemplateFileName("Website.css")))
}
</style>
Notice the 'less' in <style type="text/less" >
Related
I have a very large HTML file with many sections in the file.
I need to use some styles library downloaded from the internet and apply it to a specific section of my HTML file.
When I include files (.css, .js) in my <head> tag styles getting applied to all my HTML as expected.
Is there any way I can restrict my styles to part of my HTML page and leaving the other sections as it is so that it can consume the default styles?
Thanks for the help.
ps: since styles in files and many I can't add them directly in my style attribute.
You can do this by using new style classes and ids for the html you want to style.
Then you can include those classes and ids in last css file added on page. It will override the previous classes styles.
eg.
<div class="older-class myNewClass">Text</div
Styles can be restricted via selectors on CSS side: https://www.w3schools.com/cssref/css_selectors.asp
Also, you can use inline styles in HTML.
I am working with laravel-vuejs application. When vuejs renders css, then it appends some style tags in the html head like below image. Is there any way to hide this tags. I think it is possible using webpack.conf in vuejs by adding some plugin like, copy-webpack, extra-text-ebpack, optimize-css-assets-webpack etc. but how to do it in larave-vue application.
you can use extractVueStyles in laravel-mix
extractVueStyles: Extract .vue component styling (CSS within
tags) to a dedicated file, rather than inlining it into the HTML.
Laravel Mix Options
I guess you might write CSS in each Vue single file component,like this:
//test.vue
<template>
<div></div>
</template>
<style>
div{
//...
}
</style>
Why not write these CSS in a CSS file and then require it in main.js?then you need't to think about removing these style tags.
I have CSS embedded inside the page as <style type="text/css"> and I have CSS referred as using <link href>.
How to make sure that the CSS specified in <link> gets loaded first before the <style type="text/css">?
Right now, the css embedded inside the page gets precedence, causing some style issues.
in the below image, I need .sanddbox dropdown-menu to take precedence before .dropdown-menu. I can get this if I load the css files using link tag.
But I want them to be embedded in the page.
In line styles and style blocks in the page will always over ride any external css files. The correct thing to do is remove the in line css. I am assuming you can't do that for some resaon (there are many). Then the only way to overcome that is to put !important after the attribute in the css file.
eg:
div.test {
color: blue !important;
}
Updated with the proper link to the example
I am using a Hugo theme that comes with bundled with CSS and uses Highlight.JS for syntax highlighting. The web pages I have created show a plain "courier" based fixed width font in the code blocks see here for example of my site page
I would like to use another font, like sans-mono or something more neat looking, like it shows on Highlight.JS web page here
I'm not super familiar with Javascript and CSS, just trying to use them. Is there an easier way to tell Highlight.JS to use specific font? Assuming I have font files available.
Thanks
ZeeKay
Add this to your CSS:
pre > code {
font-family: "Sans Mono", "Consolas", "Courier", monospace;
}
This will use the first font in that list that is available on the user’s system. Sometimes fonts have different spacing that their real names, so for example if "Sans Mono" doesn’t work, try "SansMono". Make sure to put monospace last so that at least some suitable font is chosen if the user doesn’t have any of the listed fonts.
If this doesn’t work, maybe it’s due to a selector specificity problem, where the default styles provided by highlight.js are overriding your own styles. Something that will help avoid this is putting the <link> that loads your CSS file after the one to load the highlight.js CSS file. If this doesn’t work, you will have to make the pre > code selector more specific, such as changing it to #main pre > code if all page content is wrapped in an element with the ID main.
If you’re not sure how to add CSS, the easiest way is to put it in the HTML template surrounded by <style></style> tags. Though it’s better to put it in a CSS file and reference it with <link rel="stylesheet" href="myStyles.css">.
Is it possible and how to do not apply css on specific web page?
For example, i have some div's on Master Page and some css for them
.header {...}
But i have also some page (Home page), which is different from all site-style.
So i don't want to appy css from Master Page and i don't want overwrite existing css rules like this :
#specific.header{...}
Maybe there is solution such as add new Master Page.
Is it good to add some css using JS before page is loaded?
Maybe you can try any of these options:
Wrap all your standard pages under a <div id="whatever">, except the specific page you want free of your general css. Then prefix your css rules with #whatever, so a {color:red;} would be #whatever a {color:red}
This approach is very easy using LESS, because there is no need of prefixing every rule, just wrap them inside #whatever { ALL YOUR RULES}
Dynamically loading of your css, via JS or your server logic if you are using any MVC flavoured framework.