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">
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 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...
[UPDATE]
Please not that most of these elements are loaded from the cache so no need to connect to the database which means it's not a database or server delay.
I'm using Laravel in my project and here's the main header code
<!DOCTYPE html>
<html lang="{{ $lang }}" dir="#if($lang == 'ar') rtl #else ltr #endif">
<head>
<meta charset="utf-8">
<meta name="_token" id="main_token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<script src="<?=config("app.public_path")?>js/jquery-2.2.4.min.js"></script>
<script src="<?=config("app.public_path")?>js/bootstrap.3.4.min.js"></script>
<!-- HTML5 Shim and Respond.js 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]-->
<script src="<?=config("app.public_path")?>js/modernizr-2.7.1.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="<?=config("app.public_path")?>bootstrap/css/bootstrap.min.css">
#if($lang == 'ar') <link rel="stylesheet" href="<?=config("app.public_path")?>css/bootstrap-rtl.css"> #endif
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="<?=config("app.public_path")?>css/style_{{$lang}}.css">
And the config public path
'public_path' => 'http://www.example.com/public/',
The elements load in wrong places with wrong sizes then in seconds the stylesheet loads and elements get positiined correctly and resized too which makes the page look ugly at the beginning and I'm talking about css not javascript or jQuery. Why does this happen and how to solve it?
You should be using the asset function instead of PHP shorthand echo tags and config paths.
For example, instead of this:
<?=config("app.public_path")?>js/jquery-2.2.4.min.js
You are supposed to do this:
{{ asset('js/jquery-2.2.4.min.js') }}
Also, consider using defer for your scripts e.g.:
<script src="{{ asset('js/jquery-2.2.4.min.js') }}" defer></script>
I have imported a html page into my laravel 4 project. I linked all the js and css files together. However, when loading the page the page just outputs plain html.
This is my internal folder structure:
In my main.blade.php site I link to my css like that:
<!-- CSS Files
================================================== -->
<link rel="stylesheet" href="{{asset('css/mainPage/bootstrap.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/jpreloader.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/animate.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/flexslider.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/plugin.css')}}" type="text/css">
Any recommendations what I am doing wrong?
I appreciate your answer!
As the others already pointed out, your missing the 'assets' at the beginning of your path. That's because it requires the full path relative to the public folder.
Besides that, I suggest you use the tools Laravel provides to generate the full link tag of your css includes. It makes your code a lot more cleaner.
{{ HTML::style('assets/css/mainPage/bootstrap.css') }}
And there's HTML::script('path') as well for javascript files
Use the following:
<!-- CSS Files
================================================== -->
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/bootstrap.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/jpreloader.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/animate.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/flexslider.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/plugin.css')}}" type="text/css">
give the full path of the directory under public folder:-
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/bootstrap.css') }}">
I have a problem with creating pdf file. I include css3 file into head section in view, but it's doesn't work.
Included file is twitter bootstrap css and main css of application theme.
...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" media="all" rel="stylesheet" href="packages/bootstrap/css/bootstrap.min.css">
<link type="text/css" media="all" rel="stylesheet" href="css/dashboard/style.min.css">
</head>
...
Have an idea?
Can you try to use a full path? (eg. use the asset() helper)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" media="all" rel="stylesheet" href="{{ asset('packages/bootstrap/css/bootstrap.min.css') }}">
<link type="text/css" media="all" rel="stylesheet" href="{{ asset('css/dashboard/style.min.css') }}">
</head>
I'm assuming you are using https://github.com/barryvdh/laravel-dompdf ?
An alternative is using wkhtmltopdf, which is possible with the same interface etc: https://github.com/barryvdh/laravel-snappy (but requires to install wkhtmltopdf)
I solve this problem by typing the public_path in href attribute, following instruccions from https://github.com/barryvdh/laravel-dompdf/issues/121#issuecomment-358245406:
<link href="{{ public_path('css/pdf.css') }}" rel="stylesheet">
NOTE: I'm using a local virtual server. I hope this works for you.
I solve this problem by using external CSS's full path. This one worked on my linux ubuntu server :
<link rel="stylesheet" href="/var/www/mysite/public/css/main.css" media="all" />
You also can solve not loaded image problem by using this solution.