For background, I am trying to load SVG icons in my react app and am using the object tag so that I can manipulate the color of the icons easily.
In this guide, they say:
If you want to use external styles, which are mostly much easier to work with and maintain, you can’t use or background-image. If you are using you need to reference your stylesheet internally from the SVG file (see code following). Remember: if you do this the SVG will also not be able to know what its parent class is (i.e. the ) so don’t try to use that in its styling. Inline SVGs don’t need this added and therefore can be slightly easier to work with in this sense.
and provide this code example:
// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>
// In style.css
.firstb { fill: yellow; }
.secondb { fill: red; }
To give you an idea of how my files are organized, my src folder contains an assets folder along with my components folder. My style.scss file lives within the src folder as well.
I'm having trouble figuring out what to add to the top of my svg files. My understanding of sass is that it would usually compile style.scss to style.css, however, when I look at my sources in dev tools it shows that style.scss is being loaded directly. Is this just because I'm still in development mode?
Anyways, I've tried the following (none of which have worked):
<?xml-stylesheet type="text/css" href="./style.scss"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<?xml-stylesheet type="text/css" href="style.scss"?>
It would be a huge help if anyone knows how I can get this to work! Let me know if there's any other information I can provide. Thanks so much!
You are correct to assume that you'd need to compile style.scss to style.css, so first ensure that only the CSS is being referenced in the SVG. This is the most straightforward way to get this to work, but a better solution would be to import your styles once in your root HTML template instead.
Now, if you're using React it's likely that you're also using a bundler such as webpack. You can tell bundlers like webpack to handle non-JS imports such as Sass files by using loaders. There is a sass-loader for webpack that will allow you to import Sass files, however you may also need to add the svg-inline-loader so that you can import the SVG directly.
I think with both loaders, what will happen is that webpack will start bundling your React app, see that an SVG is imported, grab it and see that it is referencing a Sass file, grab the sass file and compile it, and then output the styles in your index.html file. Please let me know if this solution works for you!
I found a workaround. Not exactly what I was hoping for, but it works for me.
There's a react-svg package that handles an ajax request and pulls the svg in as a normal svg tag. This allows me to edit with my sass file.
https://www.npmjs.com/package/react-svg
I was looking for an easy way to prefix a style sheet and sass works just great. I don't need any building tool, just vs code sass extension, and press watch.
What I did was, renamed the css to scss and then imported it inside the main style nesting in the selector I want, like:
#wrapper {
#import 'style1';
#import 'style2';
}
The issue comes when one of the files has #font-face, they also get prefixed and that is a problem. I checked the issue tracker and apparently this is the correct behavior.
https://github.com/sass/sass/issues/2442
Given that. I am looking for a way to import only the #font-face rules to the root instead of the #wrapper selector.
Is this possible without having to change the content of 'style1' or 'style2' ?
I was able to get around this problem with node sass magic importer.
But again you need node scripting and terminal, but can be mitigated with a bundler which kinda is not what I want but at least I can sort of prebuilt it and still use a watcher.
But given the hasle to set this up for such a simple thing I would just go to the style sheet and copy the font-faces to the root of the main file anyways.
If anyone knows a solution with sass only please reply.
I'm wondering what application.css is for? If I'm creating a new file for header and footer so all my pages can just include header and footer page, do I just put all common css syntax in application.css? or should I just create a new custom.css and place all the syntax that is going to be used throughout my application like body, html, ul, a, tags and stuff?
Thanks
What is application.css for? Have you read the Rails guide on the Asset Pipeline? That page alone answers your "what's it for?" question and more very clearly and thoroughly.
As for placement of your styling, the guide mentions:
The default matcher for compiling files includes application.js, application.css and all non-JS/CSS files (i.e., .coffee and .scss files are not automatically included as they compile to JS/CSS):
This means by default Rails is only going to compile an application.css file for you. Sure, you can put your styling in app/assets/stylesheets/custom.css and include it with
/**
*= require custom
*/
but your "custom" styling sounds like application styling, so it seems it'd be best to just drop it all into application.css and let Rails do what it does by default.
I have a top docked toolbar, and I used firebug to inspect the element to find the css class, which was:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
}
I changed this to:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
background-color: transparent !important;
}
Now I see the toolbar as transparent in Firefox, but in chrome it still has the default background color (blue). Why does this happen? Maybe I don't need to use this technique here, but there are definitely instances where I need to find a very specific css class using firebug. Any help or information?
Note: I tried using the Cls attribute of the toolbar with the same result.
In Chrome the background image (it's a gradient) works meanwhile in Firefox it is ignored.
So all you have to do is set the background-image and the background-color of .x-toolbar-dark like this:
.x-toolbar-dark{
background-image: none;
background-color: transparent;
}
http://jsfiddle.net/awHkT/1/
Sencha is for webkit browser, so it's CSS is made for webkit browsers like Chrome or Safari. So this kind or problem must be because there's a CSS rule with a -webkit prefix that is hence only applied on webkit browsers and ignored in firefox.
But anyway, toolbars have a gradient background, so if you want to override it you will need to do like so :
background-image: none;
background-color: transparent;
Two last thing
It's bad practice to override Sencha's CSS. Use the the cls config on you toolbar to assign it a CSS class and then use this class to style your toolbar.
Don't test you app with Firefox, but with Chrome of Safari.
Hope this helps
Can you creating a custom theme installing SASS and Compass. The instructions for installing SASS and Compass vary slightly for Mac and Windows users. Mac users will need to open the Terminal application and type the following:
i. sudo gem install haml
ii. sudo gem install compass
You will need to authenticate with your username and password to complete the install.
Windows users need to open the command line and type the following:
i. gem install haml
ii. gem install compass
Installing Ruby
Mac users get a break, since Ruby is already installed on OSX by default. Windows users should download the Ruby installer from rubyinstaller.org.
Once the installation is complete, we are ready to set up our folders and begin using SASS and Compass.
Creating your custom theme
The next thing you need to do is create your own theme SCSS file. Locate the sencha-touch.scss file in ../lib/resources/sass, and make a copy of the file. Rename the new copy of the file to myTheme.scss.
Now, you need to tell the index to look for your new theme. Using your previous example files, open your index.html file, and locate the line that says the following:
<link rel="stylesheet" href="lib/resources/css/sencha-touch.css" type="text/css">
Change the sencha-touch.css stylesheet reference in your index.html file to point to myTheme.css:
<link rel="stylesheet" href="lib/resources/css/myTheme.css" type="text/css">
SCSS and CSS
Notice that you are currently including a stylesheet from the css folder, called sencha-touch.css, and you have a matching file in the scss folder, called sencha-touch.scss. When the SCSS files are compiled, it creates a new file in your css folder. This new file will have a suffix of .css instead of .scss.
.scss is the file extension for SASS files. SCSS is short for Sassy CSS.
Now that you have your paths set up, let's take a look at the theme file copy we made. Open your myTheme.scss file. You should see the following:
#import 'sencha-touch/default/all';
#includesencha-panel;
#includesencha-buttons;
#includesencha-sheet;
#includesencha-picker;
#includesencha-tabs;
#includesencha-toolbar;
#includesencha-toolbar-forms;
#includesencha-carousel;
#includesencha-indexbar;
#includesencha-list;
#includesencha-list-paging;
#includesencha-list-pullrefresh;
#includesencha-layout;
#includesencha-form;
#includesencha-msgbox;
#includesencha-loading-spinner;
This code grabs all of the default Sencha Touch theme files and compiles them into a new CSS file located in the css folder. If you open up the sencha-touch.css file in the ../lib/resources/css folder, you will see the compressed CSS file you were previously using. This file is pretty huge, but it's all created from the basic commands.
The best part is that you can now change the entire color scheme of the application with a single line of code.
Base color
One of the key variables in the Sencha Touch theme is $base_color. This colour and its variations are used throughout the entire theme. To see what we mean, you change the colour of your theme adding the following to the top of your myTheme.scss file (above all the other text):
$base_color: #d1d3d4; //for example, color gray
Next, you need to re-compile the SASS file to create your stylesheet. From the command line, you need to change into the sass folder where your myTheme.scss file lives. Once you are in the folder, type the following into the command line and hit Enter:
compass compile
And have fun :), this will update your myTheme.css file with the new $base_color value. Reload the page in Safari or FF or anywhere, and you should see a new gray look to your application.
And look at this in http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application
I hope this helps. :)
I am just getting started with Bootstrap from Twitter and am wondering what the ‘best practices’ is for customization. I want to develop a system that will take advantage of all the power of a css template (Bootstrap or other), be completely (and easily) modifiable, be sustainable (ie – when the next version of Bootstrap is released from Twitter I don’t have to start over.
For example, I want to add background images to the top navigation. It looks like there are 3 ways to go about this:
Modify the .topbar classes in bootstrap.css . I don’t particularly like this because I will have lots of .topbar items and I don’t necessarily want to modify them all the same way.
Create new classes with my background images and apply both styles (the new and the bootstrap to my element). This may create style conflicts, which could be avoided by stripping the .topbar class into separate classes and then only using the pieces that are not stepped on by my custom class. Again this requires more work than I think should be necessary and while it is flexible, it won’t allow me to easily update bootstrap.css when Twitter releases the next installment.
Use variables in .LESS to achieve the customization. Offhand this seems like a good approach but having not used .LESS I have concerns about compiling css on the client and about code sustainability.
Though I am using Bootstrap, this question can be generalized to any css template.
The best thing to do is.
1. fork twitter-bootstrap from github and clone locally.
they are changing really quickly the library/framework (they diverge internally. Some prefer library, i'd say that it's a framework, because change your layout from the time you load it on your page). Well... forking/cloning will let you fetch the new upcoming versions easily.
2. Do not modify the bootstrap.css file
It's gonna complicate your life when you need to upgrade bootstrap (and you will need to do it).
3. Create your own css file and overwrite whenever you want original bootstrap stuff
if they set a topbar with, let's say, color: black; but you wan it white, create a new very specific selector for this topbar and use this rule on the specific topbar. For a table for example, it would be <table class="zebra-striped mycustomclass">. If you declare your css file after bootstrap.css, this will overwrite whatever you want to.
Bootstrap 5 (update 2021)
As explained in the Bootstrap docs, modifying the existing "theme" colors is done using SASS. As with prior versions, you can also override the Bootstrap CSS by adding CSS rules that follow after the bootstrap.css and use the correct CSS specificity.
Bootstrap 5 - change theme colors
Bootstrap 4
I'm revisiting this Bootstrap customization question for 4.x, which now utilizes SASS instead of LESS. In general, there are 2 ways to customize Bootstrap...
1. Simple CSS Overrides
One way to customize is simply using CSS to override Bootstrap CSS. For maintainability, CSS customizations are put in a separate custom.css file, so that the bootstrap.css remains unmodified. The reference to the custom.css follows after the bootstrap.css for the overrides to work...
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
Just add whatever changes are needed in the custom CSS. For example...
/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control {
border-radius: 0;
}
Before (bootstrap.css)
After (with custom.css)
When making customizations, you should understand CSS Specificity. Overrides in the custom.css need to use selectors that are the same specificity as (or more specific) the bootstrap.css.
Note there is no need to use !important in the custom CSS, unless
you're overriding one of the Bootstrap Utility
classes. CSS
specificity
always works for one CSS class to override another.
2. Customize using SASS
If you're familiar with SASS (and you should be to use this method), you can customize Bootstrap with your own custom.scss. There is a section in the Bootstrap docs that explains this, however the docs don't explain how to utilize existing variables in your custom.scss. For example, let's change the body background-color to #eeeeee, and change/override the blue primary contextual color to Bootstrap's $purple variable...
/* custom.scss */
/* import the necessary Bootstrap files */
#import "bootstrap/functions";
#import "bootstrap/variables";
/* -------begin customization-------- */
/* simply assign the value */
$body-bg: #eeeeee;
/* use a variable to override primary */
$theme-colors: (
primary: $purple
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
#import "bootstrap";
This also works to create new custom classes. For example, here I add purple to the theme colors which creates all the CSS for btn-purple, text-purple, bg-purple, alert-purple, etc...
/* add a new purple custom color */
$theme-colors: (
purple: $purple
);
https://codeply.com/go/7XonykXFvP
With SASS you must #import bootstrap after the customizations to make them work! Once the SASS is compiled to CSS (this must be done using a SASS compiler node-sass, gulp-sass, npm webpack, etc..), the resulting CSS is the customized Bootstrap. If you're not familiar with SASS, you can customize Bootstrap using a tool like this theme builder I created.
Custom Bootstrap Demo (SASS)
Note: Unlike 3.x, Bootstrap 4.x doesn't offer an official customizer tool. You can however, download the grid only CSS or use another 4.x custom build tool to re-build the Bootstrap 4 CSS as desired.
Related:
How to extend/modify (customize) Bootstrap 4 with SASS
How to change the bootstrap primary color?
How to create new set of color styles in Bootstrap 4 with sass
How to Customize Bootstrap
I think the officially preferred way is now to use Less, and either dynamically override the bootstrap.css (using less.js), or recompile bootstrap.css (using Node or the Less compiler).
From the Bootstrap docs, here's how to override bootstrap.css styles dynamically:
Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>
To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.
Or if you prefer to statically compile a new bootstrap.css with your custom styles (for production environments):
Install the LESS command line tool via Node and run the following command:
$ lessc ./less/bootstrap.less > bootstrap.css
Since Pabluez's answer back in December, there is now a better way to customize Bootstrap.
Use: Bootswatch to generate your bootstrap.css
Bootswatch builds the normal Twitter Bootstrap from the latest version (whatever you install in the bootstrap directory), but also imports your customizations. This makes it easy to use the the latest version of Bootstrap, while maintaining custom CSS, without having to change anything about your HTML. You can simply sway boostrap.css files.
You can use the bootstrap template from
http://www.initializr.com/
which includes all the bootstrap .less files. You can then change variables / update the less files as you want and it will automatically compile the css. When deploying compile the less file to css.
The best option in my opinion is to compile a custom LESS file including bootstrap.less, a custom variables.less file and your own rules :
Clone bootstrap in your root folder : git clone https://github.com/twbs/bootstrap.git
Rename it "bootstrap"
Create a package.json file : https://gist.github.com/jide/8440609
Create a Gruntfile.js : https://gist.github.com/jide/8440502
Create a "less" folder
Copy bootstrap/less/variables.less into the "less" folder
Change the font path : #icon-font-path: "../bootstrap/fonts/";
Create a custom style.less file in the "less" folder which imports bootstrap.less and your custom variables.less file : https://gist.github.com/jide/8440619
Run npm install
Run grunt watch
Now you can modify the variables any way you want, override bootstrap rules in your custom style.less file, and if some day you want to update bootstrap, you can replace the whole bootstrap folder !
EDIT: I created a Bootstrap boilerplate using this technique : https://github.com/jide/bootstrap-boilerplate
I recently wrote a post about how I've been doing it at Udacity for the last couple years. This method has meant we've been able to update Bootstrap whenever we wanted to without having merge conflicts, thrown out work, etc. etc.
The post goes more in depth with examples, but the basic idea is:
Keep a pristine copy of bootstrap and overwrite it externally.
Modify one file (bootstrap's variables.less) to include your own variables.
Make your site file #include bootstrap.less and then your overrides.
This does mean using LESS, and compiling it down to CSS before shipping it to the client (client-side LESS if finicky, and I generally avoid it) but it is EXTREMELY good for maintainability/upgradability, and getting LESS compilation is really really easy. The linked github code has an example using grunt, but there are many ways to achieve this -- even GUIs if that's your thing.
Using this solution, your example problem would look like:
Change the nav bar color with #navbar-inverse-bg in your variables.less (not bootstrap's)
Add your own nav bar styles to your bootstrap_overrides.less, overwriting anything you need to as you go.
Happiness.
When it comes time to upgrade your bootstrap, you just swap out the pristine bootstrap copy and everything will still work (if bootstrap makes breaking changes, you'll need to update your overrides, but you'd have to do that anyway)
Blog post with walk-through is here.
Code example on github is here.
Use LESS with Bootstrap...
Here are the Bootstrap docs for how to use LESS
(they have moved since previous answers)
you can start with this tool, https://themestr.app/theme , seeing how it overwrites the scss variables, you would get an idea what variable impacts what. its the simplest way I think.
example scss genearation:
#import url(https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700);
$font-family-base:Montserrat;
#import url(https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);
$headings-font-family:Open Sans;
$enable-grid-classes:false;
$primary:#222222;
$secondary:#666666;
$success:#333333;
$danger:#434343;
$info:#515151;
$warning:#5f5f5f;
$light:#eceeec;
$dark:#111111;
#import "bootstrap";