I'm using Foundation CSS framework and jqGrid to display data, but Foundation styles are messing with jqGrid/jquery UI styles...
I've tried a lot of changes and search, but I can't figure out how to do it...
Here is an example : http://jsbin.com/cocukube/1/
I would like the jqGrid to be displayed like that : http://jsbin.com/cocukube/2/
But of course, with all Foundation styles...
Thank you very much.
I would begin by taking a look at the order in which you're loading the CSS. In order to assure that Foundation is not overriding your jqGrid styles, make sure that jqGrid is being loaded after Foundation.
<link rel="stylesheet" type="text/css" href="foundation.css">
<link rel="stylesheet" type="text/css" href="jqgrid.css">
If that's not the issue, you might need to create an override.css file to essentially "undo" some of the styles that Foundation is applying. If this is necessary, make sure that your override.css file is called after the other two.
Related
I am using two CSS frameworks in index.html, as follow
Materialize.css for Login/Sign In, and slick.css for rest of my website.
When frameworks are defined as:
Materialize.css:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Slick.css
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
Then Output:
Home page Design
Login Page Design
If frameworks are defined as:
Slick.css
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
Materialize.css:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Then Output:
Home page Design
Login page Design
But it implement last declare CSS framework on whole website.
how can I implement different CSS frameworks?
Usage of global style CSS/Javascript frameworks in modern frontend frameworks like React, Angular and Vue is possible, but highly discouraged.
If you want to, you can do it and there is nothing special you need to do for them to work.
Let's say you include Bootstrap in your web page and you want to use the button styles:
const SomeComponent = _props => (
<button className='btn btn-primary'>Hey I'm a button</button>
)
That's it. Now then, what happens if two global CSS use the same class? Like '.btn' for instance. In this case the last one to be included will win, and there's [pretty much] nothing you can do to solve the dilemma. This is the problem with global CSS and the reason modern projects avoid it at all costs.
A solution for this collision problem would be to use CSS-in-JS solution, in which we import CSS into a Javascript file and only use the CSS selectors and classes we need. This may work to some degree, but it still would ne a hack with associated limitations.
In practice, we only force the integration of vanilla JS libraries [with React] if they are very low level and there is no [good] adapter library for the specific frontend framework you are using (React, Angular).
This is where opinion-based part of the answer starts.
For Material design and React, it would make much more sense to use an implementation of Material design in React components, like Material-UI, which is much more easier to integrate with React than vanilla JS and CSS implementation of Material design like Materialize.
The same approach is similar for Slick. Google 'react carousel' and you'll get at least 2 good implementations of a carousel UI that you can easily integrate into a React project.
I just found out that specifying a separate css file for responsive design can make some trouble as some rules in the responsive file can not override the original ones sometimes at the specified breakpoints.
I tried some workarounds like using !important in stubborn rules and this solved my problem, but i know that using !important is known as a very bad practice!
Is there another way that is considered a better practice still keeps my file separate???
Your resposive css file need to link after style.css
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
Kind of a newb question. I'm working with Boostrap to create a mobile responsive portfolio. What do you do if you want to make a change to the default Bootstrap classes? Like if I wanted to take the padding off of the class="container"? The links are only connected to the minified version of css and js. So if I make a change to the regular version .css, there's nothing connecting the change. Do I have to change the .min.css version? Should I be able to repeat a class in my own personal css page?(I've tried unsuccessfully) Thanks, any advice would help.
Two methods that I know of:
1) Make edits to the .min.css file, or
2) Add '!Important' to the your personal css, like so:
.testDiv{
font-color: white !Important
}
This will overwrite any classes that have set a font-color for .testDiv
*note: using !important is not a recommended technique, but it gets the job done
You can override the classes in your own CSS file (make sure you import it into your HTML after the original CSS files from bootstrap). Like,
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="path/to/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="path/to/css/bootstrap-theme.min.css">
<!-- Custom Tweaks to theme (Add your changes to this file) -->
<link rel="stylesheet" href="path/to/css/style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="path/to/js/bootstrap.min.js"></script>
However, if you are going to make lots of modifications like that, I suggest you create your own customized version
I created a stylesheet for jquery mobile using the ThemeRoller tool. It looks really great on the ThemeRoller page. In my mobile app... not so good. I think there must be some conflicts in definitions between my stylesheet and the jquery stylesheets.
Rails layout file:
<%= stylesheet_link_tag "jquery_mob_theme.min", "jquery.mobile-1.1.0.min", "stylin.mobile" %>
For those of you not familiar with rails it is rendered:
<link href="/stylesheets/jquery_mob_theme.min.css?1338304118" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.mobile-1.1.0.min.css?1338312435" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stylin.mobile.css?1337894014" media="screen" rel="stylesheet" type="text/css" />
Is the only way to deal with this to wade through thousands of lines of css to look for conflicts? Is there a css debugging tool that will detect that in a stylesheet? I could change the jquery file names to scss and then roll them into one stylesheet. I am familiar with Firebug and Web inspector which check styles on one page. That wouldn't help... right?
Thanks.
Unfortunately for you, All of css is based on inheritance so there is no automated way of knowing of a conflict or if an object has just overriden the styling of a parent. I think the best bet is to force rails to show the mobile version of the site on a desktop pc and then you can use the Google chrome inspector. It will show you all styles applied to a specific object. It only shows relevant styles with line numbers in the stylesheet so you aren't stuck wading through css. You can also edit it in chrome to see what your changes will look like before you change your stylesheet.
Firebug (an extension for Firefox) can show all styles applied to any given element, as well as which styles are overridden by other styles. You would have to view your mobile site from a desktop browser, but this can be done in Firefox by changing the useragent to match that of a mobile device (iPod, Android, etc.)
If you plan on using webkit on your site, Firefox is not a great choice as it does not render webkit css styles. An alternative is to use Safari and its development tools (which can be activated in the options menu).
If you need to debug from an actual mobile device, there aren't many options. If you can get Opera mobile onto the device, it comes with a decent debugger called Dragonfly.
The order of your stylin Stylesheets matters for what gets overridden. Make sure your style sheet is before both of the jQuery style sheets.
I'm using twitter bootstrap. My problem is that font-sizes in tables are wrong. For some reason the User Agent stylesheet is overriding the bootstrap table styles.
On the twitter bootstrap page (http://twitter.github.com/bootstrap/base-css.html) everything is of course working correctly.
In my inspector I see the following difference:
My page:
The twitter bootstrap page:
So definitely the problem is that the user agent stylesheet is overriding the bootstrap styles.
I haven't been able to figure out why this is different on my page and the twitter bootstrap page.
Most of the other CSS is working fine.
My css import:
<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">
CSS import on twitter bootstrap page:
<link href="assets/css/bootstrap.css" rel="stylesheet">
I actually figured this out myself. I had the <!DOCTYPE html> tag wrongly written. So if you have this problem make sure the doctype declaration is correct!
Please import the docs.css into your application as well. If I must say so, you must have realized that the Twitter Bootstrap Docs are using bootstrap.css and a custom docs.css. Try doing, which you can download from the github package. Then, try playing around with the table classes in docs. css without messing with the master css. Or try adding DOCTYPE in headers.
<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
If declaring <!DOCTYPE html> in the very beginning doesn't work, then it's probably not your user-agent style sheet casuing it. It may be Bootstrap's style sheet overriding your styles (I've had this problem). Make sure your style sheet is linked to after Bootstrap's style sheet in your HTML.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->
I had the same issue as the OP. I wanted lovely small text and some user stylesheet was overiding it and putting:
font-size: medium;
When I wanted:
font-size:8pt;
I placed the following at the top of my HTML page:
<!DOCTYPE html>
All was good then, a bad habit to get into to not declare doctype at the top. All user stylesheets have now gone.
To discover what is overriding what on your CSS it is always a good idea to inspect element (F12) and you can modify and untick attributes on the fly until you get to right, then update your CSS file with it!
However if you do have a user stylesheet issue, these values will be locked.
Check whether your CSS is called or not in browser dev tools (press F12) under network column.
If it is not called, use your style sheets with1 rel="stylesheet" type="text/css".
It worked for me.