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).
Related
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.
I put my CSS file inside public/css folder. I added CSS file in head section like below.
<link href="{{ url('/css/app.css') }}" rel="stylesheet">
But CSS is not working.
This is working for me in Laravel 8 (make sure your files are in the public folder)
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
In Laravel 8, make sure your files are in the public folder and reference them like this:
<link rel="stylesheet" type="text/css" href="{{ url('css/app.css') }}">
I don't see why you can't just use a relative URL like:
<link href="./css/app.css" rel="stylesheet">
Below worked for me.
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/app.css') }}">
I'm writing some HTML within a div element with class lucy-terms. Within that element, I'd like all p elements to automatically have Materialize's class flow-text added to them.
Here is a snippet of the HTML (actually a Django template using django-sass-processor:
{% load sass_tags %}
<html>
<head>
<!-- Materialize.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="{% sass_src 'stylesheets/terms_of_service.scss' %}" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container lucy-terms">
<h4 class="center-align">Terms of Use</h4>
<p class="flow-text">PLEASE NOTE THAT YOUR USE OF AND ACCESS TO OUR SERVICES (DEFINED BELOW) ARE SUBJECT TO THE FOLLOWING TERMS. IF YOU DO NOT AGREE TO ALL OF THE FOLLOWING, YOU MAY NOT USE OR ACCESS THE SERVICES IN ANY MANNER.</p>
</div>
</body>
</html>
Here is stylesheets/terms_of_service.scss:
.lucy-terms p {
// #extend .flow-text;
font-size: 14px;
}
Note that #extend .flow-text; is commented out. If I comment it in, I get the following error:
Error: ".lucy-terms p" failed to #extend ".flow-text".
The selector ".flow-text" was not found.
Use "#extend .flow-text !optional" if the extend should be able to fail.
on line 2 of lucy_web/static/stylesheets/terms_of_service.scss
Basically, within terms_of_service.scss, the flow-text class is not defined; it is defined in the Materialize source code. So I would have to add something like (in 'Python pseudocode')
from materialize import flow-text
Is it possible to import classes from external 'libraries' in SCSS?
Update
Incidentally, here is something I tried that didn't work. I thought that the #extend might work if the Materialize source code and my own CSS were both included into a single file. I tried to achieve this using django-compressor like so:
{% load static %}
{% load sass_tags %}
{% load compress %}
<html>
<head>
<!-- Materialize.css -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">-->
{% compress css %}
<link href="{% static 'stylesheets/vendor/materialize.css' %}" rel="stylesheet" type="text/css" />
<link href="{% sass_src 'stylesheets/terms_of_service.scss' %}" rel="stylesheet" type="text/css" />
{% endcompress %}
</head>
where I refer to a version of Materialize in the local static files instead of one from a CDN (because Django Compressor chokes on the latter). Unfortunately, however, I still get the same error.
I that to do this, I needed to use the source version (in SCSS) of Materialize, not the standard version (in CSS). So, instead of stylesheets/vendor/materialize.css, I now have a stylesheets/vendor/materialize.scss (together with the accompanying components directory). Then in my own SCSS, I can do
#import 'vendor/materialize'
.lucy-terms p {
#extend .flow-text;
}
and it works as expected.
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.
Today I deployed my application and I experienced a problem regarding my css.
In my main template I have the following code :
<!-- BEGIN GLOBAL MANDATORY STYLES -->
{% stylesheets
'bundles/appgenerictheme/current/frontend/css/style1.css'
'bundles/appgenerictheme/current/frontend/css/style2.css'
'bundles/appgenerictheme/current/frontend/css/style3.css'
output='css/style.css' filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="screen" charset="utf-8">
{% endstylesheets %}
The order bellow 1,2,3 is important because in style2.css I overide some rules defined in style1.css etc ...
In my dev environment I had no problems because the css are rendered like this :
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link rel="stylesheet" href="/app_dev.php/css/style1.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="/app_dev.php/css/style2.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="/app_dev.php/css/style3.css" type="text/css" media="screen" charset="utf-8">
But in production environment, the rules changes and the assets are concatenated in one single file : style.css
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" charset="utf-8">
If I look into the generated style.css I can see that the order is not style1 -> style2 -> style3 but some random order making my rules to override css useless.
Is there a way to explicitly define an order for the concatenation of style.css ?
I've been trying to replicate this issue to no avail. It does respect the order in which I define them in my case.
Make sure you:
Install your assets: php app/console assets:install web
Dump the new CSS file: php app/console assetic:dump --env=prod --no-debug
Clear the cache: rm -fr app/cache/*
in that specific order.
Anyway, if that doesn't help you could try using different directories, like this:
<!-- BEGIN GLOBAL MANDATORY STYLES -->
{% stylesheets
'bundles/appgenerictheme/current/frontend/css/style1.css'
'bundles/appgenerictheme/current/frontend/css/d1/style2.css'
'bundles/appgenerictheme/current/frontend/css/d1/d2/style3.css'
output='css/style.css' filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="screen" charset="utf-8">
{% endstylesheets %}