I'm using Opencart for a E-Commerce site for my company. The Opencart developer is working on V2.0 which will incorporate Bootstrap as the default styling.
My plan was to put a link in my header file on the next line BELOW the link to bootstrap stylesheet example:
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/override.css" />
I was planning on using LESS to compile into override.css and only change small parts of the Bootstrap less to meet my needs. For example, I was planning on only including the variables.less from bootstrap along with buttons.less and layout.less. I'd then compile those modified files into override.css to get my personalized styles. However, the more I think about it, I realize I'd need to include all the LESS from Bootstrap. This would make my override.css essentially the same as bootstrap.css (with the exception of the changes I make for my styling).
This essentially defeats the purpose of having an override. Is there a way to not need to include ALL the bootstrap less, just the parts that I want in the override?
People may be wondering why I don't just modify the bootstrap.css file. My thought is that if I do modify the bootstrap.css file all my changes will be overwritten if I go to upgrade (or if the Opencart developer upgrades) bootstrap in the future.
Any advise is much appreciated!
Thanks!
DS-MATT
Why don't you keep an overwrite.css to yourself, while presenting compiled bootstrap.css + override.css to the end user? That way you can easily update your bootstrap.css in the future and easily maintain the overrides themselves.
Related
My main problem is that I get a default a bootsrrap design, and i can't change it.
I 've read many places that I have to do something like this:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
I 've figured out that i need to use this:
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
but with this method I can't change any of my elements. Nobody writes it down, what does the bootstrap.min.css contains. Is it a standard library, or I have to put into it some data. Sorry for the dumb question...
Do not modify the bootstrap.css!
the approach you mentioned first is the right approach.
You're using the right method. Run bootstrap then run your custom code afterwards to overwrite bootstrap styles.
In terms of knowing what you are overwriting, all the documentation for the bootstrap CSS is contained here:
http://getbootstrap.com/css/
Alternatively you can look at the non-minified version, or inspect elements in the browser.
Definitely do not modify the bootstrap library. This will make it difficult to get general bootstrap help as you have a customised version, and you'll never be able to upgrade the library without removing your changes.
As a general rule, never modify a third party library which you are using.
Do not modify default bootstrap.css bcoz it contains much css which will used in coding and designing, rather write or overwrite with your own custom css new a new file
you are using correct method. some times css not override. so use !important to force override.
eg: https://css-tricks.com/when-using-important-is-the-right-choice/
First of all, I'm sorry for my poor English. English is not my first language.
I almost finish rails tutorial in codecademy. Portfolio is the last project of this tutorial. I can't use bootstrap in this project. Here is the task.
Set up the layout file (app/views/layouts/application.html.erb). The layout file lets you build a base view that contains all the common elements of your site, such as CSS files, the header, and the footer. The <%= yield %> defines the portion of the layout that child templates can fill in.
In the below the , add CSS for the Roboto web font. Follow the instructions here. Choose the styles Thin 100, Light 300, Medium 500, and Bold 700.
Add CSS for Bootstrap. Follow the instructions here. Use the latest compiled and minified CSS, and not the optional theme.
Make sure both CSS URLs start with https.
This is the link of css for bootstrap.
http://getbootstrap.com/getting-started/#download-cdn
I just tried to insert link tag in the page,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
But I failed. I think I have to do something more. Would you please tell me how to do it? Thanks advanced.
I think you want to add a css file into your app's header
you need use the following codes
stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
you can read more here : http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/stylesheet_link_tag
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Right now I just got two CSS files in between my <head> tags:
<link rel="stylesheet" href="/stylesheets/init.css">
<link rel="stylesheet" href="/stylesheets/layout.css">
In init.css I reset elements and define certain elements for consistency through most browsers.
In layout.css I basically got everything else.
Now it's a big hassle when developing and scrolling back and forth like a madman. So I decided to seperate the big layout.css into smaller files for better usability and developing. Only I'm not so sure how I would go about separating them.
I'm thinking about something like:
<link rel="stylesheet" href="/stylesheets/init.css">
<link rel="stylesheet" href="/stylesheets/signup.css">
<link rel="stylesheet" href="/stylesheets/navigation.css">
<link rel="stylesheet" href="/stylesheets/upgrade.css">
<link rel="stylesheet" href="/stylesheets/content.css">
... etc.
But for some reason, I feel that is not really the way to go about it.
Could somebody tell me if this is a good approach or if you have a better way I am interested to know about it.
the approach is good, however you may want to concatenate (and eventually minify) your files for the production environment, into a single file. This will reduce the number of requests to one from N.
CSS preprocessors like less and sass and other tools like Grunt etc can also concatenate the files for you even when you are in development, so you can keep your files nicely separated but have only one loaded on your site, for performance reasons.
You are heading in the right direction, it is good practise to split your CSS. There are various ways to do it but most people either use a build script and/or a preprocessor. Using a build script lets you concatenate and minify the CSS as well as JS and HTML.
Preprocessors, such as SASS and LESS, do the same (although only for CSS) but also allow you to write extra logic code that is compiled down to CSS.
That's a brilliant approach. Most programmers split up their css into sections like you to make it easier for them to edit a particular part of the website. For example theme.css would edit the background image and change themes, whereas footer.css would change the footer. However if you don't like what your doing use a processor like SASS or LESS.
Splitting your CSS into several files makes them a lot more manageable and increases usability for your developers. However, it will force every user to make an additional request to your server for each seperate CSS file and forces you to update your HTML code whenever you want to add / remove / rename a specific "group" of CSS.
Native CSS allows you to include other CSS files directly, so you could go the route of having one central "main" CSS that loads all the other styles:
<link rel="stylesheet" href="/stylesheets/main.css">
And in the main.css:
#import "init.css";
#import "signup.css";
#import "navigation.css";
#import "upgrade.css";
#import "content.css";
This will keep all CSS-related grouping in a CSS file itself and out of the template code, but doesn't change the fact that a user now has to request a couple of different files where there was only one before.
An even better solution would be to use a CSS Preprocessor like SASS/SCSS, which allows you to include CSS files automatically and renders them (even with a smaller file size) in one single CSS file while maintaining individual source files on the development side. The above import code would look like this with SCSS:
#import "init";
#import "signup";
#import "navigation";
#import "upgrade";
#import "content";
You would then put all your "init" CSS rules in a file called _init.scss and run the SCSS preprocessor with scss -t compressed main.scss main.css. This renders everything inline into a single main.css file, ready to be delivered to your users via a single request to your server.
I have a site currently styled with custom CSS files, all of which I am happy with.
Now I want to add the boostrap stuff, as there is plenty there I'd like to incorporate, most notably a datepicker and a modal dialog.
However I find that when I do add the default bootstrap CSS (.min and an extra file for the datepicker), the fonts of my custom CSS are overwritten.
Is there a way of 'choosing' (for want of a better phrase) which file wins?
I guess the answer is going to be either edit the bootstrap CSS or try and pick and choose what you want rather than just grabbing the default min files, I guess I'm trying to avoid having to do that.
Some Bootsrap default variables are overridable by passing your values to them, you can see it here:
http://twitter.github.com/bootstrap/customize.html#variables
Make sure you override them after importing bootstrap and you should be fine.
You will need to rearrange your css files in the following way :
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<link href="/css/yourstylesheet.css" rel="stylesheet">
I am using twitter bootstrap and i need to change the basic visuals of the framework like the form element etc. Is it a good practice to over write all the styles again in styles.css or modify the bootstrap.css and change the styles directly.
Is there any tutorial which teaches how to set up LESS for Bootstrap and use it ?
See Twitter Bootstrap Customization Best Practices regarding customization and LESS with Twitter Bootstrap.
In general, I wouldn't recommend directly modifying your bootstrap.css file, because it will make it difficult to edit in the future if/when the core css is updated by the bootstrap folks. Instead, just have a second style sheet that is referenced after the bootstrap css. Add your overrides/modifications there, like so:
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen"/>
<link rel="stylesheet" href="css/my_styles.css" media="screen"/>
Of course, for performance, consider combining these and serving them as one to reduce your http requests.
You can do this in Step 3 on the Boostrap Customization page...
http://twitter.github.com/bootstrap/customize.html
You can do depend up on your requirement. If you want to change all the form value in your website, you can modify the bootstrap file. else you can create one more file called style.css and write the css code using specific some classes.
This the tutorial may be helpfull to you
Link1,Link2