I'm new to Django, and even more so to CSS. In the base.html of my site I included a bootstrap cdn as follows:
<meta charset="UTF-8">
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
However, I want to make some modifictions to the css and I cannot because the cdn is an external file. It wouldn't work when I simply copy the content to a local css file because of proocol issues.
According to this previous thread I've tried to add another line so it would override the cdn, as follows:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}/bootstrap/css/style.css">
but it doesn't work. I tried also to write this line in a local html file (i.e. not in base.html) but no success.
My questions are:
How do I override the cdn file? That is, also where is it best to
place the other css file (I have static directories both in project
and app levels for some reason), and if it matters how it is named?
What makes a simple and safe test to see if it worked?
Most of all, I'm looking for a way two place to elements (say, an image and a menu) alongside instead of stacked. This one seemed relevant, but it requires modifications to the css file, which I can't seem to make.
Where should the css links be placed? Like I wrote or inside the meta section?
Make sure that you defined STATIC_URL in your settings file
STATIC_URL = '/static/'
I would recommend you to read about static file in django documentation, in a simple words you should have a structure of your static files, create one folder named "static" inside your project folder and put all of your static files inside decomposed it by folders as well, for example, all your .css files you will put to
/static/css/main.css
etc.
Then I would hightly recommend using django.contrib.staticfiles
Finally all you have to do would look like that
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static/css/bootstrap/style.css %)">
And remove your cdn link from your code
Simply put a CSS file under the bootstrap call and override any classes you need to in there.
Related
my css is not working correctly on my github page. This is my repo. This is my website. I created this portfolio website without Github pages and it works correctly. I am very new to github , so there is a good chance I'm missing something. I usually localize all my css/jscript but for simplicity reasons I changed all my css/javascript to the html link.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css\main.css">
</head>
I had the same problem with my HTML file and my CSS file. I fixed it like this:
I had a repo with the index.html and a folder call "style" with the style.css file in it.
Deploy my index.html with the link tag within the head tag like this:
<link rel="stylesheet" href="./style/style.css" type="text/css">
Pay attention to the href attribute: "./style/style.css".
Andy.-
Like #TarasYaremkiv mentioned remove your './css/bootstrap-3.3.7/' folder.
The reason why it's happening is because Jekyll engine is looking for the includes present in the file 'bootstrap-3.3.7/docs/components.html'
For example: this file {% include components/glyphicons.html %} is not present in the components directory of your bootstrap folder. Hence the error.
You can avoid these kind of error's by downloading only the necessary compiled files or use cdn links
Change
<link rel="stylesheet" type="text/css" href="css\main.css">
to
<link rel="stylesheet" type="text/css" href="/css/main.css">
original post - External CSS not working with Github Pages
I'm having quite the weird issue. My Django (1.10) app is functioning just fine. I initially set it up using bootstrap with my own style.css file to customize the rest of it. However, since then I've had some issues and lost my git commits, so I can only go back to about 10 days ago when it was stable in production. I thought all was well until I tried to style some new pages and change some existing css, and then I found I couldn't.
My app seems to have style.css files all over the place. There seems to be 4 total, and none of them do anything. I've tried deleting everything from each one individually, and then deleting everything from all of them at once, but no matter what my site stays with its styling. I've cleared the cache from my browser, used a different browser, used incognito mode, etc. No matter what, the styles persist. I initially used collectstatic. Now, I've tried to do it again, and I've also tried collectstatic --clear, but both have the same effect: my root static folder gets an entire copy of my app put in it and I have to delete the changes with git.
Here's a link to the github page for it. And I'll post some relevent snippets below. Please let me know if any other information will make it easier to help, and I will be happy to provide it.
settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
Top of my base.html file which every other template derives from (note the last two lines):
<!DOCTYPE html>
<html lang="en" id="divTheme" class="light-theme">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>OP Translations</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'translations/style.css' %}" />
When I run collectstatic, it tells me the files will be collected in the top level static folder, but that is one of the files that does nothing when I change it.
I'm not really sure what else to post, so please let me know. All the existing posts on this question say its a browser cache issue, but for some reason that doesn't work here. I must have something else wrong.
I can't write a comment to ask something but i think that you edit the wrong style.css file.
I take a look in your Github project and found out that the style.css in https://github.com/technicallyrice27/translation-site/tree/master/translations/static/translations was not updated since 11 days.
but this is the file you need to edit when using the collectstatic command.
Hope this help you.
Doing a website for a client and I merely changed the name of the css file in the folder and in the references on each page. And suddenly all my styling is gone. I've checked multiple times for spelling errors and it's all correct and I do believe I have referenced it correctly as it was working previously under a different name. My Question is How can the changing of the css file suddenly stop it working if it's still referenced correctly? Could it be that bootstrap is overriding it somehow?
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script><!--Reference Bootstraop.min before plugins.js but after jquery.js. We alterbootstrap javascript with plugins.js -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</head>
Here is the <head> for my index html file.
The problem only occurred when I changed the file names but I can't leave it as "TestLayout" when it is a completed project. Any help is appreciated and I can supply what I can to help find the solution. Thanks in advance.
First off, a small tip: Load your custom CSS-file AFTER the bootstrap.css file. This way you can ensure that your styles are easily overriding the defaults of Bootstrap, so you don't have to bash in !important in order to change something.
And for your question, have you accidentally removed css/ from the beginning of your style.css? Since all the other CSS styles you have linked are under the CSS-folder.
Double check that, otherwise it should work, the name is valid.
If the path to your CSS file is still correct (and you haven't inadvertently removed the folder from the file path as per ProDexorite's answer) then you might need to completely refresh your browser.
You can do this with CTRL+F5 or to be completely sure you can empty your browser cache, although I usually find this isn't necessary.
ProDexorite is also correct regarding the CSS files - it's called Cascading Style Script which means any styles in the files you load last will overwrite the files loaded before. Therefore any custom CSS (main.css and style.css for example) should be loaded AFTER the Bootstrap or any other library css files. This just means you need to reference them in the right order in your page that's all.
I'm building a basic site and thought of using the flatpages app for a couple of pages. Problem is, I'm not sure how to serve static files in my flatpages.
The link in my flatpage template is this:
<link type="text/css" rel="stylesheet" href="static/base.css" />
However, firebug shows that file is being looked at:
localhost:8000/example_flatpage/static/base.css
instead of
localhost:8000/static/base.css
Infact, every link in the template works this way.
Instead of
localhost:8000/home/
localhost:8000/example_flatpage/home/
Here's my default flatpage template:
<html><head>
<title>title</title>
<link type="image/x-icon" rel="icon" href="static/favicon.ico" />
<link type="text/css" rel="stylesheet" href="static/base.css" />
</head>
<body>
mainly plain text
</body>
</html>
Any ideas??
Use "/static/base.css" instead of "static/base.css". The first one is a path relative to root '/', while the second form is a path relative to the current page.
I would like to have my Meteor app serve multiple css pages for various media types. For example:
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />
How would I do this?
/packages/meteor/package.js
defined that .css files should be bundled.
However, taking a close look at docs.meteor.com, we can find this information:
CSS files work just the same: the client will get a bundle with all the CSS in your tree (excluding the server and public subdirectories).
That last part is the interesting bit, if you place your CSS files in /public they will not get bundled together. Instead app/lib/bundler.js does the following around line 517:
files.cp_r(path.join(project_dir, 'public'),
path.join(build_path, 'static'), {ignore: ignore_files});
And server side, any files that are unresolved will also be checked in build/static, which means that when you put screen.css in /public you can keep using screen.css on the client.