I've been working on site using bootstrap. Rather than calling the unedited bootstrap.css and creating a seperate .css file for customisation I added my css changes directly to the bootstrap.css.
My question is - will this cause problems when it comes to using datatables?
Not necesserily. Depends on which classes are used in datatables. You either search in the source of datatables which classes are used or , what i recommend, make your own css, include it after the bootstrap css and change only what you need. For example with the !important markup.
Related
I got a Bootstrap template that was built by a company and I am doing a bunch of coding and additions to it but I am new to Bootstrap and I am having a problem. I added the vendor.css and theme.css files to my php header and I added the bootstrap.css file as well. My problem is when I try and use some of the bootstrap classes they dont work because of the vendor and theme css files being used. Some of them work but the appearance and functions are different. Is there any way around this so I can still use some of the bootstrap classes. I put the css files in the header in this order. theme, vendor, bootstrap and then my own css file at the bottom. Is the only way to do this by adding my own css file and make the changes. Any advice would be great. Thanks
As far as I understand from your question that, some of your bootstrap classes are working and some of the them are not working.
In that case, I think it is bootstrap version issue. Obviously updated version class will not work in older version class.
How can I to create Materialize CSS inputs with the Special features of it, like Placeholders and Icons inside inputs? I want to find a way to create it without using materialize CSS because I am using another CSS framework and I don't want to use more than one framework preventing errors of multiplying frameworks?
Try checking out the materialiseCSS CSS file, and also the corresponding CSS codes for forms/placeholders or any HTML tag, then attach the needed codes to your normal CSS file using either an id or class
I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
There have been some questions regarding this topic before but I am a bit lost and I would appreciate someone to explain this to me in a different way.
Context: I am using twitter bootstrap in my rails app (without Less, not familiar with Less or what it is but that's a separate issue)
I have been teaching myself CSS and when looking at the application.html.erb file in my rails app it calls certain classes such as "nav-bar" and "container-fluid nav-collapse". I am trying to find the css file where these classes are defined (so that i can customize them) but I cannot find it. So far I have tried the bootstrap_and_overrides.css and application.css.scss files but couldnt find the navbar class. Also I have tried these links: Bootstrap CSS Editing
Editing navbar text color in twitter bootstrap but I wasnt able to have any luck.
You should never directly edit bootstrap css files.
For whatever you need to update as you mentioned use bootstrap_and_overrides.css or your custom.css file for overriding original classes and divs.
The best way to find where the classes are in css file is if you are using firefox, click:
Inspect Element and on the right side you will see the name of .css file where this class is saved.
But when you have class name you can just override this class with your rules. Don't forget to include your custom.css file though.
If you still have troubles finding where particular classes are hiding you can use firebug to track what files are loaded like this:
For each file you have the source where you can see the path and find the elements.
I'm building an application in GWT and have a skin from my graphic designer which I've plugged into the app using UIBinder and it works beautifully. Now I want to bundle all the images using ClientBundle.
Mayne of these images are used in the css file e.g.
.nav{background:url(nav_bg.jpg) left top repeat-x; height:27px; clear:both;}
Before this css I have defined a tag to include the bundle.
How can I change the css entry so that it uses an ImageResource from my ClientBundle? I guess I can do inline styles for all the html tags but that's horrible separation and a lot of extra work.
I have successfully used ImageResources in the html part of the uibinder file (e.g. in a ) but I cannot see how to do this in the css. I have even inlined the css in a block but I still don't see the correct way to do this.
Any suggestions?
ClientBundles can now be used to host CssResources as well.
These CssResources are CSS files with some extra functionality.
The docs of GWT describes what you need in the section about ImageSprites.
I ended up skipping GWT css and image bundling altogether. Instead I've had my carve done using a css sprited image block made by the design/carve team. This has these advantages.
1/ Much less css porting since I can plug the html directly into ui binder and use the css tags from the carve i.e. not using uibinder css. As long as the html structure matches the carve then this is a lot less work than migrating all the css into gwt css.
2/ It also allows me to use svn/diff when applying changes - this was not possible when using gwt css/image spriting.
3/ I can easily put the image/css files on a CDN since the load tags are in the host page and don't suffer from Same Origin restrictions. FYI : yes I know about the XS linker as another way to do this.
It stops being useful when the carve uses css for positioning and I want to use LayoutPanels but that's not too bad as long as I request that the layout css is separate from the style css.
So in the end I discovered that, when working with design/carve from a third party, it's much easier to avoid using gwt css/images but to reproduce the same benefits using traditional css spriting and minification. I hope this helps someone.