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!
Related
file structure:
app/template/base.html
app/static/css/base.css
I have created the base.html to contain the header, which I am importing to the other HTML pages to keep it the same throughout the website. And I want to style this header as well, so I am trying to link a base.css to my base.html, but no luck.
Things which i have tried are : adding inline css, adding external css,adding internal css, clearing the cache, adding a block.
code in base.html:
{%load static%}<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'static/css/base.css' %}">
</head>
<body>
<nav>
<button id="myButton" >Home</button>
<button id="aboutButton" >About</button>
<button id="contactButton" >Contact</button>
</nav>
{% block content %}
{% endblock content %}
<footer>
<p>this is footer</p>
</footer>
<script type="text/javascript">
document.getElementById("myButton").onclick = function () {
location.href = "{% url 'home' %}";
};
document.getElementById("aboutButton").onclick = function () {
location.href = "{% url 'about' %}";
};
document.getElementById("contactButton").onclick = function () {
location.href = "{% url 'contact' %}";
};
</script>
</body>
</html>
that's my base.html code, which i want to link with base.css:
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
how i am extending the base.html to other pages is as follows,
home.html which is extending the base.html same navigation bar with other:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<html>
<head>
<title>Smooth</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<!--sample how my other html pages look like-->
I hope i have given a good idea how my file system is, how the code is in my project.
now how can i link base.css with the base.html, so that i can style the buttons in header using an external css file.
It depends on your settings, for e.g. this is how my settings for static files looks like:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
and my base.css is located at:
/project_name/static/base.css
So you should check your setting for static files.
You can also try to change your link tag to
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
because if your settings are configured to /app/static/ when u link static like
<link rel="stylesheet" type="text/css" href="{% static 'static/css/base.css' %}">
It's looking for /app/static/static/css/base.css instead /app/static/css/base.css
I've been trying to learn HTML and have been following a tutorial online.(https://www.w3schools.com/html/html_css.asp) the tutorial does have some misinformation, so I've been looking on here for help as well. I have reached the point where you use external CSS files rather than using the <style> function.
My code is in /HTML/[ProjectName]/project.html, while my CSS is in /HTML/[ProjectName]/CSS/styles.css. Below are both files;
body {
background-color: powderblue;
}
h1 {
color: red;
}
p1 {
font-size: 200%;
}
<!DOCTYPE html>
<html>
<title> Linked CSS </title>
<head>
<link rel="style" type="text/css" href="/CSS/styles.css">
</head>
<body>
<h1> The CSS is in a separate doc </h1>
<p1> Let's see how this works out </p1>
<a href="/CSS/Styles.css" target="_blank">
<p2> Link to CSS file </p2>
</a>
</body>
</html>
From what I've read the css is properly linked to my file, and when I open the link it opens to the css page. What am I doing wrong?
Make sure you update your code to match your correct filename.
If your CSS is stored in the /HTML/[ProjectName]/CSS/style.css, then you should it like this
<link rel="stylesheet" type="text/css" href="CSS/style.css">
Try writing <link rel="stylesheet" type="text/css" href="CSS\styles.css">and check the spelling of your CSS file because they are different in question and in your code.
It`s easy. Take it
link rel='stylesheet' type='text/css' href='CSS/style.css'
and read W3School
<!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
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.
My problem is that my website that I'm attempting to host with Github pages will not read the CSS that I have linked to it.
My HTML looks like this:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">
<html>
<body>
<h1>Hello World</h1>
<p>I'm under construction!</p>
<h6>Copyright MIT Licence 2018</h6>
</body>
</html>
My CSS looks like this:
body {
background-color: lightblue;
}
h6 {
color: navy;
margin-left: 20px;
}
Link repository: legoman8304.github.io
I'm guessing I linked the CSS wrong because when I using inspect element on the site itself it does show style.css but when opened it's empty. Any help?
You need to link your HTML to the github page rendered style.css and not the file itself in the repo.
Change this:
<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">
To this:
<link rel="stylesheet" type="text/css" href="https://legoman8304.github.io/style.css">
And move that stylesheet reference inside your <head> tag.
You can use some way:
Recommend: <link type="text/css" rel="stylesheet" href="style.css" />
Use from raw your css with href: https://raw.githubusercontent.com/legoman8304/legoman8304.github.io/master/style.css