I'm using AdminLte in my project, and in a html page I have:
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<aside>
Everything works fine.
I created a custom scss file to support multiple tenants, imported scss files and I created then following style:
#import '_adminlte/node_modules/bootstrap/scss/bootstrap';
#import '_adminlte/build/scss/adminlte.raw';
.tenant-sidebar {
#extend .main-sidebar, .sidebar-dark-primary, .elevation-4
}
so then I change my aside tag to:
<aside class="tenant-sidebar">
<aside>
However, doing this applies only the main-sidebar and elevation-4 classes. The sidebar-dark-primary class is not applied.
Is there a reason why this is happening?
TLDR:
.sidebar-dark-primary class is empty in the adminlte.css
As I saw it, sidebar-dark-primary css class doesn't have any style in the generated css file. It's only purpose is to wrap the child elements stylings like this:
.sidebar-dark-primary .nav-sidebar.nav-legacy > .nav-item > .nav-link.active
So when you #extend this class, there won't be any related stylings.
According to the SASS Docs on #extend,
.tenant-sidebar {
#extend .main-sidebar, .sidebar-dark-primary, .elevation-4
}
basically means extend this selector: .main-sidebar.sidebar-dark-primary.elevation-4
I would give this a try instead:
.tenant-sidebar {
#extend .main-sidebar;
#extend .sidebar-dark-primary;
#extend .elevation-4;
}
Related
I'm working on a webpage and I have an issue, I've created a css function for my image
#my_linkedin {
background: url("../img/linkedin.png");
}
but my isssue is that when I'm calling the class in my HTML, the image doesn't appear.
<div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
<a onclick="window.open(this.href,'_blank');return false;" class="my_linkedin" href="https://www.linkedin.com" target="_self"></a>
</div>
My file is called creative.css and I also have the same file but minified. The issue is that on the webpage, the css are coming from the minified file, so how can I import my css who's coming from the creative.cssplease ? Because I don't want to have to put it in the minified one.
Thanks.
In this case you can have 2 problems.
First - link just empty and it width and height are equals to 0. So you cant see you backdround.
Second - I can see that you are using #my_linkedin as a selector which means that you is searching by id, replace to .my_linkedin.
You want .my_linkedin { ... }. # is for writing styles to match elements with matching id="..." attributes. . is for classes.
Some errors here.
You are referring to a css rule, not function.
You are defining a css rule for a specific id, but on your html your element don't have an id, instead it have a class.
#someid {
color: red;
}
.someclass {
color: green
}
<p class="someid">BLACK</p>
<p class="someclass">GREEN</p>
<p id="someid">RED</p>
<p id="someclass">BLACK</p>
Your problem isn't related to whether or not the file is minified. Your selector applies to an element with id="my_linkedin, but your HTML doesn't have such an element. You can either change class="my_linkedin to id="my_linkedin" or you can change the CSS selector to read .my_linkedin
In CSS you don't call that a function. The #my_linked part is called a selector and the stuff inside the curly braces are called properties. Likewise, you can't call anything in CSS as you would in a programming language.
I'm using bootstrap for a navbar that I like and I use the style.css from bootstrap, but I also want to implement some elements from another framework that has its own style.css. The problem is that the elements appears distorted because the second style rewrites the first.
Is there a way to specify the influence of a style.css?
For example, style_1.css to have influence over:
<header>...</header>
and style_2.css to have influence over:
<main>...</main>
It is not possible to do it directly using those CSS files that are distributed, but you can create namespaces for each CSS framework library (or CSS file) and use that wherever you want to use that framework features.
See How to namespace Twitter Bootstrap so styles don't conflict and Is there any ready to use Bootstrap css file with prefix for more details on how to namespace your style-sheets.
If you're using less, then you can create a namespace by adding a pregfix to bootstrap like this:
.bootstrap-styles {
#import 'bootstrap';
}
/* OR */
.bootstrap-styles {
#import (less) url("bootstrap.css");
}
You can use http://www.css-prefix.com/ to prefix any CSS file and then use it like this:
<header class="bootstrap-ns-prefix> (some bootstrap code inside) </header>
<main class="style2-ns-prefix"> (some other framework/css styles that don't get affected by bootstrap) </main>
EDIT
It does not work automatically, you have to namespace each of your CSS and then use those CSS files instead of the initials. The generator www.css-prefix.com works for me, but it adds some extra classes/namespaces at the beginning/end and before/after each comment; you should check that and correct/delete any errors before you proceed. As I mentioned above, you can use LESS or SASS frameworks to generate those namespaces.
Here is an example of using both Bootstrap and jQuery UI together:
<head>
...
<link rel="stylesheet" href="css/bootstrap_ns.css">
<link rel="stylesheet" href="css/jqueryui_ns.css">
...
</head>
<body>
<button class="btn btn-primary">Test Button</button>
<div class="bootstrap-ns">
<button class="btn btn-primary">Bootstrap Button</button>
</div>
<div class="jqui-ns">
<button id="jqbtn" class="btn btn-primary">jQuery UI Button</button>
</div>
<script type="text/javascript">
jQuery(function($) {
$('#jqbtn').button();
});
</script>
</body>
And the result is this one:
As you can see, all three buttons have the bootstrap button classes btn btn-primary but only the button inside bootstrap-ns container uses the bootstrap styles.
Here you can see a demo page: http://zikro.gr/dbg/html/bootstrap-ns/
Here you can check bootstrap.css and jquery.ui.css generated by www.css-prefix.com and manual cleaned.
I had the same problem and I resolved it like this:
copy the CSS rules you want to use in a specific region.
convert them to SCSS by pasting them in this link: css2scss and then
Click on the arrow (choose SCSS).
copy the SCSS rules result you got, and paste them in this link: scss2css.
wrap the entire SCSS rules with this rule: .wrapper {}
like this:
.wrapper {
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
/*all other rules*/
}
click on the 'compile' button and wait until you will get all your CSS.
the above SCSS will result like this:
.wrapper a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
and so All your other CSS rules will be prefixed with the .wrapper class.
Click download button to download your CSS, and then link it to your HTML
page.
to use this CSS only in certain regions warp that region with a div
and give this div a class "wrapper".
<div class = "wrapper">
<a class = "a_Class_From_The_Downloaded_CSS_File"/>
<!-- put here all other HTML tags you want
and add all the class etc. you want from the
CSS file you created.
it will not collide with other CSS class from other
CSS files because of the div.wrapper tag
-->
</div>
Generally not. However you could use the > selector everywhere:
#divtoApplyTo > a {
color: green;
}
So that just all links in that specific div get changed.
This is not possible. Stylesheets are applied to the whole document and not to subsections of it. Whether an element is affected by the rules is then subject to the used selectors. Following of that, when you want a rule to only apply to elements within <header>, they must begin with header > or header (space).
However, from your comments it follows that rewriting all rules is not an option since it's too many. A solution might be to use a preprocessor like SASS.
Example:
Input (SASS)
header > {
div {
color: red;
}
button {
border: 1px solid hotpink;
}
}
Output (CSS)
header > div {
color: red;
}
header > button {
border: 1px solid hotpink;
}
The idea would be to wrap all rules that should only be valid for <header> into an appropriate block and let SASS rewrite the rules for you.
However, this leads to blowing up the overall file size. Also, one should not forget that frameworks also include global rules. Since something like header > html or header > body is bogus, this solution might still require doing manual changes.
Haven't tried it, but found this: The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is: Applying CSS styles only to certain elements
Concatenate the two Bootstrap files (bootstrap.css and
bootstrap-responsive.css) into bootstrap-all.css.
Create a new SASS file, bootstrap-all.scss, with the content div.bootstrap {.
Append bootstrap-all.css to bootstrap-all.scss.
Close the div.bootstrap selector by appending } to bootstrap-all.scss.
Run SASS on bootstrap-all.scss to produce a final CSS file.
Run YUI Compressor on the final file to produce a minimised version.
Add minimised version to head element and wrap everything I want the
styles to apply to in <div class="bootstrap"></div>.
I am using jsonform (https://github.com/joshfire/jsonform) in order to generate forms from json schema, and the jsonform requires his own css for the form, but i am using another css for my site's template.
Is there a way to apply a css only on a specific tag ? for example only to the html inside ?
I am using rails, so the head is not changing from page to page.
thanks.
If you're using a CSS preprocessor (i.e. SASS, LESS, SCSS, etc.) then it might be an easy job to just indent your custom css under one class/id/tag. You can check this SO question: apply CSS style to particular elements dynamically.
Try this>>>
<link rel="stylesheet" type="text/css" href="theme1.css">
<link rel="stylesheet" type="text/css" href="theme2.css">
Inside theme 1 you would link to certain classes and in theme2 you would link to other classes. Please comment back if you need more help or this is not ideal
for example html
<div id="test" class="testing"></div>
the css would be
#test{color:red;}/*for ids*/
.testing{color:red}/*for classes*/
the styling in the curly brackets can be changed to what you want and the classes and ids can be in any external css if you link your page to it using link rel=
Yes you can. You need to give an ID to the body of your HTML doc if you want to target only that page, or give an ID or class to the element you need to.
<!-- HTML -->
<div class="your-class">
Your content
In the CSS:
.your-class {
your: style;
}
or
<!-- HTML -->
<body id="your-id-name">
<div class="generic-class">
Your content
/* using CSS */
body#your-id-name {
your: style;
}
body#your-id-name .generic-class {
your: style;
}
Hope it helps ;-)
Yes, offcourse there is, that's what CSS is all about.
If you add an ID or a class to the containing element that holds the form, you can add that ID or class to all the CSS selectors in the JSONform css.
for instance:
<div class="jsonform">
{json form goes here}
</div>
and then in your jsonform css, prepend '.jsonform' to all the necessary selectors:
.jsonform input.text {border:none...}
.jsonform input.submit {background-color:...}
I had a look at that jsonform css. I'm amazed that it just uses the complete Twitter bootstrap CSS, there's quite a lot of styling in there that will definitely override your own CSS. I would try to strip out anything that's not directly needed for the form, like body, img, p and h1 declarations.
Maybe the form works fine without the extra styling; you can then apply your own CSS to the form elements...
The CSS included with jsonform is Bootstrap, but the README.md in the /deps directory states that usage of this file is optional. As long as you don't include bootstrap.css in your HTML, you can style the form controls however you'd like/avoid Bootstrap overriding your own styles.
If you want to keep using Bootstrap for jsonform ONLY, you can try "namespacing" the Bootstrap styles using LESS or SASS. Have a look at the first two answers to 'How to namespace Twitter Bootstrap so styles don't conflict' for an idea how to do that with LESS.
Here is my setup:
File Relationships
home.php <---styles---- _layout.scss
|
imports
|
v
animation.html <---styles---- _animation.scss
home.php - the file used to outline the "layout" HTML for the homepage:
<div id="animation">
<div class="site-container">
<div class="animation-container">
<?php include 'animation.html'; ?>
</div>
</div>
</div>
_layout.scss - the files used to style the non-imported contents of home.php:
#animation {
//styles <div id="animation">
}
.site-container {margin: 0 auto; max-width: 980px;}
.animation-container {
//styles <div class="animation-container">
}
animation.html - contains the html for the "module" called "animation" imported above
<div class="animation-wrap">
<div class="example-selector"></div>
//more html for animation module
</div>
_animation.scss - styles the html in animation.html
Question:
How should I be encapsulating the selectors in _animation.scss?
Possibilities
1.) I could nest all selectors in _animation.scss like so:
.animation-wrap {
.example-selector {
}
//all other selectors are nested here using SASS, thus they will not affect
//elements outside of the animation-wrap
}
2.) I could namespace almost all selectors in _animation.scss by adding the prefix "animation-" (and in the corresponding html)
.animation-wrap {}
.animation-example-selector {}
3.) Could use child selectors to reduce cascading, but I doubt that's best and it has poor IE support
4.) Subclassing? But, I think that is more relevant to moving the module elsewhere, not encapsulating it to make sure it doesnt leak into other module/layout code
Sorry for the long-winded question, it was awkward to put into words. Any additional advise or knowledge of best practice is greatly appreciated
Sorry for the poor question. This is a better worded question for a similar problem.
I decided to use SASS 3.3's brand new '&' flexibility to namespace the selectors in _animation.scss like so
.module-animation {
&-animation-wrap {
}
}
This keeps the html clean, encapsulates the module, and doesn't clutter the css with long prefixes.
is there any efficient way to scan the id & class name in css file? there are many css file in my web app and now i have to add some more css file. I often get stuck to define the ID & Class name which is already defined in another css file and it causes problem during testing.
I am really tired of keep changing the id & class name. can some one give me any tips to sort it out.
#Edit : suppose there are two css files in a web app old_1.css & old_2.css
old_1.css #id_1 {width:100%;height:100%; .... }
#id_2 { width:50%; height:50%; .... }
old_2.css #id_3 {width:70%;height:70%; .... }
#id_4 { width:30%; height:30%; .... }
Now i am creating a new css file new_1.css and by mistake i wrote the simmilar id of old css file. this is where i get stuck and i want to avoid to rewrite the same ID.
new_1.css #id_1 {width:80%;height:80%; .... } // this id is already declared in old css file
Rather than ensuring each CSS class name is unique, ensure that the CSS styles cannot clash by including parent elements in your CSS. This is better for structure:
HTML:
<div class="section1">
<div class="inner_div">
</div>
</div>
<div class="section2">
<div class="inner_div">
</div>
</div>
CSS:
.section1 {
}
.section1 .inner_div {
color:red;
}
.section2 {
}
.section2 .inner_div {
color:blue;
}
This will ensure that only div's with inner_div class will be given the style color:red where they are contained in a div with the class section1. Likewise, only div's with inner_div will be styled color:blue where they are contained in a div with the class section2.
Using this format should prevent you from ever having duplicate class names as you can define as far as you like, for example if I was applying a style to a span tag displaying the date for a news article I'd use:
.main_container .news .article .details span.date {}
This is a lot easier to read, and a lot less likely to be duplicated than:
.news_article_date {}
Otherwise, like #Ant has stated, use a good HTML editor software and do a Find on the classes and IDs used.
If refactoring the old CSS files are beyond the current scope of your work, you can simply override the old styles by making your selectors more specific. A good tutorial on CSS specificity is given here