A Simple Example of Django and CSS

A simple example of Django and CSS

If you follow django's guidelines, you can simplify your life greatly.

In your sample code, inside your application directory, create a folder called static. Inside this folder, place your css files.

Example:

$ django-admin.py startproject myproject
$ cd myproject
myproject$ python manage.py startapp myapp
myproject$ mkdir myapp/static
myproject$ cd myapp/static
myproject/myapp/static$ nano style.css

In your templates:

<link rel="stylesheet" href="{{ STATIC_URL }}style.css" />

Make sure you add myapp to the INSTALLED_APPS list in settings.py. Now when you use the built-in development server, your style sheet will be rendered correctly.

Django searches for a static directory inside installed applications by default, and with current versions of django, static files are enabled by default.

---

The Django example has the path my_app/static/my_app/myimage.jpg which
is a little confusing if your app and project have the same name.

This is recommended because when you run collectstatic to gather all your static files, files with the same name will be overwritten. If you have a file called myimage.jpg in another application, it will be overwritten. Giving the application name inside the static directory will prevent this, because the exact directory structure will be replicated inside your STATIC_ROOT directory.

A simple example to illustrate the point. If you have a django project with two apps, like this:

.
├── assets
├── manage.py
├── myapp
│   ├── __init__.py
│   ├── models.py
│   ├── static
│   │   └── myapp
│   │       └── test.txt
│   ├── tests.py
│   └── views.py
├── myproj
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── urls.py
│   └── wsgi.py
└── otherapp
    ├── __init__.py
    ├── models.py
    ├── static
    │   └── otherapp
    │       └── test.txt
    ├── tests.py
    └── views.py

assets is your STATIC_ROOT. Now when you run collectstatic:

.
├── assets
│   ├── myapp
│   │   └── test.txt
│   └── otherapp
│       └── test.txt
├── manage.py
├── myapp
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── models.py
│   ├── static
│   │   └── myapp
│   │       └── test.txt
│   ├── tests.py
│   └── views.py
├── myproj
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── urls.py
│   └── wsgi.py
└── otherapp
    ├── __init__.py
    ├── __init__.pyc
    ├── models.py
    ├── static
    │   └── otherapp
    │       └── test.txt
    ├── tests.py
    └── views.py

You see it is creating the directories as well. In your templates you would now refer to each file with its "namespace" of the app: {{ STATIC_URL }}/myapp/test.txt

How to style model form in django with CSS?

You are right on the point that widget provides you with an option to style your form but it will only style the field for you not the label and any class you mention in the widget should be available in the stlyesheet . you can check the link below it provides a simple example on how you can style your form.

Simple form styling

and if you want to fully style the form with labels and how it should be structured you will have to loop over the form.
below I have mentioned a simple code that illustrates how you can structure your form using django forms

<style>
.h-100{ 
   min-height:100vh;
 }
</style>

 <div class="w-100 d-flex justiy-content-center align-items-center h-100" >
 <form method="POST" class="row" enctype="multipart/form-data">
      {% csrf_token %}
      {% for field in form %}
      <div class="col-6 text-start"> {{field.label}} </div>
      <div class="col-6"> {{field}} </div>
      {% endfor %}
      <button type="submit">submit</button>
 </form>

i hope this helps you in your problem :)

How do I use CSS in Django?

If you're using the development server follow the django project's how-to guide for managing static files to setup your URL's, then reference you media files in the template -- say, an image inside an image folder from /site_media/images/foo.gif.

customizing basic existing Django apps that already have nice looking CSS/HTML templates?

In my opinion this is really in no way django-specific. I think you would be better suited if you search for something like "web templates download" in your favourite search engine. Find a layout that you like, pay for it (if you can't find anything gratis) and use it.

Oh, and no, there is regrettably no such archive (yet).

The way to use background-image in css files with Django

Use this:

    #third{
     background: url("/static/img/sample.jpeg") 50% 0 no-repeat fixed;
     color: white;
     height: 650px;
     padding: 100px 0 0 0;   
     }

Most probably This will work.Use "/static/" before your image URL and then try them. Thanks

---

Related Topics