I am using VS Express 2013, trying to customize a bootstrap theme for a Roadkill wiki. I'm trying to replace the body color with a background image.
It's easy enough to modify the bootstrap.css, but in order to get site updates you need to push changes into bootstrap.min.css. So far, I am only aware of how to do this manually. I'm looking for any method whereby I can just have the minified version update automatically.
I'm guessing it's probably really simple to do, but I can't find any steps on how to do this.
Just create your own css file and override just the css settings you want to change.
Be sure to load your override css after bootstrap so your overrides take precendence.
This way you dont need to edit either boostrap css at all.
You are right in that it is really easy to do: see http://cssminifier.com/. I just pasted in the entire text of my custom bootstrap file, clicked "Minify", and copied the output back to overwrite the content of bootstrap.min.css.
(I took a copy of the .min file first, just to be safe.)
In Visual Studio 2013, if you are using ASP.NET MVC (you haven't mentioned which, but I suspect you are using MVC 5 since you are working with Roadkill wiki), bundling and optimizations to CSS and JavaScript files are done automatically when enabled, since the NuGet package Microsoft ASP.NET Web Optimization is installed.
From Microsoft, how to enable/disable... refer to the middle of the article "Controlling Bundling and Minification":
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
Related
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.
I have been tinkering with joomla recently.I was able to change css style using chrome dev tool, which helped me locate the css code that is responsible for the style I inspect. Now I want the same for html codes. The template that I'm using has an offcanvas menu, and when I inspect it, I can see the codes that form the menu, and I want to modify them, as I did with many css codes, however there is no locate or open containing file for html elements. Is there a way to do this? Since I did not write this template, I don't know which is which and where. Many thanks.
You could use Joomla layout overrides to achieve what you describe, check out this link for full details:
https://docs.joomla.org/Understanding_Output_Overrides#Module_Layout_Overrides
The idea is that you move a copy of the module file you want to modify to
/templates/your_template/html/ and Joomla will override the original output with the output from your custom file. You can do the same with components and plugins, it's really powerful.
Another reason that overrides are the way to go is that there's no risk that you'll loose your changes when you update the extension you are customising.
If you Google Joomla overrides you'll find other resources and once you get started you'll find it's surprisingly easy :)
Good luck!
I don't recommend editing css or html in Joomla via the dev tools, because of the problem you're having - sometimes it's hard to know what(and where) exactly you're changing something.
If you have access to the file for the template it should have a pretty straightforward file structure, i.e. all the html is in a html folder, the css in a css folder etc. Learn more here.
I recommend locating those files and editing them with a text editor.
To make a file depends on the framework you add one to Joomla template is not used.
But in all cases you index.php is a file that can address the heads of a css your new address
In using asp.net I have a scenario where the master page is implementing version 2.2 of BootStrap. But there is some content I'd like to use BootStrap 3.3 for. If I try and upgrade or implement 3.3 over 2.2 in any ways, it breaks some of my code. Any ideas for how to "selectively upgrade" HTML/BootStrap to say, everything that's inside a "Div" tag?
You can do'it realy easy by isolating Bootstrap with LESS, there is a good tuto to do this by "Chris Youderian".
https://formden.com/blog/isolate-bootstrap
Depends on how hacky you want to get. If it's just one feature, just copy the part of the .css from bootstrap 3.3 you want in its own css file and import this css file after the 2.2 version is loaded either in your build script or after your 2.2 version in your tag.
If you have a more specific question about which feature (if you're including js files as well) then we'll have to dig deeper.
Warning: You have to be careful with what you're overwriting from the 2.2 as it can break other css parts. And as #DavidG pointed out, I would avoid doing this entirely.
I needed to use use both bootstrap 3 and 4 on my project as a plugin which was written with bootstrap 3 looked terrible in bootstrap 4.
Tried to follow advice in the link shared in Hicham's answer. Couldn't get it to work. But following the cue, did some stuff manually and it worked. It took me 2hrs to finish step 4 though.
Steps:-
Download preferred bootstrap 3 version from https://blog.getbootstrap.com/archive
Put it in custom css folder (or anywhere else) in your project.
Add its link in your header
(CAREFUL with this step) Prepend '.b3 ' without quotes to every selector in the downloaded bootstrap version using ctrl-H command. This will take a long time considering mistaken conversions. (e.g - Conversion of "ol" selector to ".b3 ol" results in conversion of the word "control" to "contr.b3 ol" which needs to be reversed.
Put all your contents which require bootstrap 3 inside a div tag with class="b3"
Done.
With as all being very careful about resources within web development I am looking for a tool that you can pass a url and it show what CSS is actually used on that page but more importantly have the ability to download or extract that CSS Selectors and the actual css to create a single css of only the css needed to render that page, I have tried DustMe and various plugins. I realized I am not using 89% of bootstrap for example but picking it apart is almost impossible on pre built sites.
thanks
There is a online tool which provides that service, its not free though, unused-css.com
I'd recommend using uncss (requires node).
It can be added to your grunt build scripts to remove the css your are not using and is easy to configure
uncss.io works pretty well. Just enter your page URL and it will give you the cleaned CSS. It works for me on some pages, but not other pages.
REF: unused-css - (Paid Service)
or CSS Trashman
EDIT:
Use uncss git which requires node.js. It can be added to your built-in scripts to remove the unused css.
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...