After downloading a complete pack of bootstrap 3 from http://getbootstrap.com, I noticed that there is a separate css file for theme. How to make use of it? Please explain?
I included bootstrap-theme.css in my existing bootstrap project, but there is no difference in output.
Upon downloading Bootstrap 3.x, you'll get bootstrap.css and bootstrap-theme.css (not to mention the minified versions of these files that are also present).
bootstrap.css
bootstrap.css is completely styled and ready to use, if such is your desire. It is perhaps a bit plain but it is ready and it is there.
You do not need to use bootstrap-theme.css if you don't want to and things will be just fine.
bootstrap-theme.css
bootstrap-theme.css is just what the name of the file is trying to suggest: it is a theme for bootstrap that is creatively considered 'THE bootstrap theme'. The name of the file confuses things just a bit since the base bootstrap.css already has styling applied and I, for one, would consider those styles to be the default. But that conclusion is apparently incorrect in light of things said in the Bootstrap documentation's examples section in regard to this bootstrap-theme.css file:
"Load the optional Bootstrap theme for a visually enhanced experience."
The above quote is found here http://getbootstrap.com/getting-started/#examples on a thumbnail that links to this example page http://getbootstrap.com/examples/theme/. The idea is that bootstrap-theme.css is THE bootstrap theme AND it's optional.
Themes at BootSwatch.com
About the themes at BootSwatch.com: These themes are not implemented like bootstrap-theme.css. The BootSwatch themes are modified versions of the original bootstrap.css. So, you should definitely NOT use a theme from BootSwatch AND the bootstrap-theme.css file at the same time.
Custom Theme
About Your Own Custom Theme: You might choose to modify bootstrap-theme.css when creating your own theme. Doing so may make it easier to make styling changes without accidentally breaking any of that built-in Bootstrap goodness.
For an example of the css styles have a look at: http://getbootstrap.com/examples/theme/
If you want to see how the example looks without the bootstrap-theme.css file open up your browser developer tools and delete the link from the <head> of the example and then you can compare it.
I know this is an old question but posted it just in case anyone is looking for an example of how it looks like I was.
Update
bootstrap.css = main css framework (grids, basic styles, etc)
bootstrap-theme.css = extended styling (3D buttons, gradients etc). This file is optional and does not effect the functionality of bootstrap at all, it only enhances the appearance.
Update 2
With the release of v3.2.0 Bootstrap have added an option to view the theme css on the doc pages. If you go to one of the doc pages (css, components, javascript) you should see a "Preview theme" link at the bottom of the side nav which you can use to turn the theme css on and off.
First, bootstrap-theme.css is nothing else but equivalent of Bootstrap 2.x style in Bootstrap 3. If you really want to use it, just add it ALONG with bootstrap.css (minified version will work too).
Bootstrap-theme.css is the additional CSS file, which is optional for you to use. It gives 3D effects on the buttons and some other elements.
As stated by others, the filename bootstrap-theme.css is very confusing. I would have chosen something like bootstrap-3d.css or bootstrap-fancy.css which would be more descriptive of what it actually does. What the world sees as a "Bootstrap Theme" is a thing you can get from BootSwatch which is a totally different beast.
With that said, the effects are quite nice - gradients and shadows and such. Unfortunately this file will wreak havoc on BootSwatch Themes, so I decided to dig into what it would take to make it play nice with them.
LESS
Bootstrap-theme.css is generated from the theme.less file in the Bootstrap source. The affected elements are (as of Bootstrap v3.2.0):
List items
Buttons
Images
Dropdowns
Navbars
Alerts
Progress bars
List Groups
Panels
Wells
The theme.less file depends on:
#import "variables.less";
#import "mixins.less";
The code uses colors defined in variables.less in several places, for example:
// Give the progress background some depth
.progress {
#gradient > .vertical(#start-color: darken(#progress-bg, 4%); #end-color: #progress-bg)
}
This why bootstrap-theme.css totally messes up BootSwatch Themes. The good news is that BootSwatch Themes are also created from variables.less files, so you can simply build a bootstrap-theme.css for your BootSwatch Theme.
Building bootstrap-theme.css
The right way to do it is to update the Theme build process, but here here is the quick and dirty way. Replace the variables.less file in the Bootstrap source with the one from your Bootswatch Theme and build it and voila you have a bootstrap-theme.css file for your Bootswatch Theme.
Building Bootstrap itself
Building Bootstrap may sound daunting, but it is actually very simple:
Download the Bootstrap source code
Download and install NodeJS
Open a command prompt and navigate to the bootstrap source folder. Type "npm install". This will add the "node_modules" folder to the project and download all the Node stuff you need.
Install grunt globally (the -g option) by typing "npm install -g grunt-cli"
Rename the "dist" folder to "dist-orig" then rebuild it by typing "grunt dist". Now check that there is a new "dist" folder which contains all you need to use your custom Bootstrap build.
Done. See, that was easy, wasn't it?
I know this post is kinda old but...
As 'witttness' pointed out.
About Your Own Custom Theme You might choose to modify bootstrap-theme.css when creating your own theme. Doing so may make it easier to make styling changes without accidentally breaking any of that built-in Bootstrap goodness.
I see it as Bootstrap has seen over the years that everyone wants something a bit different than the core styles. While you could modify bootstrap.css it might break things and it could make updating to a newer version a real pain and time consuming. Downloading from a 'theme' site means you have to wait on if that creator updates that theme, big if sometimes, right?
Some build their own 'custom.css' file and that's ok, but if you use 'bootstrap-theme.css' a lot of stuff is already built and this allows you to roll your own theme faster 'without' disrupting the core of bootstrap.css. I for one don't like the 3D buttons and gradients most of the time, so change them using bootstrap-theme.css. Add margins or padding, change the radius to your buttons, and so on...
Related
I made my site recently, using this template: https://startbootstrap.com/theme/resume
I've seen that the styles.css file has -dark elements alongside its -light elements, for a potential dark theme. My question is, how do I use these? Is there a line in the css file I'm missing, or should I add a line in the html file?
You may need to make use of scss custom styling: https://getbootstrap.com/docs/5.1/customize/sass/#color-schemess
I also took a look to the source code from https://startbootstrap.com/theme/resume (and the comment section for people asking for dark theme; no answer from the author) and he's using scss as well while in development. He's using Bootstrap with little to no modification starting with his scss files in his repository: https://github.com/startbootstrap/startbootstrap-resume
I think that your best solution is implementing some additional custom styling from a 3rd party project like: https://vinorodrigues.github.io/bootstrap-dark-5/
You can also try the approach suggested here: https://blog.shhdharmen.me/toggle-light-and-dark-themes-in-bootstrap using some JS code.
Basically I need to change the look and feel of a NopCommerce application, and I have created a separate theme folder and can do my CSS changes there. But there's only so much you can do with CSS. At some point I'll need to update html to make it look like the way I want.
So what I am concerned about is that if I change the layout and individual pages html to make the site look like how I want, what will happen if later I have to upgrade NopCommerce version, will my markup changes break or is it not a problem.
I have seen NopCommerce themes and it looks like they have updated the markup but I am not sure if its right to do it.
You're already halfway there, it's the same process as for changing the CSS. Simply copy all the cshtml files you intend to modify to your theme's folder and change the code however you need to. The modified files should be under Themes/YourTheme/Views, as per nopCommerce standard. When you install your theme, it will render the pages from here instead of the default folder. This way, the default views are left untouched, and your changes have no impact on the default theme.
For example, in the default theme of version 4.4, the homepage is rendered from Themes/DefaultClean/Views/Home/Index.cshtml. To customize the layout of this page for your theme, copy the Home folder to Themes/YourTheme/Views and you're good to go.
It's all explained in detail with examples in the official documentation- Customizing nopCommerce Themes
I was building my own website from scratch and realized that setting up the E-Commerce side of things would take an enormous amount of time so I decided to use Prestashop. I've already designed everything besides the actual store. I wanted to use the default prestashop theme and edit the HTML and css to make it look like my website. I've already written all the css and html but I am not sure how to add it to prestashop. Any suggestions?
If you are doing small adjustments to the theme you can use the custom.css file.
For heavy changes you will have to use npm build|watch in the _dev folder and make your changes in scss files in _dev/css folder.
Searching on topic how to customize the original bootstrap CSS I mainly found power tools and generators what are emit a "patched" bootstrap.css to use instead the original.
I am very beginner in bootstrap, so first I would like to see clear the best practices before I invest hundreds of workhours to do something dumb and not recommended thing.
My question: Is this the way? I mean editing (automatically or manually) the bootstrap.css. Sounds not good for me, I am hoping I missed something.
Is there any alternative way, say creating a tiny mycustom.css and only define the differences there. Could anyone point out how to redefine just the standard colors?
Best option if you`re are beginner is to generate a new bootstrap.css with the oficial generator http://getbootstrap.com/customize/ and so you also could test changes in other Bootstrap variables. I think that overwrite css properties with your own CSS file can be painful sometimes...
Best option (need time to learn) is import Bootstrap as LESS (not CSS) and then create your own variables.less file, where you will define values for all Bootstrap variables that you want to overwrite.
Don't edit bootstrap.css.
Instead create your new css file and add new values in that file and make sure that this new file is loaded after bootstrap.css .
For small changes include your own .css file after including bootstrap, overwriting the css components of bootstrap. This is what bootstrap advises (check bootstrap components page)
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
This website demonstrates exactly how to override Bootstrap's CSS without doing naughty things like using !important in your own CSS files (which should be avoided). You simply create a new custom.css file and add in your overriding styles there.
I would not directly edit the LESS/SASS Bootstrap files.
I am pretty new in WordPress and BootStrap CSS framework and I have the following doubt:
I have installed this theme that integrate BootStrap framework and I want to use it as a start point: http://bootstrapwp.rachelbaker.me/
I have change the background color of the homepage changing the background-color property into the body field in a file named bootstrapwp.css inside my theme using FireBug plugin
Ok...my doubts are:
1) Why this CSS file is named bootstrapwp.css and not bootstrap.css as in the downloaded BootStrap 3 framework? And why this file is slightly different form the dowloaded bootstrap.css file?
2) What is the better way to change a style in BootStra? I can change it directly inside my bootstrapwp.css or is better do it in another file overriding this behavior?
Tnx
Andrea
Andrea:
There are a lot of answers for your questions but I will work to simplify it for you.
First, what the developers are trying to do is get Bootstrap functionality within the Wordpress CMS. They are two entirely different animals. Bootstrap consists of individual pages that must be hand coded. Wordpress is a Content Management System (CMS) where you can apply a style, theme, sidebar, template or widget and have it appear on every page site-wide.
So, what the developer is doing is using the bootstrapwp.css file to handle the CSS for the entire Bootstrap themed Wordpress site. Remember, this is NOT a Bootstrap site. It is a Bootstrap themed Wordpress site that seeks to incorporate the functionality and design of Bootstrap within the confines of the Wordpress Codex.
If you're running a Wordpress site, the best way to change a style is always going to be in the CSS file provided by the child theme.
You can try Impulse Press. It's the most complete Wordpress Bootstrap 3 starter Theme
Take a look at the demo impulsepress.twoimpulse.com
with this you can change your css style in bootstrap-theme.css and don't touch bootstrap.css , so when we have an update it doesn't ruin your site styles
And Vincent Polisi is right, you can also make a child theme and get Impulse Press always updated