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
}
Related
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>
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 included a CSS file in my project for my own CSS use, but it is not working or having any effect on my page
the file default.css
.feedbackText{
display: none;
text-align: center;
margin-left: 50px;
color: blue;
}
in the HTML file:
<!-- Bootstrap core CSS -->
<link href="<?=THEME_CSS?>bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<?=THEME_CSS?>default.css" rel="stylesheet">
Later in the HTML file
<span id="invalidPasswordFeedback" class="feedbackText"></span>
The path is right, i checked it from the source in the browser, the PHP code is just a path to CSS files.
Thank you
As some commenters allready said, your rule is probably overridden by another, more specific rule.
You can fix that by making your CSS-Selector more specific, e.g.:
span#invalidPasswordFeedback.feedBackText{
/*Your rules*/
}
I am working in Joomla and the CSS that comes with a third-party has the following CSS code that is causing a conflict and I was told to have it removed:
[class*="span"] {
float: left;
margin-left: 20px;
min-height: 1px;
}
I don't want to remove this from the "core" of the third-party component because when an update comes in, it will overwrite this. I normally put in CSS I want to override in the template's custom.css file with !important and that has worked.
Is there a way, perhaps using !important to do the equivalent of removing the above block of CSS code so it doesn't function? I'm not a CSS expert, but is there a way of putting this in the custom.css that would make this CSS block non-functioning so it doesn't interfere? Thanks!
Yes
[class*="span"] {
float: none !important;
margin-left: none !important;
min-height: none !important;
}
But, unless there's a JS plugin loading that CSS on page load, there's no need. Include your CSS after the third-party's version, which you should always do anyway.
[class*="span"] {
float: none;
margin-left: none;
min-height: none;
}
Example HTML
<link href="/css/joomla.css" rel="stylesheet" />
<link href="/css/third-party.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />
custom.css rules will override third-party.css rules.
One way I would do it to give CSS class to my body. Say "myCustomClass" then.. override the above class as follows:
.mycustomclass [class*="span] {
add properties
}
Example: http://jsfiddle.net/ankitvijay/n4Enb/
When using custom css along with Twitter Bootstrap that overwrites some styles is it better to place the custom css link before or after the bootstrap-responsive css?
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
or
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
and what are the pros and cons of each?
If I edit the body padding after the bootstrap-responsive.css like so:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
/* Add padding for navbar-top-fixed */
body {
padding-top: 60px;
padding-bottom: 40px;
}
Then I must also fix the responsive layout using a media query as I have overwritten the global body style.
/* Fix to remove top padding for narrow viewports */
#media (max-width: 979px) {
body {
padding-top: 0;
}
}
It's usually better to place your custom CSS after the Bootstrap CSS. I'd imagine that you're wanting the custom CSS to override the Bootstrap CSS.
The advantages of placing your custom styles after Bootstraps is that you can change anything that is set in Bootstraps CSS by using the same selectors that they do. Making it very easy to change minor things. If you use the same selector then the browser will use the last rules applied to an element.
I can't really see any advantages of placing the Bootstrap CSS after your custom CSS, it wouldn't really make much sense to write your own styles and then override them with Bootstrap's...
For example, this isn't bootstrap CSS, but it would work the same way, if you had the following in your head section:
<link href="framework.css" rel="stylesheet" type="text/css" />
<link href="custom-styles.css" rel="stylesheet" type="text/css" />
Then in framework.css you had the following:
div.row {
border: 1px solid #eee;
border-radius: 3px;
margin-bottom: 50px;
padding: 15px;
}
But then you realised you wanted to add a red background (why oh why...) and change the border radius, you could have the following in custom-styles.css:
div.row {
background-color: red;
border-radius: 10px;
}
The resulting CSS applied to the element would be this:
div.row {
background-color: red;
border: 1px solid #eee;
border-radius: 10px;
margin-bottom: 50px;
padding: 15px;
}
Because the styles from custom-styles.css override the existing ones in framework.css and the additional ones are applied too! :)
I think if you put style.css on top then bootstarp styles will override it.If you put style.css at bottom then bootstrap styles will be overriden with your custom styles