Django

Django web framework with ORM and admin panel

Django ORMAdmin PanelTemplate SystemURL RoutingSecurity Built-in

Official Django Site•Official Getting Started Guide

Installation & Setup

Follow these steps after downloading your template

Navigate to your downloaded project directory

cd your-project-name

Create a virtual environment

python -m venv venv

Activate the virtual environment

source venv/bin/activate # On Windows: venv\Scripts\activate

Install dependencies

pip install -r requirements.txt

Run database migrations

python manage.py migrate

Start the development server

python manage.py runserver

Understanding the Setup

Project Structure

Your Django project uses the standard structure with color variables in static/css/style.css.

Static Files Configuration

Make sure STATIC_URL and STATICFILES_DIRS are configured in settings.py.

Color Variables

All colors are defined in your CSS file:

:root {
  --primary: /* Your primary color */;
  --secondary: /* Your secondary color */;
  --accent: /* Your accent color */;
  --text-on-primary: /* Text color for primary bg */;
  --text-on-secondary: /* Text color for secondary bg */;
  --text-on-accent: /* Text color for accent bg */;
}

Using Your Colors

Loading Static Files

In your templates, load static files:

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>

Using Colors in Templates

Apply colors in your Django templates:

<div style="background-color: var(--primary); color: var(--text-on-primary);">
  <h1>Primary Section</h1>
</div>

<button class="btn-accent">
  Call to Action
</button>

CSS Classes

Create reusable CSS classes:

.btn-accent {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

.card {
  background-color: var(--secondary);
  color: var(--text-on-secondary);
}

💡 Pro Tips

Run 'python manage.py collectstatic' before deployment
Use Django's template inheritance for consistent styling
Consider using django-compressor for CSS optimization
Keep your static files organized by app

Ready to Start Building?

Generate your color scheme and download the Django template

Generate Colors

:root { --primary: /* Your primary color */; --secondary: /* Your secondary color */; --accent: /* Your accent color */; --text-on-primary: /* Text color for primary bg */; --text-on-secondary: /* Text color for secondary bg */; --text-on-accent: /* Text color for accent bg */; }