I thought of creating a website with Nuxt.js. I heard that its pretty cool and easy to use. I am having a little knowledge on vue.js but still cant find the solution to this problem:
How will I remove the padding of the body?
I know the default margin/padding is 8px.
I tried following:
Created app.html/idex.html at root and set the style.
Added style in pages/index.vue
Used both margin / padding with !important tag.
But still, cant find solution
You can use the head() function in your layout or your page.
<script>
export default {
head () {
return {
bodyAttrs: {
class: 'reset-body'
}
}
}
}
</script>
<style>
.reset-body {
margin: 0
}
</style>
Stackblitz: https://stackblitz.com/edit/nuxt-starter-pl9ywp?file=pages%2Findex.vue
Or, if you want to really set it globally via the app.html file it should also work (added to the Stackblitz)
Related
I was trying to make border around an image and my custom css was not working because of Image component css, it was overriding over my custom css and also applied tailwind and bootstrap to fix it but I was unable to fix it. Now I am not getting any clue to fix it I read some github issues but they are not enough to fix it.
code:code link
Example of how to use :global(_selectors_here_) with !important:
import Image from "next/image";
import sli from "./sl.png";
export default function IndexPage() {
return (
<div>
<Image className="ava" src={sli} alt="hello" />
<style jsx>{`
:global(.ava) {
border: 3px solid red !important;
}
`}</style>
</div>
);
}
To make className work in external component, you have to either use :global or the resolve tag.
And to override inline styles, with tailwindcss, you can use important modifier like !border.
Im working on react web app which has less file for its styling. As
shown below, EnPage is a 3rd party component, which has content within
it, Actually the main element class "page-body" has some styling
issue, so I want to overwrite it with a styling fix
<div class="Banner">
<EnPage>
<div class="page">
<main class="page-body"> ...</main>
</div>
</EnPage>
</div>
when on hovering over in chrome devtools, I can see
.page-body {
padding-right : var( --page-content-screen-lg-horizontal-padding , var(--spacing-m));
padding-left : var( --page-content-screen-lg-horizontal-padding , var(--spacing-m));
}
In dev tools, if set these both attributes to 0, then it fixes styling
issue
.page-body {
padding-right : 0;
padding-left : 0;
}
Now how to do this code , like the below?
.Banner {
--page-content-screen-lg-horizontal-padding : 0;
}
Generally third parts materials generate custom classes that style your element. Normally, their classes are inyected after yours, to be sure that their styles have precedence over inherited or previously defined styles.
Things you should try:
1 - Read the documentation of the material library.
Depending on the material library you are using, they may provide a custom way to overpass their basic styles. Some do, other don't. Please be sure to check their documentation to see if this is the case.This is always the best option as you are ensuring the material will work as designed and will not cause any bugs or conflicts.
2 - Give an id to your element and place your custom styles on the id.
This works because CSS styles are defined based on specificty precedence. As ids are more specific than classes, these styles have priority over the ones defined by classes.
Example:
html:
<main class="page-body" id="page-body"> ...</main>
css:
#page-body {
padding-right: 0;
padding-left: 0;
}
3 - If nothing else seems to work and you really need to replace the material style, you could use !important. But please note that this is a bad practice and many state that !important really shouldn't exist in the first place, as if your need to use it is because you are not understanding css precedences rules and you are just hacking the css logics.
Putting this duscission aside, you may place !important after your declaration and this is going to enforce your rule over any other that might exist.
Example:
.page-body {
padding-right: 0 !important;
padding-left: 0 !important;
}
Did I mention this is a bad idea?
If you want to read more about css precedence:
What is the order of precedence for CSS?
https://css-tricks.com/precedence-css-order-css-matters/
I have a CSS conflict going on with a major plugin in my wordpress site. The plugin maker found it handy to add !important declarations throughout all their styling sheets. From a developer's perspective; this is a disaster. In their defense they want to cover all themes that are using !important declarations, so it looks consistent. I do not agree, so I need a solution.
What happens is that my premium theme, who's not using those declarations, cannot override the styling. I have some solutions to remove certain classes by jQuery.
But there is a problem which cannot be resolved by removing classes. For example, the anchor:hover is default as border: none !important by the plugin. But I would like to see is that the anchor:hover border option is actually applied via the theme settings. The applied CSS is this (be aware that the .plugin class is not applied in the anchor, just from a CSS file):
.plugin a { border: none !important; }
Is there any way I can disable certain class combinations from the DOM? I'm happy to have this done with php or jQuery. Something like: .plugin is not applied to anchor I have no idea how to resolve this.
Surely this is just a case of overwriting the css with a better specified css line.
For example if the code is:
.plugin a::hover { border: none !important; }
You can overwrite this by doing:
body .plugin a::hover { border: 1px solid grey !important; }
Because you have added the element body to your css line it adds extra specificity meaning it overwrites the plugins css. You unfortunately have to use !important, as !important throws regular specificity ruling out the window (bad plugin creator).
More on css specificity here
Do you need any of the styles provided by the plugin? If not then it might be worth looking at dequeueing the plugin styles altogether and just adding your own styles where the theme doesn't cover it.
If you find out the registered name of the stylesheet (should be in the style tag) you can dequeue it with something like:
function remove_push_plugin_styles() {
wp_dequeue_style( 'plugin-stylesheet' );
}
add_action( 'wp_print_styles', 'remove_pushy_plugin_styles', 1000 );
You aren't able to edit an iframe's content, true. But the iframe's itself still belongs to your page, and you can edit the attributes. I just tested and was able to do something similar to:
var i = $('div.item iframe');
// Did the selector work?
console.log(i.length);
i.removeAttr('width');
i.removeAttr('height');
That being said, using !important in this situation is not bad. If you're worried about CSS maintenance, leave a comment that the !important is overriding the element's attributes. !important is often demonized, but in this case it is a valid use to increase the specificity of your CSS.
The advantage of doing it in CSS is that it will apply before your JavaScript is loaded, so you won't get a split second of those attributes and styles applying before the JavaScript removes the styles.
I am doing a code that do some js injection of code in page, with JQuery. But in my input that i get in some pages modify it, I am putting all important attributes and define them as !important, but it's impossible to put all the attributes in all the tags.
Someone know how to disable all other css inside a div?
Solution I think:
I found a solution but i don't want to use it. Its eliminate al css from the page, while i am injecting the code after using that code I eliminate my css and code and apply the original code from the webpage
Thanks
If you're using that many !importants you're doing it wrong.
The solution to this problem is to properly organize your css. Important stuff last, because it overrides what was previously styled. Also use your selectors wisely. Example:
<a class="link">Link</a>
.
a:link { color: red; }
.
.
.
.link { color: green !important; } // Nop
a.link { color: green; } // Yup
If you override everything it will work with normal CSS rules on every page. Not what you were hoping for, but it is a solution.
css:
#myInsertDiv {
color: blue;
padding: 0;
margin: 0;
background: white;
border: 0px;
/* etc you have to restyle EVERY possible value */
}
html:
<div id="myInsertDiv"></div>
The main issue is you have to style every attribute, and reset everything else to a default value.
Or you can insert all the style information into the style attribute on the div, but that is probably doing it wrong too.
If I got you right you can use jQuery for modifying CSS properties on any elements of the page (huh), using something like this $('.Myclass').css('color','#ff0000')
And more about selectors in jQuery - http://api.jquery.com/category/selectors/
I have a CSS property (font) that I need to be able to change from Javascript (a pulldown). However, this font should only be used when printing (#media print).
So, the javascript can't just change the value of the font, because that will effect the screen view as well. Is there a way to change ONLY the print version of the font property?
Alternatively is there a way to have a CSS property be a reference to another property?
That way, in the print CSS, I could say font:printfont, and in the screen CSS font:12. And then change the value of printfont, and it would only change the font when printing.
thanks.
EDIT: The point is that I need to be able to change the font size that the document gets printed at from the pulldown, but I don't want to change the font size that the document gets displayed at.
That's an interesting dilemma you have going on there. Off the top of my head, the only thing I can think of is to add a new tag to the header where your font-size is declared with !important. For example, in your head tags:
<style type="text/css" media="print">
.printfont {
font-size: 16px !important;
}
</style>
This will ensure that the new font-size will take precedence.
The following is a very quick example of how you may accomplish this with javascript
<script type="text/javascript">
var inlineMediaStyle = null;
function changeMediaStyle ()
{
var head = document.getElementsByTagName('head')[0];
var newStyle = document.createElement('style');
newStyle.setAttribute('type', 'text/css');
newStyle.setAttribute('media', 'print');
newStyle.appendChild(document.createTextNode('.printFont { font-size: 16px !important;}'));
if (inlineMediaStyle != null)
{
head.replaceChild(newStyle, inlineMediaStyle)
}
else
{
head.appendChild(newStyle);
}
inlineMediaStyle = newStyle;
}
</script>
Just ensure that you have onchange="changeMediaStyle()" as an attribute on your dropdown. Also, as a disclaimer in my example, I am not accounting for things like memory leaks, so you will have to work out those kind of issues on your own.
As to your alternate question, as far as I am aware, there isn't any method for declaring/using what is essentially CSS variables. However, there is currently a recommendation out there for it: http://disruptive-innovations.com/zoo/cssvariables/
seems like what you want to do is myabe just change or add a class to the item with JS
<p class="inrto comicSans">this is the text to change</p>
#screen p.intro {font-family:verdana;}
#print p.comicSans {font-family:comic-sans;}
You could just use JavaScript to switch classes, and have the
#print {
.myPrintClass { font-family: serif; }
}
#screen {
.defaultClass { font-family: sans-serif; }
}
While the class-based solutions would totally work, you could also use Javascript to dynamically add a new <link> tag to the page. For instance, if you have:
stylesheet1.css:
#print * {font-family:verdana;}
stylesheet2.css:
#print * {font-family:comicSans;}
You could then use jQuery to do something like:
$(document.body).append("<link href='stylesheet2.css'/>");
(you could do it without jQuery too, but I forget that syntax and am too lazy to look it up ;-)).
However, if you're only changing small amounts, a single stylesheet + different classes is probably the better way to go; the new <link> tag solution is only worthwhile if you have a bunch of different style changes happening.