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.
Related
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.
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
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/
Hopefully my title isn't too confusing. Anyways, I'm still learning CSS and right now I'm in the process of creating a mobile version of my company's site. I currently want to modify our navigation bar and the CSS for the navigation is a bit lengthy. So right now in the CSS file there is
.nav { /*styles*/ }
.nav ul { /*more styles*/ }
.nav li { /*more <s>beer</s> styles*/}
/*and so on*/
Is there anyway to have it so the mobile version of the site ignores all #nav selectors from the original file regardless if I made a new selector in the mobile css? Or do I have to override each selector in the original css with new ones in the mobile css?
You can create your stylesheets with media attributes, like so:
<link rel="stylesheet" media="screen" ... etc./>
The fragment above references a normal browser window.
Here's where you can find out about those: http://www.w3.org/TR/CSS21/media.html
I would suggest separating the contents of your regular and mobile styles into separate stylesheets, like this:
Base: Styles common to both.
Regular: Styles only for the main site.
Mobile: Styles only for the mobile site.
Base is always included. Only regular or mobile is then included depending on the device viewing. That way you don't have to worry about overriding styles in one just to "reset" styles from another.
You can use the media property in your stylesheet link elements to determine when a stylesheet gets loaded.
You have to provide two different style sheet files and import them specifying a media type
<link rel="stylesheet" href="/all.css">
<link rel="stylesheet" media="screen" href="/computers.css">
<link rel="stylesheet" media="handheld" href="/mobile.css">
Alternatively you can use just one css file, in this way
#media print {
body { font-size: 10pt }
}
#media screen {
body { font-size: 13px }
}
#media screen, print {
body { line-height: 1.2 }
}
In your specific problem, you could just add #media screen at the beginning of the .nav definitions.
#media screen {
.nav { /*styles*/ }
.nav ul { /*more styles*/ }}
.nav li { /*more <s>beer</s> styles*/}
}