On my laravel app, I'm using a forum package called "chatter".
This forum is injected into my master layout, so it looks like this:
nav bar
chatter package
footer
It's injected into a container called <div id="chatter">, and its styles are found in the style sheet chatter.css, which is separate from my main sheet.
The problem is, some of the styles in this sheet are conflicting with my nav and footer. Furthermore, some of the styles in my main sheet are affecting the forum (albeit minimally, so I don't mind making the changes manually).
I can't change the markup, but I can edit the styles.
So how could I make it so that all the styles found in chatter.css ONLY apply to what's inside of <div id="chatter">?
Add #chatter to every style in chatter.css like this
#chatter table{...}
#chatter tr{...}
#chatter td{...}
etc.
If style is for level above the chatter div then add after like this:
html #chatter{..}
body #chatter div{...}
You will have to namespace your CSS as user Nawed Khan pointed out but there is a much simpler way to do that than changing each of your styles manually. This method uses less to handle it for you.
Drop this in a file called chatter.less.
#chatter {
#import (less) 'chatter.css';
}
Then you need to include it on your page...
<link rel="stylesheet/less" type="text/css" href="chatter.less" >
Then you need to include less.js AFTER you've included your .less file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
In your .less file you might have to mess with the path to chatter.css, I believe it's going to be relative to whatever file you are including the .less file on.
Related
Here's a minimal working example of what I'm experiencing:
index.html
<head> <link rel="stylesheet" href="main.css"> </head>
<p> This is a test </p>
main.css
p {color:purple;}
#import "background.css";
background.css
p {background-color:yellow;}
Trying this in Vivaldi and Firefox, the style in background.css isn't applied. Shouldn't it be though? If I swap the two lines in main.css, #importing background.css first, it does get applied. But why would this matter? Shouldn't background.css be applied in either case?
Note this is the same issue being described in this question and this question, but the answers there don't get at the heart of the question—they recommend importing in the correct order in the HTML file, bypassing this issue altogether.
As already defined in CSS1:
In CSS1, all '#import' statements must occur at the start of a style
sheet, before any declarations. This makes it easy to see that rules
in the style sheet itself override rules in the imported style sheets.
A style sheet that is imported into another one has a lower ranking in the cascading order: the importing style sheet overrides the imported one. Programmers may recognize this as the same model as in Java, Modula, Object-Pascal, Oberon and other modular programming languages.
In CSS1 you should put the #import function at the top of the document (but after any #charset declaration).
The css syntax should be:
#import url|string list-of-mediaqueries;
This can all be found here: https://www.w3schools.com/cssref/pr_import_rule.php
I have a web app that needs to display pages whose CSS values are set via a form. To be clear: not the CSS parameters, just their values are user-defined.
I'm using a framework (jquery mobile). My css file is about 700 lines (the sass file is a little longer but full of comments and variables for colors, margins, etc). There are about a dozen variables inteded to be defined by the user (eg $pageBackgroundColor, $borderWidth, $spanColor), but each variable is used several times in the sass file.
Let's say I now have these dozen variables safely stored in my database, and a user requests a page. How do I provide the necessary CSS?
I could:
compile a minified css file at the time of form submission and link
it when a page is requested (downside: I'm likely to have several thousand CSS files sitting on my server)
compile a minified css text string and dump it between two <style> tags in the <head> (downside: ugliness, no caching, and request handling time increases)
Are there any other options? I looked at one site that does custom visuals for each user and they went for a separate CSS file for each person.
I'm using a Django+Postgres backend, if it's relevant.
You could move the style declarations in which these variables are used to inline CSS, in the <head>. Additionally, you could do this with just a few styles, but it does require you to add more classes to your HTML:
<style type="text/css">
.user-background-color {
background-color: #abc123;
}
.user-color {
color: #abc123;
}
.user-border-color {
border-color: #abc123;
}
</style>
Then your HTML gets additional classes:
<div class="style-1 style-2 user-border-color"></div>
So I went the giant composite heredoc external file route, with the file name saved in the db. It works well enough, but is obviously not fun to edit.
I have web application which uses Foundation.
I am not good at foundation and i have to develop few pages where i want to use Bootstrap but i dont want to mix with other company css.
SO i was looking if i can wrap all bootsrap inside some class like bootstrap. so that if i want to use bootsrap . i can use like
<div class="bootstrap"> <table class="table">
</div>
I don't know sass and all that.
is it possible to download some bootstrap css from online with some pre defined prefix
If you don't use SASS or LESS, you can use http://www.css-prefix.com/
Make a short prefix (my recommendation)
If you use a space, then it will be a parent class.
Paste in the compiled version of the CSS file
Click the run button
Result snippet:
.tb.col-xs-1, .tb.col-sm-1, .tb.col-md-1, ...
Indeed you could use namespaces, see: How to namespace Twitter Bootstrap so styles don't conflict, http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors and
In the case you need Bootstrap's CSS for tables only, you can compile the following Less / SASS code, after downloading the source code at http://getbootstrap.com/getting-started/#download:
**less / SASS **
.bootstrap {
#import "variables";
#import "mixins/table-row";
#import "tables";
}
As you see you can use the same code for Less and SASS, notice that the order of the imports does matter when compiling the SASS version.
update
The accepted solution only prefix classes (or selector having a class). In the case that you want to use Bootstrap's CSS to style your HTML tables. Your prefixed don't have bootstrap's styles for the table, th and caption selectors.
Even when you have never used Less / CSS before you can do the prefixing with Less (or SASS) easily leveraging an online compiler. A list of online Less compilers can be found at: http://lesscss.org/usage/#online-less-compilers. Also codepen has an online LESS and SASS compiler.
The only thing you have to know is what files to import. Bootstrap's Less files are well organized. You should always import variables.less and mixins.less. The mixins.less imports all other mixins. Mixins do not output, so importing all of them will slow down the compilation, but do not appear in the compiled CSS code.
In the case you want a prefixed version of the table CSS you can run the following code in one of the online compilers:
.bootstrap {
#import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/variables.less");
#import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/mixins.less");
#import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/tables.less");
}
An demo can be found at: http://codepen.io/bassjobsen/pen/PwPNBP
It sounds like you want to namespace Bootstrap, which is pretty easy to do using SASS (which Foundation uses, I believe). So in your SASS file (should have a .scss extension) you can import Bootstrap within a class name like this:
.bootstrap {
#import 'bootstrap';
}
And then you can reference Bootstrap in your HTML like this:
<body class="bootstrap">
<div class="col-xs-12 col-sm-6">
<table class="table"></table>
</div>
</body>
You can download SASS version of Bootstrap here: https://github.com/twbs/bootstrap-sass. Drop that SCSS file into the same directory as your main SCSS file and then you can import.
Imo the answers to this question are problematic. If you introduce a generic class to namespace everything, such as this...
.bootstrap {
#import 'bootstrap';
}
You are effectively increasing the CSS specificity.
What you really need is a tool that migrates Bootstrap to change the class names themselves.
For example,
E.g.
<div class="alert">
<div class="something alert">
<div class="something alert alert-danger">
Should become
<div class="bs-alert">
<div class="something bs-alert">
<div class="something bs-alert bs-alert-danger">
It should leave "something" alone because this class does not occur in Bootstrap.
To my knowledge such a tool does not exist (open source).
#Wolfr's answer has described the problem pretty well - in 2019 http://www.css-prefix.com/ doesn't work anymore, and all the other solutions that are in google top10 only increase css specificity by wrapping all bootstrap classes with the parent class.
That approach isn't bullet-proof:
e.g. if you make
.custom_namespace .col-3 {
width: 25%;
}
this won't protect you from someone using !important to bootstrap class for whatever reason some would do it.
.col-3 {
width: 99% !important;
}
Instead, there is actually one work I found through npm, where developer has indeed implemented that custom prefix AND even made it work with bootstrap's JS file. But it's only for Bootstrap 3: https://www.npmjs.com/package/bootstrap-sass-namespace
This will generate all bootstrap classes in form of e.g. .custom_prefix_col-3 {}
One more option if you need truly namespaced Bootstrap 4 css:
In my case I needed Bootstrap 4, so I opened bootstrap css file, ran search and replace in Sublime Text with Regular Expression, using this value for search:
\.(?<TAG>[a-z]{1,3}) - this captures all the beginnings of the classes by using period and first one to three letter characters as opposed to just searching for period (.) and risking to mess up float values for CSS properties.
and for replace I used .the_prefix_I_need\1
This allowed me to produce truly isolated bootstrap 4 css file that for sure won't be messed up if someone somewhere at the websites where my app is included will decide to redefine some bootstrap classes with !important.
I set up just a static page on my computer using SASS for the styles, and used a variable called $productColor throughout the styles. It's used for a bunch of different stuff like banner background colors, header colors, and link colors.
Now I moved the page to our server, on ExpressionEngine. I would like to have an ExpressionEngine field, so for each entry, a different color can be chosen, and that color will appear on the page.
Now I don't really know how to go about this. I don't even know how or if I can put a sass file on my server and get it automatically compiled into a css file. Anyways, any suggestions?
just define all colors in classes, and have a dropdown with the class names.
then in your template do something like this
{exp:channel:entries channel="my_channel"}
<html>
<head>
</head>
<body class="{my_chosen_color}">
---
</body>
</html>
{/exp:channel:entries}
how is at the rate import filename.css in style tag different from link tag to relate to css file.?
I'm confused and they both do the same thing of giving css file path.
I'm using this
<style>
#import "filename.css";
</style>
- Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet. It is added to the of your HTML document like this:
#import - Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. But if you include an #import in the head of your HTML document, it is written:
#import url("styles.css");
more info : http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
Never use #import for stylesheet because it's block parallel download which effect the page performance.
Always use <link rel="stylesheet" href="stylesheet.css" > for stylesheet.