How to Stop Overriding of Bootstrap Css Styles - javascript

Problem
I have a stylesheet (bootstrap) that when applied in the header overwrites my personal styles.
I do need these bootstrap styles when the js is invoked otherwise the dialog that pops up is un-styled.
How can I stop my own styles from being overwritten?

I didn't understand your question fully, but here's what I understood:
1- You are using Twitter Bootstrap in your project, and it is overwriting your stylesheets.
2- You need bootstrap for a popup dialog and nothing else.
Well, from the first question, you can:
-Call your hand-made stylesheet AFTER calling Bootstrap's css.
-Change your stylesheet CSS classes and ID's.
-Hierarchize your classes from the ID's, for example:
#foo{
color: black;
}
#foo .bar{
color: white;
}
#foo .bar>li{
margin: 10px;
}
-Add a '!important' after the affected classes (Not recommended at all).
For the second matter, you could:
- Costumize your boostrap, you could pick certain plugins (such as popup), and exclude others that you don't use. (Costumize Bootstrap)

Like Nick R mentioned in the comments - Order is important here. The browser will 'overwrite' styles as stylesheets are loaded. For example, if you have two sheets:
.darkdiv {
color: #fff;
background-color: #000;
}
and then a stylesheet with:
.darkdiv {
color: #888;
}
Any element with class "darkdiv", will keep the original background-color but have the grey (#888) colored text as that style was 'overwritten' by the second stylesheet.

Related

Only some CSS custom properties work, although all are clearly present in the HTML and shown by the inspector

I'm working on implementing different themes across my website. I've refactored my main stylesheet to feature variables, and have three other "theme" stylesheets that define those variables at the :root level. The final HTML then links to two stylesheets: The main stylesheet and one of the three theme stylesheets, which are switched on button click by changing the link's href attribute. Somehow, only some of the variables are working.
/* dark.css (theme stylesheet only containing the custom properties) */
/* Only --background works */
:root {
--background: #000000;
--seperator: rgba(1,1,1,0.12);
--text: #FFFFFF;
--block-border: #404040;
--block-shadow: #000000;
--block-background: #151017;
}
/* All properties work except for --comment */
code {
--keyword: #F72057;
--type: #FF9519;
--call: #FF5700;
--property: #FF5700;
--number: #F72057;
--string: #F72057;
--comment: #FFFFFF;
--dot-access: #FF5700;
--preprocessing: #646485;
}
When I then go into the inspector, everything seems to be alright. I can see the proper inheritance, and I can even click on the variable where it's used and see the intended color.
Some examples of how the variables are used:
/* styles.css (main stylesheet) */
body {
...
background: var(--background);
color: var(--text);
}
pre code .comment {
color: var(--comment);
opacity: 0.4;
}
Other approaches
I've tried several other approaches, all of which led to the same result (only some variables working).
Instead of linking to another stylesheet, directly change the variables with javascript on the HTML tag
Instead of linking to multiple stylesheets, having three separate main stylesheets
Changing a custom attribute in the HTML tag and defining all variables like [theme="dark"] {...} in one main stylesheet
As #Pushkin and #Temany Afif have pointed out, there were strange characters all over my code. A quick project-wide find and replace solved the problem.

Override .css stylesheet file (not inline)

Is it possible to somehow override the default (in this case liquid) CSS stylesheet, but without using inline styles?
Also I want that style to apply only to that specific page, and not any others.
Yes, I can use !important inside <style> tag on that specific page, but I would need to reset a lot of things. It just too much work, and looks very messy.
So is there any way I could reset ALL elements to default property values, and use my own style just on that one page?
Well you can't modify your .css files, but you can replace files dynamically using js.
function replaceFile(newFile, fileLink) {
var oldcss = document.getElementsByTagName("link").item(fileLink);
var newcss = document.createElement("link");
newcss.setAttribute("rel", "stylesheet");
newcss.setAttribute("type", "text/css");
newcss.setAttribute("href", newFile);
document.getElementsByTagName("head").item(0).replaceChild(newcss, oldcss);
}
Another solution, would be to add the desired styles using jQuery or js.
$('.demo').css({'background-color':'red','color':'white');
css stands for Cascading Style Sheets so once you've added a style you can only change or remove it by using another style. to answer your question specifically no you can not. or as mentioned in the comments just remove the stylesheet from that specific page.
You can select all elements inside a wrapper with * and override:
Example:
.mylink{
color: red;
}
.mylink:hover{
color: black;
}
.reset *{
color: orange;
}
.reset *:hover{
color: silver;
}
This is the link without reset:
Link
<div class="reset">
This is the link with reset:
Link
</div>

Can I make an element inherit the properties of other elements?

We're providing a pre-populated WordPress site for multiple members to use on their servers. The theme has a selector where they can customize their heading colours and fonts. Each member will have different colours based on their branding.
The site also includes a knowledgebase plugin and it uses its own colours which can be customized within its interface. Instead, we'd like to be able to set the knowedgebase colours/properties based on the theme's colour palette. (Ultimately, we'd like the member to only have to change the colors for the theme in one place rather than customize every single plugin.)
So, if H1 is globally set to blue, we'd like to be able to tell the knowledgebase's element (.kb-header) to be the same colour as H1.
Is this at all doable via CSS or Javascript or something?
Many thanks!
You can make an element to inherit the properties of a parent element. For example:
p { color: red; }
a { color: inherit; }
<p>Paragraph with link</p>
But definitely this won't work for what you're asking if your .kb-header is not a child of your h1.
Instead you could use different approaches to get the desired result. For example with custom properties (a.k.a CSS variables)
:root {
--user-color: red;
}
h1 {
color: var(--user-color);
}
.kb-header {
color: var(--user-color);
}
<h1>Title</h1>
<header class="kb-header">This is the header</header>
This way you could, for example, output your :root selector defining all your custom properties in your <head> tag using PHP. And your CSS would be totally independent from it.
If you want to inherit (Object Oriented Programing like) if the html tags doesn't have any relationship, you can use SCSS, for example SASS, it's a text pre processor that generates the CSS with a CSS-like coding with the addition that you can use variables and much more.
For more details visit SASS lang webpage i think this can help you a lot for mostly all your projects.
If you don't want to use SASS, you can even use javascript (with or without libraries) to reach this job, as plain CSS is not capable to conditionally apply styles between non-related tags.
I've written a miniature version of what you're looking for. Hope this helps :P
<html>
<style>
h1 {
background-color: blue;
}
</style>
<body>
<h1>Hey!</h1>
<div class="kb-header">I'm a div :)</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var bgColor = $("h1").css("background-color");
$(".kb-header").css({"background-color": bgColor});
});
</script>
<body>
</html>
In CSS you can combine selectors with a comma and have a single block of rules for both:
.a, .b { property: value; }.
And still style one or another selector with other declarations (example below).
When selectors are unrelated, it causes maintenance problems but if it's generated by a theme generator, that should be OK (you don't want to style those given components but have a clear documented list of what has to be styled with a set of colors).
h1,
.kb-header {
color: darkred;
}
h1 {
font-size: 2rem;
}
#media (min-width: 961px) {
.kb-header {
border: 1px solid tomato;
}
<h1>Title</h1>
<p>Unstyled paragraph</p>
<header class="kb-header">This is the header</header>
You can also add a utility class to all elements that are to be styled with a border, a background color and a color:
/* Theme 1
Primary color: #0055D0
Secondary color: #080;
*/
.c-primary {
color: #0055D0;
}
.bd-secondary {
border: 1px solid #080;
}
/* Common styles */
h1 {
font-size: 2rem;
}
.kb-header {
padding: 1rem;
}
<h1 class="c-primary">Title</h1>
<header class="kb-header bd-secondary c-primary">This is the header</header>
Other answers talking about a Sass environment (or other preprocessors like PostCSS and LESS) and CSS "Variables" (if you don't have to support old browsers like IE11 and Edge ~15 + Saf (iOS and OS X) 9.2 https://caniuse.com/#search=custom%20prop are also fine solutions to your problem IMHO.

Can I prevent a CSS style to be overwritten?

I'd like to apply a CSS to some linkbuttons on page load but one of them <a id="lb1">logoff</a> must keep its style, no hover nor other event must change its style.
The linkbuttons have no class and the css applied to all of them is done to tags, this way:
a
{
//style
}
a:hover
{
// style
}
Is it possible?
No, you can't.
You can use more specific selectors (or even inline CSS with the style attribute) so that they are less likely to be overridden accidentally.
You can use the (eugh) sledgehammer of !important so they will only be overridden by another !important rule.
There is no way to prevent them being overridden though.
Please please please please please avoid using !important whenever possible. You will run into SO many annoying problems and issues from using this. I consider it a very lazy hack.
What you want to do is append a class to the link that you don't want overwritten. Classes are given a higher priority than general selectors (such a, p, b). So if you append this class to the link, the CSS will override the default CSS you have set for a.
CSS:
a {
color: red;
}
a:hover {
color: blue;
}
.derp:hover { /*you can add everything you want to preserve here, essentially make it the same as the link css. you can also change it to #lbl:hover, although there's no good reason to be using an ID as a CSS selector*/
color: red;
}
HTML:
this will turn blue on hover
<a class="derp" href="#">this will stay red on hover</a>
Here's a fiddle to show you. The second link has a class appended that preserves the original style: http://jsfiddle.net/p6QWq/
Why not add a class to all the link buttons you want to change, and not add it to the one you don't want to change.
Then you can call:
$(".myClass").css("backgound-color", "blue");
This would change the background color for every element with a class of myClass to a blue background.
Or you could add a whole new class to the link buttons that have a class of myClass:
$(".myClass").addClass("myExtraClass");
This would then make the class attribute of your link button class="myclass myExtraClass"
Seeing your code posted makes it a little more clear on what you want to do. Try this:
a {
text-decoration: none;
color: orange;
}
a:hover {
text-decoration: underline;
color: blue;
}
This would apply a default style to all <a> elements. Now you could overwrite this default style by providing a specific style for the anchor with the id you gave above:
#lb1 {
color: black;
text-decoration: none;
}
#lb1:hover {
color: black;
text-decoration: none;
}
I mocked this up in a quick and dirty jsFiddle. See if this gives you the desired result. IDs take precedence over classes and default element styling. So if you have one that you want to keep the same, apply and ID and style the particular element accordingly. This would also help you by preventing you from having to apply a class to several elements. It's less coding to apply one ID than to apply twelve classes. (Just an exaggerated example. I don't know how many links you have.)
Hope this helps.
css is cascading by definition, so any style you apply to a tags will apply to this specific one, except if you overwrite it.
You'll have to either assign a class to all the other buttons or overwrite all the default properties for this specific button.
Also, do not forget the pseudo-classes :visited and :active.
You should use !important in your css like :
a {
/* style */
background: #FFF !important;
}
a:hover {
/* style */
background: #FFF !important;
}
You could always overwrite your css by simply creating another stylesheet and place it at the END of your stylesheet links in the head of your html.
<head>
<link rel="stylesheet" href="location/location/first_stylesheet.css">
<link rel="stylesheet" href="location/location/revised_stylesheet.css">
</head>
This is not the most productive method of overwriting your css however; one would be well advised to eliminate the necessity for this separate stylesheet by simply appending elements with a class attribute. The class attr will allow you to modify basic html elements, tags and overlay a final layer to "rule them all". Enjoy!

Dojo Dijit styling issues

I'm trying to use a dijit/layout/TabContainer with a modified dijit theme. I need to modify some of the styling of the TabContainer tabs such as the padding of the tabs, boldness, etc. However the styling commands specific to the pages that use the TabContainer are not working.
This piece of code is on my home page's CSS file.
.myTheme .homeTabContent
{
font-weight: bold !important;
}
.myTheme .homeTabContent .dijitTab /* The .dijitTab is the original CSS class of the tab*/
{
font-weight: bold !important;
padding-left: 3px !important;
padding-right: 3px !important;
}
The tabs' padding and font-weight remain unchanged despite the !important. Editing the TabContainer CSS file in myTheme isn't a practical solution because I that will just mess up the styling of a different page. What happens is that as I load the page with the styling, my commands appear to be working for a split second, however all of that is undone when the TabContainer finishes loading. Can anyone tell me why or offer me a solution? Thanks in advance!
Here is a working solution. http://jsfiddle.net/oamiamgod/rd58M/
I have included class myTheme to body tag. Like this
<body class="claro myTheme">
I'm not good at english but I will try to explain.
If you write css like this .myTheme .homeTabContent .dijitTab that mean an element of class homeTabContent have to stay inside some element that has class myTheme
Like this
<body class="claro myTheme">
<div class="homeTabContent">
<div class="dijitTab"></div>
</div>
</body>
But if you write css like this .myTheme.homeTabContent.dijitTab (with no space) it will be
<div class="myTheme homeTabContent dijitTab"></div>

Categories

Resources