Good morning,
I am creating my 1st Wordpress theme from scratch and I have hit my 1st barrier.
If you take a look at my progress so far;
http://www.trevorpeters.co.uk/brad/?page_id=4
You will see that the CSS is linked correctly, but the H1 tag and P tag are not taking all of the attributes from the defined style, In Mozilla Firefox dev tools, some of the attributes are crossed out but are NOT being overwritten by any other styles.
Thanks, Brad Houston
Your styles get overridden by reset.css line 92. You can have a look at computed styles in the dev tools to have a look which style finally is applied to your element and the name of the source this style comes from. This is very handy when there are a lot of styles overriding each other.
You need to switch the order of your style.css and reset.css and then everything should be fine, because now your stylesheet overrides the default settings of the reset.css.
your style.css is above your reset.css.. what you do expect?
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/css/reset.css" type="text/css" media="screen" />
should be
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/style.css" type="text/css" media="screen" />
check your header.php for the codes...
Looks like you've placed the CSS-files in the wrong order.
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.trevorpeters.co.uk/brad/wp-content/themes/andromeda/css/reset.css" type="text/css" media="screen" />
You reset your style after style.css.
You need to reorder the css stylesheets. You're putting the reset.css after the style.css so the reset is overlapping the style.
Related
I created custom.css to overwrite my bootstrap. It works but for a few seconds, it shows default bootstrap style first, and then loads custom one. Any ideas? Thanks!
The custom css goes after bootstrap btw:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<link rel="stylesheet" href="https://toert.github.io/Isolated-Bootstrap/versions/4.0.0-beta/iso_bootstrap4.0.0min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" href="https://toert.github.io/Isolated-Bootstrap/versions/4.0.0-beta/iso_bootstrap4.0.0min.css">
Try switching the places so that custom.css loads first ^^
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
If I use this .css file in my code, it will overlap the previous .css files which I wrote myself, how can i load my .css files first, if I can not find the css then turn to the bootstrap .css file?
i would guess that your css declaration looks like this
<link rel="stylesheet" type="text/css" href="yourcss.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
you should change them upside-down
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="yourcss.css" />
the reason is that any css that is closer to the body tag, will be considered the first priority. if items in yourcss.css has the SAME NAME with the items your bootstrap.css, the bootstrap.css's items will be OVERRIDDEN. if you didn't want to override these, make sure the item/class/id name is different for each in the yourcss.css. Make the best practice of giving each tag a different class name for your css.
You write your css files like this:
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/your-style.css" />
try this
<link rel="stylesheet" href="assets/css/bootstrap.css">
after your own css
<link rel="stylesheet" href="assets/css/YOURCSS.css">
You could load your own CSS with
<link rel="stylesheet" type="text/css" href="css/style.css" />
and then import bootstrap inside your own CSS file, that way your CSS will be on top of bootstrap and you will be able to override it.
#import url("bootstrap.css");
One of my stylesheets doesn't seem to load every style. I've read everything i can find but the issues that people usually have are obvious things to me but i can't seem to figure out my own issue. I have a site made using Razor and this is where i call my stylesheets in the head section.
<link href="#Url.Content("~/css/reset.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/jquery-ui-1.10.1.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchLayout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchSkin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/skin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/AvailabilityLayout.css")" rel="stylesheet" type="text/css" media="screen" />
<link href="#Url.Content("~/css/AvailabilitySkin.css")" rel="stylesheet" type="text/css" media="screen"/>
<link href="#Url.Content("~/css/Home.css")" rel="stylesheet" type="text/css" />
The issue seems to be with the AVailabilitySkin.css and sometimes AvailabilityLayout.css. So for example i have this code in AvailibilitySkin.css:
td#price h2, td#price h4
{
text-align:center;
}
And it doesn't get picked up, I don't even see it being overwritten by another style or anything. But if I add the same code to the Skin.css file then it works perfectly fine. I can't add all my styles to Skin.css so i can't just put that style in there and call it a day. It has to be separated, right now the site is being developed locally so unfortunately i cannot post a link to the site but if anything is needed (like more code) please let me know. I haven't been able to find the issue and I've tried adding #charset "UTF-8"; at the top of the stylesheets and it didn't really do much.
Problem has been fixed guys/gals. In the end it was just another mistake by me and it wasn't coming up in the Console and Visual Studio wasn't flagging it as an issue. It was mostly just a missed single quote and another programmer here ran the code through WebStorm and it came right up and fixed it. Thanks for the help and sorry for the dumb mistake question.
I know this is a simple question but for some reason I'm wondering if I'm doing something wrong here.
My understanding is that if you declare 2 CSS files
<script type="text/css" src="JQueryUI.css"></script>
<script type="text/css" src="Override.css"></script>
I want to use the "Override.css" to override some values, so if I type let's say ".ui-accordion" and put my own values, i would expect them to take priority over the original values located under that name on the JQuery.css file.
Mainly because the declaration states that Override.css comes AFTER JWuery.css.
For some reason this is NOT happening.
I tried switching the declaration of the 2 files
...but the Jquery.css seems to ALWAYS seems to take priority.
Any reason why ??
This is not working because you are not loading correctly the css files.
It should be:
<link rel="stylesheet" href="JQueryUI.css" type="text/css" media="all" />
<link rel="stylesheet" href="Override.css" type="text/css" media="all" />
I am agree with Zhihao about specificity of elements, but I have also noticed that your are using <script> to attach CSS files, use <link> tags instead, maybe that would load your css and it will override existing styles:
<link rel="stylesheet" type="text/css" href="JQueryUI.css" />
<link rel="stylesheet" type="text/css" href="Override.css" />
P.S. just posted my notice in the comment as an answer
Currently I have my stylesheets as such:
<link rel="stylesheet" media="print" href="css/print.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
Is there a way to force style.css to be only on a monitor, and force print to only be on printed matter? I'm trying to make a printer-friendly page and it's taking forever to override the mass of rules in style.css.
Use media="screen" on the main stylesheet so styles are only applied on a monitor screen:
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
If you don't specify a media attribute, the stylesheet takes a default of media="all", which means styles are applied everywhere.
Read more about media types here (HTML spec) and here (CSS spec).