I have a django back end website and I tried to load the css in HTML as follows.
{% load static %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/aos.css' %}" rel="stylesheet">
<link href="{% static 'css/index.css' %}" rel="stylesheet">
however this makes all texts on my website completely transparent. I can still see the letter is there by cursoring tho.
I tried to not add aos.css but with bootstrap.min.css and index.css and they worked fine.
Is aos.css not compatible with django framework?
Django is a backend framework so you don't have to worry about it's comparability since you're integrating aos on frontend. Did you load up the aos.js? An alternative would be to use the CDN.
Related
I have checked the other topics, they seem similar but won't solve my problem:
I am writing a web application using flask and bootstrap works fine but my custom stylesheet gets completely ignored and I can't figure out why.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="/static/styles.css" rel="stylesheet">
<title>C$50 Final_Project: {% block title %}{% endblock %}</title>
</head>
Use the Compiled CSS and JS instead?
https://getbootstrap.com/docs/4.3/getting-started/download/
and maybe try to use "url_for" for the file path
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/bootstrap.min.css') }}">
Browser cache needed to be cleared...
I am not sure why this question was downvoted so much, but I probably should have added, that the path for static.css is not the problem...
I have a html template that is rendered through index view.
It has a couple static css that are referenced:
<html lang="pt-pt">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>AppGestao by Araujo</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!--STYLE FILES START-->
{% load staticfiles %}
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"/>
<!-- Animation library for notifications -->
<link href="{% static 'css/animate.min.css' %}" rel="stylesheet" type="text/css"/>
<!-- Light Bootstrap Table core CSS -->
<link href="{% static 'css/light-bootstrap-dashboard.css?v=1.4.0' %}" rel="stylesheet" type="text/css"/>
<!--STYLE FILES END-->
</head>
I have the files inside APP_NAME/static/css
If I run this html alone without django rendering and manuel reference to static css works perfect.
If I do it through {%static it don't.
Despite this, when I see source code in chrome, they look exactly the same with same css links!
I solved this problem by changing this
<link href="{% static 'css/light-bootstrap-dashboard.css?v=1.4.0' %}" rel="stylesheet" type="text/css"/>
to
<link href="{% static 'css/light-bootstrap-dashboard.css' %}" rel="stylesheet" type="text/css"/>
It's strange because it works without django.
Why is that version there? (this was taken by an official bootstrap template)
It looks like what you need is static urls that also get passed GET parameters like is shown in this post previous SO post
Simply add them to the end:
<a href="{% static css/css.css %}?office=foobar">
For Django 1.5+
<a href="{% static 'css/css.css' %}?office=foobar">
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.
This is the content of my base.html.twig file:
<html lang="en" class="no-js">
<head>
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
{% block stylesheets %}
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" type="text/css">
{% endblock %}
</head>
This is the path of my file: C:\xampp\htdocs\myproject\app\Resources\assets\css\bootstrap.css.
I am note sure if my path is correct I am a totally newbie to this. Can someone point me and explained step by step how can include a css file ? thx in advance
[UPDATE] Here is my structure of my project
In project folder add to
src/AppBundle(or name of your bundle)/Resources/public/css/bootstrap.css
and then in twig template do this:
{{asset('bundles/name_of_your_bundle/css/bootstrap.css')}}
This will generate url for your file in src/your_bundle/Resources/public/css/bootstrap.css
I suggest you to read this blog: http://tutorial.symblog.co.uk/index.html
There is series how to create blog in symfony2.
firstly, including a css file has got nothing to do with php or symphony
<link href="css\bootstrap.css" rel="stylesheet" type="text/css">
if you are using this to include the css file then your php file must be in the assets folder, if its outside any other folder, just say its in the app folder then you need to include those folders as well in the path.
<link href="Resources\assets\css\bootstrap.css" rel="stylesheet" type="text/css">
as you said you are totally newbie, and i see you are trying symphony. i would like to advice you to start with HTML and CSS, then PHP and and move to symphony after that. If you do not want to face any problem in the future.
I use Code Snippet in django-ckeditor
but in the Target Page it can‘t work when I change the css
whatever I change in css like
<link rel="stylesheet" href="/static/highlight/styles/monokai_sublime.css">
the css is always default.css
So what is the problem?
my base.html is:
<link rel="stylesheet" href="/static/highlight/styles/monokai_sublime.css">
<script src="/static/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
In your settings I would set STATIC_URL = /static/ and STATIC_DIRS = path.to.static.files.
Then in your base.html template, at the top {% load staticfiles %}. Furthermore, you can use <link rel="stylesheet" href="{% static 'styles/monokai_sublime.css' %}"> (assuming that's how your path is setup).