I have an index.html file which includes a whole bunch of css and js files. I have MaterializeCSS included as well as a css file called style.css. For some reason if I have them both included at the same time, when I create a page and use something from materialize (the tabs for instance) they don't look the way they should. Everything is initialized correctly and there are no errors anywhere, the font on the tabs is just not the one that should be there. When I tried not including style.css the tabs looked the way they should.
The problem is that I can't not include style.css because without it, the entire website looks messed up. I tried including them in a different order but that didn't fix it.
Here is style.css.
EDIT: I just tried commenting out all the font-family elements in style.css and everything seems to be working. I could just leave it this way however I don't think this is a very elegant solution.
my guess is that your styles.css is overriding some of the css in Materialize.css and vice versa. You could check using the Dom explorer and see what is being overwritten. Chrome is very good for this as it crosses out the over written css shown in the picture linked below.
Once you find out what is being overwritten you could then write your own styles overwriting it again to make it look how you want.
Hope it helped :)
overwritten styles in chrome
Related
So I am working on a web project with other students and we are creating different parts of a web project.
I am having a problem whenever I link a teammates css file to my html document. The buttons are out of wack doesn't resize right...etc etc.
I read somewhere that if you have multiple css files linked the last one takes precedence. I tried that and it didn't help. I realized that there may be styles in my teammate's css file that are not in mine and that's whats causing the problem. Is there anyway to fix this issue without going through all the of my teammate's css file and trying to figure out what's causing the styling issues?
CSS always applies based on the priority. Except debugging an element using dev tools, we do not have any other way to get rid of it.
Use !important if your CSS should override others and ask teammates not to use !important for the same CSS.
Also inline CSS overrides header CSS and header CSS overrides External CSS, in the absence of !important
I have some problem with css files, to be more detailed i have linked 2 css stiles in one html file one is style.scc and bootstrap.css I am using bootstrap social button and that's why i need bootstrap. but this movement has changed almost everything in my site...
so is there a way to call bootstrap.css file in single div and in aver divs to have original css file?
PS css Scoped property don't works from me!
No, it is not possible, if you only using bootstrap for social button - just copy styles from bootstrap.css to your stylesheet (style.css).
Scoped CSS works only in Firefox for now.
Never mynde i founde the solution from "here"
you mast set the mos important css file the last and the least important first
:-)
Bootstrap already has a feature in their site to help you doing custom builds, check it using the following link: Customize.
Also, you can always get the source code and working with it by yourself.
For more information, check the following link: Compiling CSS and JavaScript.
My HTML page with CSS customization works well when previewed in a local computer using a browser but when I FTP it to my domain, CSS suddenly stops working. Gradient in the background, fonts and padding all get lost.
P.S. I have checked the link to my CSS in the HTML file and it rightly shows to be ./CSS/style.css
Please help!
include your css file properly <link href="../CSS/style.css" rel="stylesheet" type="text/css" /> not ./CSS/style.css provided your CSS folder is one level outside the html file to which you are including the same
Firstly, check if the link itself is working - eg. Any styling is working at all.
If not, search for tutorials on how to link a css file into a html document - See link below
http://www.w3schools.com/css/css_howto.asp
If the link is working, but those styles are not.
A. Selectors are wrong and elements are not being targeted properly
B. Elements styling is being overwritten somewhere else in the site. This site has a simple and easy to understand description of hierarchy in CSS and what gets applied over top of other styling
http://www.nzwhost.com/article/understanding-css-hierarchy
Ultimately, this is all speculation. I hope it solves your problem however without a look at the code itself, it could simply be a typo.
I'm trying to create my own Wordpress theme just for a one page, secured form. This form looks as it should normally, as you can see in this screenshot -->
Unfortunately, even though I've included my own reset.css file, WordPress is inheriting styles from the theme's style.css file. See here -->
As you can see, the font size is much smaller, input fields aren't getting proper padding, the body background is supposed to be blue but is a grayish color in the second screenshot, fields aren't getting proper margins etc.
I know everyone is going to be asking for code, but before I do that, I'm just wondering if there is a default css file you can delete or modify that most of these styles would be included on. I'm guessing this might be included in the admin bar that gives default margin to the top?
If I need to add code, please just let me know and I will. I'm just assuming there are some wordpress gurus out there who already know the answer to this question.
Thank you
Here are some options:
Go to /wp-content/themes/YOUR-THEME/header.php and remove any stylesheet includes.
Go to /wp-content/themes/YOUR-THEME/functions.php and remove any wp_enqueue_style()
Make sure the style isn't generated by a plugin. If it is, you can deregister the style. Here is a link explaining how: http://speakinginbytes.com/2012/09/disable-plugins-css-file/
Overwrite the styles using your own stylesheet. Make sure your stylesheet comes LAST. You can do this a few ways - I'd recommend using wp_enqueue_style() with a dependency on the offending stylesheet.
You should be able to just delete the content below the theme info in the style.css file in wordpress and it will completely axe all of wordpress default styles.
https://codex.wordpress.org/Finding_Your_CSS_Styles
I have a problem with getting the CSS framwork 960.gs to work with Meteor. I've put the reset.css in a lib/ folder so it loads first. After that, 960.css and *960_12_col.css* is loaded from the css/ folder. However, when I copy the example (only the things from inside of body-tags) from http://960.gs/demo_24_col.html into my Meteor application, it simply doesn't work. I don't expect colors and other styling to follow but the grid system should be working. I've checked so everything is loaded in the right order but can't find any more way to finding a solution to this.
This might sound sad, but have you tried loading all the css as they do that demo page? Ordering from top down in your html is the way to load css with notions of specificity.
Just a silly mistake. The demo uses the 24 column grid. I've used the 12 column grid file. Once I used the 24 column, everything was solved.