When adding some custom CSS to your ModelAdmins, you usually do something like this:
class BookAdmin(admin.ModelAdmin):
class Media:
css = {
"all": ("my_custom_styles.css", )
}
My problem is that such style sheets are added BEFORE third-party apps style sheets, making it impossibile to override them easily (in fact, they override the custom styles):
<link href="my_custom_styles.css" type="text/css" media="all" rel="stylesheet" />
<link href="base_styles.css" type="text/css" media="all" rel="stylesheet" />
I'd like to swap such order. Is there any easy way to accomplish that?
Related
I am new to Laravel and was wondering where I should put each css files for my views. I want to keep them separate and don't to have my styles in one file. Also, how would I be able to access them in those views? I tried using
<link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" /> but nothing changed in my view. The path where I have my file is storage/public/css/style.css
If your link is <link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" /> change it to <link rel="stylesheet" type="text/css" href="/css/style.css" /> and put your style sheet in /public/css/style.css
<link rel="stylesheet" href="{{asset("css/style.css")}}">
used this code,here asset link to your public folder and put your style sheet in /public/css/style.css
<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");
I'm working on two different WordPress sites that are in many ways similar but are skinned differently.
For example, let's say I'm working on two 'magazine' sites, which share the same CSS layout e.g. grid system, margin's etc., but different CSS decorational properties e.g. gradients, colours, shadows.
What is the best way to get them to share the same base CSS layout, but different decorational CSS?
Initially I thought something like ...
<link rel="stylesheet" type="text/css" media="all" href="LINK-TO-BASE-CSS-ON-PRIMARY-DOMAIN.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/style.css" /> <!-- This would be the 'top-up' CSS -->
This doesn't seem particularly clean to me though. I admit though, there is also a very similar question here.
Is this still considered the best way?
Are there any disadvantages to linking to another domain? I've read that this may even be an advantage because of cross-domain loading.
What you suggested is fine. I'm not sure that there is an advantage called "cross-domain loading", but hosting your style sheets in another server is a very common practice. This other server is known as a CDN, or Content Delivery Network. Here's some information about CDNs and their advantages:
http://www.sitepoint.com/7-reasons-to-use-a-cdn/
Also, pro-tip: do some DNS prefetching if you're going to use a separate domain to host your files. It's as easy as:
<link rel="dns-prefetch" href="//myexternalcdn.com" />
try to separate layout structure and templates and call everything from the same domain
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/structure.css" />
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/firsttamplatename.css" />
OR
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/structure.css" />
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/secondtamplatename.css" />
Benefit of this solution is that you can adtionaly offer switching templates :D
You can use this filter, to filter out styles with any condition or alternate output href string, example:
add_filter( 'style_loader_src', function($href){
if(strpos($href, "name-of-allowed.css") !== false) {
return $href;
}
return false;
});
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.
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