Customization Guide - DNI Cita Previa Redesign

Overview

This guide shows you how to customize every aspect of the DNI Cita Previa redesign project. Since it’s built with vanilla HTML/CSS/JavaScript, customization is straightforward—just edit the source files.

Customizing Colors

All colors are defined as CSS custom properties in css/style.css. Change them once to update the entire site.

Step-by-Step Color Customization

Open the styles file

Navigate to source/css/style.css and locate the :root section (lines 1-31).

Modify color variables

Update the hex values while keeping the variable names:

:root {
    /* Example: Change primary blue to a custom brand color */
    --primary-blue: #003366;      /* Original */
    --primary-blue: #1e40af;      /* New blue */
    --primary-blue-dark: #002244; /* Original dark */
    --primary-blue-dark: #1e3a8a; /* New dark */
}

Test across all pages

Open each HTML page in a browser to verify the color changes look consistent.

Common Color Customizations

Brand Colors
Text Colors
Backgrounds
Accents

Update primary colors to match your organization:

:root {
    /* Header */
    --header-yellow: #your-header-color;
    
    /* Primary brand color */
    --primary-blue: #your-brand-color;
    --primary-blue-dark: #your-brand-color-dark;
    
    /* Footer */
    --footer-background-blue: #your-footer-color;
}

Adjust text and UI element colors:

:root {
    --text-gray-light: #6a6f7b;  /* Secondary text */
    --text-gray: #374151;        /* Primary text */
    --text-gray-dark: #1f2937;   /* Headings */
}

Change background and surface colors:

:root {
    --background-gray: #f5f5f5;   /* Page background */
    --white: #ffffff;             /* Card backgrounds */
    --bg-blue-light: #eff6ff;     /* Info boxes */
    --bg-blue-lighter: #dbeafe;   /* Highlights */
}

Modify success states and borders:

:root {
    --success-green: #059669;      /* Success actions */
    --success-green-dark: #047857; /* Success hover */
    --border-light: #e5e7eb;       /* Borders */
    --border-blue: #bfdbfe;        /* Blue borders */
}

Color Scheme Examples

Dark Mode Palette

:root {
    --primary-blue: #60a5fa;
    --primary-blue-dark: #3b82f6;
    --background-gray: #111827;
    --white: #1f2937;
    --text-gray-light: #9ca3af;
    --text-gray: #d1d5db;
    --text-gray-dark: #f3f4f6;
    --border-light: #374151;
    --bg-blue-light: #1e3a8a;
}

For a full dark mode, you’ll also need to update text colors on light backgrounds (like buttons) to ensure sufficient contrast.

Green Palette

:root {
    --header-yellow: #86efac;
    --primary-blue: #059669;
    --primary-blue-dark: #047857;
    --footer-background-blue: #064e3b;
    --success-green: #10b981;
    --success-green-dark: #059669;
    --bg-blue-light: #d1fae5;
    --bg-blue-lighter: #a7f3d0;
    --border-blue: #6ee7b7;
}

Purple Palette

:root {
    --header-yellow: #e9d5ff;
    --primary-blue: #7c3aed;
    --primary-blue-dark: #6d28d9;
    --footer-background-blue: #4c1d95;
    --success-green: #8b5cf6;
    --success-green-dark: #7c3aed;
    --bg-blue-light: #f5f3ff;
    --bg-blue-lighter: #ede9fe;
    --border-blue: #c4b5fd;
}

Color Contrast: Ensure sufficient contrast for accessibility (WCAG AA requires 4.5:1 for normal text, 3:1 for large text). Use tools like WebAIM’s Contrast Checker to verify.

Customizing Typography

The project uses system fonts by default. Here’s how to change fonts:

Adding Custom Fonts

Choose a font source

Options:

Google Fonts (easiest, CDN-hosted)
Self-hosted fonts (better performance and privacy)
System font stack (fastest, no download)

Add font import (Google Fonts example)

In each HTML file’s <head>, add before the CSS links:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Update CSS font-family

In css/style.css, update the body font:

body {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}

Also update form elements in css/seleccionar-cita.css:57:

.campo-formulario input,
.campo-formulario select,
.campo-formulario textarea {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}

And buttons in css/seleccionar-cita.css:126:

.botones-formulario a,
.botones-formulario button {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}

Self-Hosting Fonts

Download Fonts
Create @font-face
Update font-family

Download font files (.woff2, .woff) from Google Fonts or Font Squirrel
Create source/fonts/ directory
Place font files inside

In css/style.css, add before the :root section:

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.woff2') format('woff2'),
         url('../fonts/Inter-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.woff2') format('woff2'),
         url('../fonts/Inter-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

Follow Step 3 from “Adding Custom Fonts” above to update all font-family declarations.

Typography Scale

Adjust font sizes by targeting specific elements:

/* Headings */
h1 { font-size: 2rem; }      /* Default varies */
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

/* Body text */
body { font-size: 16px; }

/* Form labels */
.campo-formulario label { font-size: 14px; }

/* Buttons */
.botones-formulario button { font-size: 16px; }

The project doesn’t define global heading sizes, so they use browser defaults. Add explicit sizes to css/style.css for consistency.

Customizing Layout

Container Width

The main content container has a max-width of 900px. To adjust:

/* In css/style.css:66-71 */
main {
    display: flex;
    flex-direction: column;
    margin: 0px auto;
    max-width: 900px;  /* Change this value */
}

Common widths:

1200px - Wide layout
1024px - Standard desktop
900px - Current (narrow, focused)
768px - Tablet-friendly

Padding & Spacing

Adjust spacing throughout the site: Global padding (tablets and smaller):

/* In css/style.css:119-123 */
@media (width <=1024px) {
    main {
        padding-inline: 1rem;  /* Adjust this */
    }
}

Header padding:

/* Desktop: css/headerfooter.css:7 */
header {
    padding: 25px 100px;  /* Vertical | Horizontal */
}

/* Tablet: css/headerfooter.css:50 */
@media (width <=1024px) {
    header {
        padding: 25px 45px;
    }
}

Card padding:

/* css/index.css:18 */
#opciones-cita > div {
    padding: 50px;  /* Adjust internal card spacing */
}

Border Radius

Control roundness of corners:

/* Cards and containers */
.opcion-cita { border-radius: 10px; }  /* css/index.css:19 */
.info { border-radius: 10px; }         /* css/style.css:102 */

/* Form elements */
.campo-formulario input { border-radius: 8px; }  /* css/seleccionar-cita.css:53 */

/* Buttons */
.botones-formulario button { border-radius: 8px; }  /* css/seleccionar-cita.css:119 */

For a more squared design, reduce all values to 4px or 0px.

Responsive Breakpoints

Modify when layouts change:

/* Current breakpoints */
@media (width <=480px) { /* Mobile */ }
@media (480px < width <=1024px) { /* Tablet */ }
@media (width <=1024px) { /* Tablet and mobile */ }

/* Custom breakpoints */
@media (width <=640px) { /* Small mobile */ }
@media (width <=768px) { /* Mobile */ }
@media (width <=1280px) { /* Tablet */ }

If you change breakpoints, update them consistently across all CSS files:

css/style.css
css/headerfooter.css
css/index.css
css/iniciar-solicitud.css
css/seleccionar-cita.css
css/resumen.css

Customizing Images

Replacing Logos

Prepare new logo files

Create versions in modern formats:

AVIF (best compression, modern browsers)
WebP (good compression, wide support)
PNG/JPEG (fallback for older browsers)

Maintain the same aspect ratios:

Ministry logo: 445:103 (wide horizontal)
Police logo: 1:1 (square)

Replace files in images folder

Replace these files in source/images/:

logo-ministerio.avif
logo-ministerio.webp
logo-ministerio.png
logo-polia-nacional.avif
logo-polia-nacional.webp
logo-polia-nacional.jpeg
logo.png (favicon)

Update HTML if needed

If you change the file format or aspect ratio, update the <picture> elements:

<!-- Header logo: all HTML files -->
<picture>
    <source srcset="./images/logo-ministerio.avif" type="image/avif">
    <source srcset="./images/logo-ministerio.webp" type="image/webp">
    <img src="./images/logo-ministerio.png" alt="Your organization name">
</picture>

Adjust CSS sizing

Update logo dimensions in css/headerfooter.css:16-18:

header img {
    height: 55px;
    aspect-ratio: 445/103;  /* Change to match your logo */
}

Optimizing Images

Tools for creating optimized image formats:

Squoosh

Browser-based image compression tool from Google

ImageMagick

Command-line tool for batch conversion:

convert logo.png -quality 90 logo.webp

Adding a Favicon

Replace source/images/logo.png with your favicon (recommended size: 32x32 or 64x64 pixels). For better browser support, add additional favicon formats:

<!-- Add to <head> of all HTML files -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png">

Customizing Content

Changing Text Content

All content is in the HTML files. To update:

Page Titles
Navigation Links
Footer Content
Info Boxes

Update <title> and <h1> elements:

<!-- In <head> -->
<title>DNI - Inicio</title>

<!-- In <main> -->
<div id="titulo">
    <h1>Cita Previa para DNI y Pasaporte</h1>
    <p>Your new description here...</p>
</div>

Update header navigation in all HTML files:

<nav id="nav-normal">
    <ul>
        <li><a href="./index.html">Inicio</a></li>
        <li><a href="#">Your Link</a></li>
        <!-- Add or remove items -->
    </ul>
</nav>

Update footer sections in all HTML files:

<div class="enlaces-footer">
    <h3>Enlaces de interés</h3>
    <a href="#">Your Link</a>
    <!-- Add more links -->
</div>

Update information panels on each page:

<div class="info">
    <h3>
        <svg><!-- Icon --></svg>
        Información Importante
    </h3>
    <div>
        <p>Your important information here...</p>
    </div>
</div>

Translating to Another Language

Update lang attribute

In all HTML files, change:

<html lang="es">  <!-- Spanish -->

to:

<html lang="en">  <!-- English -->
<html lang="fr">  <!-- French -->
<html lang="de">  <!-- German -->

Translate all text content

Translate:

Page titles
Headings
Paragraphs
Button text
Form labels
Placeholder text
Alt text for images

Update meta descriptions

<meta name="description" content="Your translated description">

Test text overflow

Some languages (like German) use longer words. Test all pages to ensure text doesn’t break layouts.

Form Customization

Add/remove form fields in seleccionar-cita.html:

<!-- Add a new field -->
<div class="campo-formulario">
    <label for="new-field">Field Label:</label>
    <input type="text" id="new-field" name="new-field" required>
</div>

Modify select options:

<select id="provincia" name="provincia" required>
    <option value="">-- Seleccione una provincia --</option>
    <option value="your-value">Your Option</option>
    <!-- Add more options -->
</select>

Change form action:

<!-- Current: navigates to resumen.html -->
<form id="formulario-cita" action="./resumen.html" method="get">

<!-- Change to submit to a backend -->
<form id="formulario-cita" action="/api/submit" method="post">

The current form uses method="get" which appends data to the URL. For production use with actual data submission, change to method="post" and implement backend processing.

Customizing Icons

All icons are inline SVG elements. To replace them:

Find icon sources

The project uses icons from Tabler Icons. You can:

Browse Tabler Icons for replacements
Use other icon sets like Heroicons or Lucide
Create custom SVG icons

Copy SVG code

Get the SVG code for your chosen icon (ensure it uses stroke="currentColor" for color inheritance).

Replace in HTML

Find the icon you want to replace and swap the SVG code:

<!-- Old icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" ...>
    <path d="..." />
</svg>

<!-- New icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" ...>
    <path d="your-new-icon-path" />
</svg>

Icon Size Consistency:

Header/section icons: 24x24
Large status icons: 48x48
Button icons: 20x20

Maintain these sizes for visual consistency.

Advanced Customizations

Adding Animation

Add custom animations using CSS:

/* Define animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Apply to elements */
.opcion-cita {
    animation: fadeIn 0.5s ease-out;
}

/* Stagger animations */
.opcion-cita:nth-child(1) { animation-delay: 0.1s; }
.opcion-cita:nth-child(2) { animation-delay: 0.2s; }

Adding JavaScript Functionality

Extend js/index.js or create new files: Form validation example:

// Add to js/index.js or create js/form-validation.js
const form = document.getElementById('formulario-cita');

if (form) {
    form.addEventListener('submit', function(e) {
        // Custom validation logic
        const dni = document.getElementById('numero-dni').value;
        
        if (!validateDNI(dni)) {
            e.preventDefault();
            alert('DNI format is invalid');
        }
    });
}

function validateDNI(dni) {
    const dniRegex = /^[0-9]{8}[A-Za-z]$/;
    return dniRegex.test(dni);
}

Then add to seleccionar-cita.html:

<script src="./js/index.js"></script>
<script src="./js/form-validation.js"></script>

Adding Analytics

Insert tracking code before closing </head> tag:

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Creating a Print Stylesheet

Add print-specific styles:

/* Add to css/style.css */
@media print {
    /* Hide navigation and footer when printing */
    header nav,
    footer,
    .botones-formulario,
    .botones-accion {
        display: none;
    }
    
    /* Optimize for print */
    body {
        background: white;
    }
    
    main {
        max-width: 100%;
    }
    
    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

Testing Your Customizations

Test in multiple browsers

Verify changes in:

Chrome/Edge (Chromium)
Firefox
Safari (if on macOS)

Test responsive layouts

Use browser DevTools to test:

Mobile (320px, 375px, 414px)
Tablet (768px, 1024px)
Desktop (1280px, 1920px)

Validate HTML/CSS

Check accessibility

WAVE Tool
Lighthouse in Chrome DevTools
Test with screen readers

Deployment After Customization

After making changes:

Test locally

Open all HTML files in a browser to verify changes.

Deploy to server

Upload the entire source/ directory to your web server or hosting platform.

Clear cache

If styles don’t update, clear browser cache or add cache-busting:

<link rel="stylesheet" href="./css/style.css?v=1.1">

Common Customization Recipes

Recipe: Darker Header

/* css/style.css */
:root {
    --header-yellow: #1f2937;
}

/* css/headerfooter.css - Add after header rules */
header,
header a {
    color: #ffffff;
}

#menu-toggle > img {
    filter: invert(1);  /* Make menu icon white */
}

Recipe: Remove Info Boxes

/* css/style.css - Add at end */
.info {
    display: none;
}

Or delete the .info HTML elements from each page.

Recipe: Single-Column Cards

/* css/index.css */
#opciones-cita {
    flex-direction: column;
    align-items: center;
}

#opciones-cita > div {
    width: 100%;
    max-width: 500px;
}

Recipe: Sticky Header

/* css/headerfooter.css - Add to header rule */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Need Help?

If you run into issues while customizing:

Project Structure

Review the file organization and component structure

Styling Guide

Understand the CSS architecture and methodology

Features Overview

See how the user journey flows through the pages

Getting Started

Revisit the setup and basic usage instructions

Pro Tip: Make incremental changes and test frequently. It’s easier to identify what broke when you change one thing at a time.

Overview

Design System

Pages

Development

Deployment

​Overview

​Customizing Colors

​Step-by-Step Color Customization

​Common Color Customizations

​Color Scheme Examples

​Customizing Typography

​Adding Custom Fonts

​Self-Hosting Fonts

​Typography Scale

​Customizing Layout

​Container Width

​Padding & Spacing

​Border Radius

​Responsive Breakpoints

​Customizing Images

​Replacing Logos

​Optimizing Images

Squoosh

ImageMagick

​Adding a Favicon

​Customizing Content

​Changing Text Content

​Translating to Another Language

​Form Customization

​Customizing Icons

​Advanced Customizations

​Adding Animation

​Adding JavaScript Functionality

​Adding Analytics

​Creating a Print Stylesheet

​Testing Your Customizations

​Deployment After Customization

​Common Customization Recipes

​Need Help?

Project Structure

Styling Guide

Features Overview

Getting Started

Build docs developers (and LLMs) love

Overview

Customizing Colors

Step-by-Step Color Customization

Common Color Customizations

Color Scheme Examples

Customizing Typography

Adding Custom Fonts

Self-Hosting Fonts

Typography Scale

Customizing Layout

Container Width

Padding & Spacing

Border Radius

Responsive Breakpoints

Customizing Images

Replacing Logos

Optimizing Images

Adding a Favicon

Customizing Content

Changing Text Content

Translating to Another Language

Form Customization

Customizing Icons

Advanced Customizations

Adding Animation

Adding JavaScript Functionality

Adding Analytics

Creating a Print Stylesheet

Testing Your Customizations

Deployment After Customization

Common Customization Recipes

Need Help?