Styling the Web with CSS in Django 2.0

I have a teammate who wrote some HTML code with CSS/Bootstrap. Now I am trying to render it in Django, but it's not displaying properly. It works fine as an HTML file, though.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/stylish-portfolio.min.css" rel="stylesheet">

cssdjangobootstrap-4

Answer №1

Make sure to configure your settings as follows:

STATIC_URL = '/static/'
STATIC_ROOT = "path/to/your/static/folder"

In your root urls.py file, add this code after urlpatterns:

from django.conf import settings
from django.conf.urls.static import static

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Don't forget to create a static folder in your project's root directory and copy all your static files there. Then, in your template, include the following:

{% load static %}

<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

That's how you use static files. If you have any more questions, refer to: https://docs.djangoproject.com/en/2.1/howto/static-files/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS causing issues with Materializecss dropdown menu operation

I'm currently working on a web application using Materializecss and AngularJS for the front-end. However, I've encountered an issue with the dropdown menu component of Materialize not functioning as expected. Here's an example of the dropdo ...

javascripthtmlcssangularjsmaterialize

The issue with grunt-contrib-compass not functioning properly within npm

I recently installed npm and grunt, followed by installing grunt-contrib-compass. However, when I try to run grunt, I encounter the following error: Running “compass:dist” (compass) task Warning: not found: compass Use –force to continue. Aborted du ...

csssassnpmgruntjscompass

Addressing three visual problems with an html form input, dropdown menu, and clickable button

Currently, the output of my code looks like this: https://i.stack.imgur.com/pl5CJ.jpg The first box (squared) represents an <input>, while the second box (rectangled) is a <select>. There are several issues that I am facing: The text entered ...

javascripthtmlcssvue.js

Positioning the navigation buttons along the edges

I'm struggling with creating a custom slider and am having trouble placing the navigation buttons on the sides. You can view the current layout on JSfiddle: http://jsfiddle.net/zfxrxzLg/1/ Currently, the navigation buttons are located underneath the ...

jqueryhtmlcss

`Why are my overflow-x and flex-wrap not functioning as expected in React JS?`

Having trouble aligning all the movie posters in a single line? It appears that your overflow-x and flex-wrap properties aren't functioning as expected in your App.css. Here's a snippet of your App.css: body { background: #141414; color: ...

cssreactjsrowoverflow

Guide to positioning elements in CSS to maintain a fixed location

While creating a Back To Top button, I set it to a fixed position using the position:fixed; property and also background-attachment:fixed;, but I'm still facing issues with its position changing when new data is inputted. <html> <head> &l ...

htmlcss

"Adapting Bootstrap dropdown menu to display in the top left corner

While working on a navbar featuring three nav-items with a dropdown-menu class each, I encountered an issue. The first nav-item's dropdown-menu displays correctly, but for the other two, the dropdown-menu seems to shift to the top left. You can view ...

twitter-bootstrapbootstrap-4navbar

Excessive padding observed on the right side of the screen when viewed on mobile devices

I am having an issue with my portfolio site where there is a white space on the right side in the mobile view, but only in Chrome. The desktop and Mozilla mobile views are fine. I have attached a screenshot highlighting the problem. Here is the link: Chrom ...

htmlcssbootstrap-4responsive-design

Uploading files other than images using django-ckeditor

I am currently using django-ckeditor. When uploading image and .swf files using the upload icons, everything works fine. However, if I try to upload any other type of file, I encounter an error stating "cannot identify image file". Additionally, when uplo ...

pythondjangockeditor

What is the best way to implement a slide-down animation on a stateless component in React JS using either ReactCSStransitionGroup or ReactTransition

I am looking to create an animation for a stateless component that starts off with display:none, and then becomes visible when the parent component's state changes. I want it to slide down like a dropdown menu effect. I am new to animations and have b ...

javascriptcssreactjscss-transitionsreact-transition-group

What is the best way to make a black background div that perfectly aligns with another div?

When hovering over an image, I want it to fade out to opacity: 0.4, but instead of fading to white, I would like it to fade to black. To achieve this, I decided to change the background color of the body to black so that the fadeout will be towards black. ...

htmlcss

Keeping the header fixed on a sticky div (tocbot)

While working on my website, I decided to implement a Table of Contents section using tocbot. However, I encountered an issue where the Title I added above the table doesn't stay fixed when scrolling. https://i.stack.imgur.com/vCm1K.gif Here's ...

javascripthtmlcsssticky

What is the proper way to ensure a flex item takes up 50% of the space when a gap is included in

It appears that I have misunderstood something about flexbox and am struggling to resolve the issue correctly. In my current setup, I have a flexbox container with four columns as its direct children. I want each .flexbox-item to take up 50% of the contai ...

htmlcssflexbox

Styling the topbar with CSS includes adding a vertical separator that neatly wraps the content within the

I recently created a website using HTML and CSS, featuring a topbar. However, I encountered an issue while trying to insert a vertical separator between some of the icons within the topbar. Initially, when I added the separator-div, only the first three ic ...

htmlcssimagecss-floatpseudo-element

Minimize the vertical gap between menu items when they wrap onto a new line

When examining the screenshot of the website, you'll notice a considerable space between the first and second rows of menu items. I'm aiming to minimize this spacing as much as possible. The following CSS pertains to this issue: .gva-navigatio ...

htmlcsswhitespace

Expanding the `div` element to visually occupy the entire vertical space

I'm facing a design challenge with my webpage layout. I have a fixed header and footer, but I need the content section to dynamically adjust its height between the two. The goal is to fill the remaining vertical space with a background-image in the co ...

htmlcss

A guide on displaying query parameters choices in Django REST Framework using Swagger

I've been trying to figure this out for some time now. My main objective is to display query parameter options within SwaggerUI and provide a form input for each query parameter, similar to how it appears when setting a serializer for a POST request. ...

pythondjangorestdjango-rest-framework

Switch the Header Image on a Page in WordPress

I am currently using the Sunrise Theme from s5themes.com and I have a question regarding the header image on individual pages. It seems that all pages are displaying the same header image as the homepage, which is not what I want. Attached below is a scre ...

csswordpresswordpress-theming

Optimal method for utilizing @font-face syntax

Recently, I've been utilizing this specific model @font-face { font-weight: WEIGHT; font-style: STYLE; font-family: 'NAME'; src: url('font.eot'); src: url('https://dl.dropboxusercontent.com/s/dey3lzjdpgszxzt/myriad-webfont.eo ...

htmlcssfontsfont-face

Troubleshooting varying <li> heights in Google Chrome with CSS

Kindly review the image enclosed below ul li{ width:100px; height:200px; float:left; border:10px double #333; -webkit-border-radius: 10px; -moz-border-radius: 10px; } <ul> <li><a href="image.jpg"><img src ...

css