I have two pages in my Nuxt project:
|-pages/
|---index.vue
|---login/
|-----index.vue
The index.vue inside pages has these styles:
<style lang="scss">
html,
body,
#__nuxt,
#__layout,
main {
height: 100%;
}
</style>
As you can see, I need my container taking all the screen height, so I need to put that style in all Nuxt containers, for that reason, my styles can't be scoped. Here all is fine, but when I go to /login I don't want those styles, but for some reason Nuxt is applying those styles, even if I delete the <styles> label inside pages/login/index.vue, I don't know why...
In theory, the pages/index.vue styles shouldn't be loading if I'm in /login 😣
The only solution I found is to put the scoped attribute to page/index.vue style label, but it doesn't allow me to change the Nuxt's containers height.
Do you know a better way to do it?
If you define global CSS styles (by not scoping them), they will indeed be applied to your whole app.
The behavior in login/index.vue of your styles having the properties is hence totally fine.
This is called CSS Cascade.
If you don't want the behavior being applied to the other pages, you need to either override the properties in the other .vue files (which is fine to a certain point) or scope the styles of your root index.vue.
You can of course also use Nuxt layouts, if you want to apply styles to a specific group of pages.
Also, height: 100%; is a pretty generic property. You will not really need it if you use your page flow (by adding regular blocks of HTML one to the other), it will put them accordingly.
For further CSS issues, the usage of the inspector of your browser's devtools is highly recommended and will spare you some struggle!
Related
I am using FullCalendar for Angular and I am having trouble applying custom styling. I need to change the background colour of the 'More Events' Popover, but no matter what I try, none of my styles are applying.
I am putting these styles into foo.component.scss:
.fc-popover .fc-more-popover .fc-day .fc-day-mon .fc-day-past .fc-day-other{
background: #303030 !important;
}
I can see in the classes that I have copied from inspect on Chrome references only one day, but it doesnt even apply to that day.
I have tried more generic class names such as:
.fc .fc-popover .fc-more-popover
to no avail.
I have also tried putting the styles in a style tag directly in the component template, and I have tried putting the styling into the main styles.scss file.
When I edit the styles in the inspect tab in my browser, it applies and achieves the desired result, but I just can't get these styles to apply any other way.
Angular has something called view encaspulation.
Without going to deep or being too complicated, it means that heach view has its own ecosystem, so that they can't collide with each other when it comes to styles.
So a style like .container in app.component.scss, won't collide with a .container in home.component.scss.
To avoid view encapsulation, you have one of two solutions.
The nasty one, ::ng-deep, is to be avoided. So it leaves you with a single one : move your styles into the style.scss file, where there is no view encapsulation.
Lastly, if it still does not work, try adding !important to your styles (and remove it after testing, it's nasty too) : if the style gets applied with !important, it means your CSS selectors are not "strong" enough, so try "strenghtening" them.
I set up a background image with css (background-image) in the body tag of the template so that only shows in the pages generated with it, however that's affecting all 'body's in the entire gatsby.js website.
This is normal behavior. It's not a Gatsby issue. It's how React's templating/code-splitting works.
You are defining a CSS rule in your isolated CSS but it's bundled when the project is compiled (because of webpack) and because of the specificity, it affects all body tag. In the end, your template will be also injected into the output HTML so all the imports in it will also merge in the final output.
The easiest and most straightforward solution I think is to define a <section> (or another tag) just as a direct child of the body for each template/page you want to customize and give a specific class name to apply the CSS only to that template/page. Increasing the specificity is the easiest way to apply.
Soon, in the new Chromium version (99) we will be able to define layered components in order to enhance the specificity and improve that kind of behaviors you've described.
I've embedded a widget on my page that links to this javascript file:
https://widget.zola.com/js/widget.js
The widget is generating a header section which i'd like to remove.
https://widget.zola.com/v1/widget/registry/taylorandjaredseptember7/html?:1
I've inspected the element and was able to target the section and add a display: none to it. That worked, but when I copied the code into my CSS style sheets, it was not working. I even tried adding !important to it with no luck.
Is there something obvious that I'm missing?
This is the code I added to my stylesheets.
.registry-header {
display: none !important;
}
I also tried targeting the classes it was nested in, like so:
.row registry-header-section .col-xs-12 .registry-header {
display: none !important;
}
Other background info that might be helpful:
- My site is a Wordpress site using the Divi theme.
Establish where the current rules are being generated from in the Document Tree and then use this question and answer to find how to effectively overwrite these rules.
Possible Routes:
You may need to use an id tag on the element and apply the style to the #id, because this will overwrite .class level styling.
You need to be as specific as possible with your targetting; your second example is better than your first.
Remember if the widget uses just a JS file then it's probably editing the CSS via Javascript inline, so it will be doing so inline, therefore you may need to add the style adjustment overwrite inline into the page itself. Set your <style> block to appear as late in the <head> as possible and add !important to the elements required
Create your own Javascript script to load after their widget script and to force CSS to adapt as you want it, with javascript or jQuery code blocks.
Crazy idea.... but it might just work.
You would first need to export from your Browser Inspector the current applied styling generated by the widget and save this to your own (domain-local) CSS file.
You can then use Content Security Policy to specifically block 'unsafe-inline' and 'unsafe-eval' in your style-src: part to block javascript and other inline styling from being applied to the page.
Replacing this with your export CSS style sheet should avoid Javascript/inline styling and allow you to tweak the styling as you need by simply editing your CSS code. You ca fine tune this depending on your dependancies and codebase.
I've developed a dynamic ad banner that consits of html and styles loaded into the host site via javascript. On one particular site, certain styles in the stylesheet for the main page are affecting the html that I'm dynamically loading.
Is there a technique for having the dynamically loaded html only render styles from the css I have loaded along with the html, and ignoring any styles in the host page?
Any advice appreciated.
Put your banner into an iframe.
Add !important to your CSS like
p { color: #ff0000 !important; }
Yeah there is a real easy way. Why dont you have your classes separated form the main page HTML. Give them a unique identification if you want there to be no conflict.
Example
Your main page has a css class .input
Give your dynamically loading page as .Dybamically_input this will server something as a namespace.Also you can use !important to the properties which you definitely want to added.
There is an evolving standard to introduce scope blocks to CSS but that isn't yet supported enough to be of any use. You can use the !important directive, but that is likely also to affect the underlying document if you don't apply it carefully.
The best solution is to create a scope by including all the the HTML in your add banner inside a div with a uniquely named class (and use your own namespace eg. 'cog_myAd' to try to guarantee uniqueness. Then apply styles just to that class, using !important where you might need to override styles that could be changed lower down the cascade of styles.
If you have attached your CSS file to the HTML page then the only solution to it would be using !important for all conflicting CSS properties -
.className{
color: red !important;
}
Use inline styles (the style attribute on all your banner elements you want to style) instead of external css file - this way you will never have a conflict.
The other option as others suggested is to use IFrame.
I am injecting some html + css into every page from my firefox plugin. But this styles is sometimes getting overridden by the style sheet. I want to stop this behavior.
I know this can be solved by some css tricks. Adding !important for instance. But is there a way available in firefox or xul to do this easily?
Using !important alone is not enough, the webpage could do the same and still override your styls. You can use the Stylesheet Service to register a user stylesheet. If you then use !important then web pages will no longer be able to override your styles.
Note that user stylesheets are always global and apply to all webpages as well as browser's own XUL documents. You can restrict them to particular webpages using #-moz-document.
#MEGA_PLUNGIN a {}
#MEGA_PLUNGIN span {}
#MEGA_PLUNGIN div {}
#MEGA_PLUNGIN table {}
...
Not the best solution but right...
To me, this is one case where you would certainly use !important.
That said, you can try to use specificity to ensure your styles are being set.
So, make sure that you are targeting the elements are precisely as possible, in order to override those styles that are not as specific.
For instance, if you have this structure
<body>
<div>
<h1 class="something">
<a href>
The site's styles may target
h1.something a{
You should aim to do this
body div h1.something a{
which is more specific and would override the above styles.
The other thing you might be able to do is append your styles just before the </head>, which would make them appear last in the cascade, and, if they are equal, will be applied.