Is there a way to add style to html only for a specific page, without using different layout.(and also even if i try and use layout nuxt loads all styles and is no good anyway)
I just need to add overflow:hidden to html for my index page
Just go with bodyAttrs in your page component
<script>
export default {
head: {
bodyAttrs: {
class: 'overflow-hidden'
}
}
}
</script>
<style>
.overflow-hidden {
overflow: hidden;
}
</style>
You can use in style tag like this link:
<template>
<-- index page --->
</template>
<style>
html {
overflow: hidden;
}
</style>
if you do not use scoped in style it can effect on html tag
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
Related
Recently I purchased a website template, and I have never been good at CSS so I am finally trying to understand. I have googled, but have not found if this is possible, so I am assuming its not, but I figured I would ask anyway.
CSS files:
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/custom-style.css">
There are some tags in the custom-styles.css that are overriding things in bootstrap.min.css. All good and well and working as expected.
However I am currently working on a page, and I want it to defer back to what is in boostrap.min.css for like 10 elements. I dont want to change the custom-styles.css so is there a way I can do something like the following:
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/custom-style.css">
<link rel="stylesheet" href="assets/css/my-style.css">
and in my-style.css have something like:
.abc .def {
defer to boostrap.min.css
}
or
.abc .def {
ignore custom-style.css
}
Thanks,
Brian
In my-style.css override those classes with content that is in bootstrap.
example
In bootstrap you have
.foo {
color: red;
}
and In custom-style you have
.foo {
color: green;
}
then in my-style.css do something like this
.foo {
color: red;
}
and make it override previous declarations or simply (less recommended)
.foo {
color: red !important;
}
You could give the body (or main container) of your special page a distinct class, let's say .special-page, and then in your custom-style.css write your overrides like
:not(.special-page) .abc .def {
/* your special style
which doesn't get applied
if the element is
within .special-page */
}
Lear more about the :not() selector: https://css-tricks.com/almanac/selectors/n/not/
You could try to comment out unnecessary code if you do not want to remove them. That should automatically make use of the Bootstrap code instead of the CSS. For example, if your CSS looks like:
.abc .def {
Some code.....
}
You should comment them out like:
.abc .def {
/* Your code */
}
Or:
/*
.abc .def {
Your code.....
}
*/
That should work.
I have a global variable defined for the list and is referenced in my html
ol>li::before, ul>li::before {
color: #FFFFFF;
content: '\00A7';
display: inline-block;
position: absolute;
}
I am trying to override this in my html as I have to remove just this line:
content: '\00A7';
If I simply use it in my local file it doesn't override.
Any suggestions on how do I fix this?
you have three ways to achieve it.
add !important after your own css in your css file
ol>li::before, ul>li::before {
content: '\00A7' !important;
}
add the css after the global css in your html
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="my.css">
add a tag in your html element
<ol my-tag>
...
</ol>
ol[my-tag]>li::before{
// your own css
}
On my layout page, in the <head>, I have the following styles:
<link rel="stylesheet" href="/dist/vendor.css">
<style>
.bg-dark {
background-color: #240000;
}
</style>
I have added the link to my layout page. The style block is added dynamically by Angular & webpack. From what I know about CSS, that last .bg-dark class should win over any .bg-dark class declared in `vendor.css. Yet I see the following:
Is this something caused by the magical pre-rendering of Angular? Is there some way to prevent this?
The background-color attribute in vendor.css has the !important flag, which elevates its priority:
background-color: #222222 !important;
To override that setting, you should set the !important flag in your layout page CSS:
<style>
.bg-dark {
background-color: #240000 !important;
}
</style>
or remove that flag in vendor.css, if your can.
I'm a real noob at CSS/HTML, so please forgive me.
I tried to change the background page color on the CSS file linked to my html file, and it doesn't work. Whereas when I just flat out change it between the style tags in my HTML file, it works. What gives?
Plain and simple:
Ex1.css
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
SamplePage.html
<!doctype html>
<html>
<head>
<title> Sample Page </title>
<link rel = "stylesheet" href="Ex1.css">
</head>
<body>
Hello. This is a sample Page.
</body>
</html>
Your HTML is correct, and links to your CSS correctly (assuming Ex1.css is in the same folder as your HTML).
Your CSS is almost correct; the only problem is that you shouldn't include any HTML tags in your CSS document. Ex1.css should only contain the actual CSS declarations themselves (body { }).
body {
background-color: lightblue;
}
<body>
Hello. This is a sample Page.
</body>
If in doubt, you can validate your CSS with W3's CSS Validator.
Hope this helps! :)
Reduce the contents of your Ex1.css file to this:
body {
background-color: lightblue;
}
(no HTML code in CSS files!)
your css file will just have. Plain and simple
body {
background-color: lightblue;
}
change your css file to this:
body {
background-color: lightblue;
}
Is it possible to style a custom element with an external css file that is linked on the index page but not in an element itself. I haven't found any documentation about using a css file not within the element itself.
I have something like this example.
<head>
/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">
</head>
<body>
<my-element></my-element>
<my-other></my-other>
<my-other2></my-other>
</body>
The problem is that the styling has been done in Firefox but not in Chrome.
So I know it's not a problem with the css.
Css looks something like this.
my-element {
header {
background-color: #article-color;
text-align: center;
margin-bottom: 25px;
h1 {
color: #ffffff;
}
}
}
/* Styling of other elements */
I know I can use css within the polymer element itself, but I don't want to do this. I have multiple elements and I want to style all of them within one css file that I link in the index file like in the example.
It is possible to style custom elements from the index file using a ::shadow or the /deep/ pseudo-element.
Example:
<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
color: red
}
</style>
</head>
<body>
<my-element></my-element>
</body>
But please know this before you use it,according to the Polymer docs this method is not very efficient in execution, meaning it could potentially slow the rendering of the page if used a lot.
More info about ::shadow and Styling Custom elements at:
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html