Scenario B: Public Site with User Login¶

You have a public site where users sign up, log in, and use your app — all styled with your own theme. Staff also needs access to SmallStack's admin tools (Dashboard, Explorer, Backups, etc.).

What You're Building¶

Public pages:     Your theme (homepage, pricing, etc.)
User pages:       Your theme (dashboard, settings, etc.)
Login/Signup:     Your theme
After login:      Your app's start page (e.g., /dashboard/)
Admin tools:      SmallStack theme (via /smallstack/ link)

Step 1: Create Your Base Template¶

Same as Scenario A — create templates/mytheme/base.html with your CSS framework and the three required SmallStack pieces (blocking theme script, window.SMALLSTACK, theme.js).

See Adding Your Own Theme for the full template.

Step 2: Set Login Redirect to Your App¶

Users should land on your app after login, not SmallStack's Dashboard. In config/settings/base.py:

LOGIN_REDIRECT_URL = "/dashboard/"    # Your app's start page
LOGOUT_REDIRECT_URL = "/"             # Your homepage

Step 3: Create Your Login Page (Optional)¶

By default, SmallStack's login page lives at /smallstack/accounts/login/ and uses the SmallStack theme. If you want the login page to match your theme, override the template.

Create templates/registration/login.html:

{% extends "mytheme/base.html" %}

{% block title %}Sign In{% endblock %}

{% block content %}
<div class="login-container">
    <h2>Sign In</h2>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Sign In</button>
    </form>
    {% if SMALLSTACK_SIGNUP_ENABLED %}
    <p>Don't have an account? <a href="{% url 'signup' %}">Sign up</a></p>
    {% endif %}
</div>
{% endblock %}

The login URL doesn't need to change — Django will find your template override automatically.

Step 4: Build Your User-Facing Pages¶

All your app pages extend your base template and live in apps/website/:

{% extends "mytheme/base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<!-- Your app content, your CSS, your way -->
{% endblock %}

Protected pages use LoginRequiredMixin or @login_required:

from django.contrib.auth.mixins import LoginRequiredMixin
from django.views.generic import TemplateView

class UserDashboardView(LoginRequiredMixin, TemplateView):
    template_name = "website/dashboard.html"

Step 5: Expose SmallStack Admin Tools¶

Staff needs a way to reach SmallStack's admin tools. Two options:

Option A: Admin Link in Your Navigation¶

Add a link to /smallstack/ in your navbar (visible to staff only):

{% if user.is_staff %}
<a href="/smallstack/">Admin Tools</a>
{% endif %}

When staff clicks it, they'll transition to the SmallStack theme and see the Dashboard with links to Explorer, Backups, Activity, Users, etc.

Option B: Admin Dropdown¶

For a richer experience, link directly to specific tools:

{% if user.is_staff %}
<div class="dropdown">
    <button>Admin</button>
    <ul>
        <li><a href="/smallstack/">Dashboard</a></li>
        <li><a href="/smallstack/explorer/">Explorer</a></li>
        <li><a href="/smallstack/activity/">Activity</a></li>
        <li><a href="/smallstack/backups/">Backups</a></li>
    </ul>
</div>
{% endif %}

Step 6: Configure Navigation¶

SmallStack's sidebar and topbar only appear on SmallStack-themed pages. Your pages use your own navigation. Users move between:

Your pages (/dashboard/, /settings/)  →  your navbar
SmallStack (/smallstack/*)            →  SmallStack sidebar + topbar

The transition is seamless — same session, same dark mode preference, same user.

That's It¶

• Public visitors see your theme
• Users log in and land on your app's start page
• Staff clicks "Admin Tools" to reach SmallStack's Dashboard
• Both themes share dark mode, authentication, and session
• No CSS conflicts — each set of pages uses its own base template

Related¶

• Scenario A: Public Site, No User Login — Simpler version without user-facing auth
• Scenario C: Build on SmallStack's Theme — Use SmallStack's theme directly
• Adding Your Own Theme — Full walkthrough with Bootstrap example
• Authentication — Signup control, login URLs, protecting views