<!DOCTYPE html>
<html>
<head>
<title>
{%block title%}
{%endblock%}
</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',
filename='css/main.css')}}">
</head>
<body>
{%block body%}
{%endblock%}
</body>
</html>
I tried this but there is just no css styles that can be seen on my web page. It doesn't link to css file. I tried href="../static/css/style.css" and also tried replacing my href to src, but it still has the same result, no css style that can be seen.
css path is static/css/main.css
try ctrl+Shift+R to refresh the browser for chrome browser
Related
I'm just starting out with HTML and CSS and I can't figure out why my CSS won't link to my HTML template.
Index.html and style.css are in the same folder currently, and the css works fine when it's internal. Am I missing something obvious?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
header
<div class="header-right">
<a class="active" href="#home">Home</a>
Contact
About
test
</div>
</div>
{% block content %}{% endblock %}
<h5>footer</h5>
</body>
</html>
Edit: the problem seems to be some sort of compatibility issue. In safari a selected my own style sheet in preferences and it worked properly (I couldn't figure out how to do it in chrome). This doesn't seem like a permanent solution though?
you can try with putting the path of the file by using "./path" and see if it works also check whether your webserver takes your css files as text as you have given type as text/css.
Here is my views.py file:
from django.shortcuts import render
def page(request):
css = 'temp/css.css'
return render(request, 'temp/index.html', {'css': css})
and templates/temp/index.html file:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static '{{ css|safe }}' %}">
</head>
<body>
Hello Page
</body>
</html>
and static/temp/css.css file:
* {
width: 100vw;
height: 100vh;
background: red;
}
After rendering source of the page is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/%7B%7B%20css%7Csafe%20%7D%7D">
</head>
<body>
Hello Page
</body>
</html>
but I am expecting
...
<link rel="stylesheet" type="text/css" href="/static/temp/css.css">
...
Why it is not working? Is there any way to do this? How to link a static file if the path is provided by the context in html?
Assuming 'css' is your context variable, you should be able to just do the below. Basically drop the quotes around the 'css' variable.
<link rel="stylesheet" href="{% static css %}">
You should add <link rel="stylesheet" type="text/css" href="/static/temp/css.css"> to your index.html directly. That way it will take care of itself and you don't need to pass it as the context.
I am trying to get a Google font to load from css to my html template for my application. Can't get the "Upload schtuff" to assume the Bangers font. Here's the base.html:
{% load static %}
<!doctype html>
<html>
<title>{% block title %}Upload Schtuff{% endblock %}</title>
<head>
<link href="//fonts.googleapis.com/css?family=Bangers&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div>
<h1>Upload schtuff </h1>
</div>
</body>
</html>
Here's the static/uploader/style.css:
'''
h1 a, h2 a
{
color: #714D91;
font-family: 'Bangers', cursive;
}
'''
I've also tried importing the font to the style sheet with
#import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
Also tried importing it to the .html file
<style>
#import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
</style>
It's got to be my link href lines, right?
Thanks in advance!
Ok I got it to work! This was my first time adding multiple Css files... and I was missing this in my settings.py file
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
LOL, thanks for being a good community and standing by me while I solve my own problems!
I'm stuck in the first few steps of developing a very basic static website. I began by typing out my header and then I created a main.css file in a css directory and I set the body background color as a test to verify that the link is working. When I preview index.html in the browser, I'm not getting a color for the body but I'm also getting the text of my link showing up above the header. I believe I'm following the right protocol and can not figure out why this is. Any ideas? T.I.A.
File structure:
css
main.css
normalize.css
index.html
Browser preview:
rel="stylesheet" href="css/normalize.css"> rel="stylesheet" href="css/main.css">
Quiet Woods
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Quiet Woods </title>
<link> rel="stylesheet" href="css/normalize.css">
<link> rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1> Quiet Woods </h1>
</header>
</body>
</html>
You must remove the > character:
<link rel="stylesheet" href="css/normalize.css">
I am trying to change the background image for the base-2014 theme in Bolt. I have uploaded the picture into the images folder inside the theme folder.I am editing the html code that is in _header.twig file in order to change the background. I am applying the background in the body tag. Although plain colours seem to work,when I apply an image it does not display it as the background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
{% if record.title is defined %}{{ record.title|striptags }} | {% endif %}
{{ app.config.get('general/sitename') }}
{% if record.title is not defined and app.config.get('general/payoff') %} | {{ app.config.get('general/payoff') }}{% endif %}
</title>
<!-- Bootstrap -->
<link href="{{ paths.theme }}css/bootstrap.min.css" rel="stylesheet">
<link href="{{ paths.theme }}css/pwr-bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body background =" website.net/theme/base-2014/imagesbg.jpg">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
Can someone guide me as to where I am going wrong?
The background attribute is not supported anymore since HTML5 use css instead add a style tag between the head tag with the following code.
<style>
body {
background-image:url(bgimage.jpg)"
}
</style>
Or you can use this method if you want to put it in the HTML attribute :
<body background ="{{paths.theme}}/backgrounds/yourimage.jpg">
You call the path like this {{ paths.theme }} and put the picture you want into a folder named "backgrounds" (or as you want) and finally the name of your picture.