It's Your Doc

Customization

Make It's Your Doc truly yours by customizing every aspect of your documentation site. All customization is done through the .env file - no code changes required!

Branding Configuration

Company Name

Set your company or product name to appear in the header:

DOCS_BRAND_NAME="Your Company Documentation"

This appears in:

  • Header navigation bar
  • Browser tab title
  • Meta tags for SEO

###Logo Configuration

Add your custom logo to the documentation header:

DOCS_LOGO_PATH="/images/logo.svg"
DOCS_LOGO_HEIGHT="40"

Setup Steps:

  1. Place your logo file in public/images/
  2. Set DOCS_LOGO_PATH to the file path (relative to public/)
  3. Set DOCS_LOGO_HEIGHT to control the size (in pixels)

Logo Specifications:

  • Format: SVG (recommended), PNG, or WebP
  • Height: 30-60 pixels recommended
  • Background: Transparent preferred
  • Aspect Ratio: Maintained automatically

Examples:

# SVG logo
DOCS_LOGO_PATH="/images/company-logo.svg"
DOCS_LOGO_HEIGHT="45"

# PNG logo
DOCS_LOGO_PATH="/images/brand.png"
DOCS_LOGO_HEIGHT="35"

# No logo (text only)
DOCS_LOGO_PATH=""
DOCS_BRAND_NAME="My Docs"

Support Contact Information

Display support contact information in the header for easy access:

DOCS_SUPPORT_SHOW_EMAIL=true
DOCS_SUPPORT_EMAIL="[email protected]"
DOCS_SUPPORT_SHOW_PHONE=true
DOCS_SUPPORT_PHONE="+1 (555) 123-4567"

Email Configuration

DOCS_SUPPORT_SHOW_EMAIL=true          # Show/hide email
DOCS_SUPPORT_EMAIL="[email protected]" # Your support email
  • Displays with an envelope icon
  • Clicking opens the user's default email client
  • Hidden on mobile devices to save space

Phone Configuration

DOCS_SUPPORT_SHOW_PHONE=true       # Show/hide phone
DOCS_SUPPORT_PHONE="+1 (800) 555-0123"  # Your support number
  • Displays with a phone icon
  • Clicking initiates a call on mobile devices
  • Hidden on mobile devices to save space

Examples

Show Both:

DOCS_SUPPORT_SHOW_EMAIL=true
DOCS_SUPPORT_EMAIL="[email protected]"
DOCS_SUPPORT_SHOW_PHONE=true
DOCS_SUPPORT_PHONE="+1 (555) 123-4567"

Email Only:

DOCS_SUPPORT_SHOW_EMAIL=true
DOCS_SUPPORT_EMAIL="[email protected]"
DOCS_SUPPORT_SHOW_PHONE=false

Hide All:

DOCS_SUPPORT_SHOW_EMAIL=false
DOCS_SUPPORT_SHOW_PHONE=false

Color Customization

Customize the entire color scheme to match your brand:

Primary Colors

DOCS_PRIMARY_COLOR="#0366d6"      # Links and primary actions
DOCS_SECONDARY_COLOR="#6a737d"    # Secondary text and elements
DOCS_ACCENT_COLOR="#28a745"       # Success states and tips

Semantic Colors

DOCS_WARNING_COLOR="#ffd33d"      # Warning callouts
DOCS_ERROR_COLOR="#d73a49"        # Error messages
DOCS_INFO_COLOR="#54a3ff"         # Information callouts

Surface Colors

DOCS_BACKGROUND_COLOR="#ffffff"   # Page background
DOCS_SURFACE_COLOR="#f6f8fa"      # Header, code blocks
DOCS_BORDER_COLOR="#e1e4e8"       # Borders and dividers

Text Colors

DOCS_TEXT_COLOR="#24292e"         # Primary text
DOCS_TEXT_SECONDARY_COLOR="#6a737d"  # Secondary text

Color Scheme Examples

Light Theme (Default):

DOCS_PRIMARY_COLOR="#0366d6"
DOCS_BACKGROUND_COLOR="#ffffff"
DOCS_SURFACE_COLOR="#f6f8fa"
DOCS_TEXT_COLOR="#24292e"

Dark Theme:

DOCS_PRIMARY_COLOR="#58a6ff"
DOCS_BACKGROUND_COLOR="#0d1117"
DOCS_SURFACE_COLOR="#161b22"
DOCS_TEXT_COLOR="#c9d1d9"
DOCS_TEXT_SECONDARY_COLOR="#8b949e"
DOCS_BORDER_COLOR="#30363d"

Brand Colors:

DOCS_PRIMARY_COLOR="#7c3aed"      # Purple brand
DOCS_ACCENT_COLOR="#10b981"       # Green accents
DOCS_BACKGROUND_COLOR="#ffffff"

Complete Configuration Example

Here's a complete .env configuration example:

# Application
APP_NAME="Acme Corp Documentation"
APP_URL=https://docs.acmecorp.com

# Documentation Branding
DOCS_BRAND_NAME="Acme Corp Docs"
DOCS_LOGO_PATH="/images/acme-logo.svg"
DOCS_LOGO_HEIGHT="42"

# Support Contact
DOCS_SUPPORT_SHOW_EMAIL=true
DOCS_SUPPORT_EMAIL="[email protected]"
DOCS_SUPPORT_SHOW_PHONE=true
DOCS_SUPPORT_PHONE="+1 (800) ACME-HELP"

# Theme Colors - Brand Purple
DOCS_PRIMARY_COLOR="#7c3aed"
DOCS_SECONDARY_COLOR="#64748b"
DOCS_ACCENT_COLOR="#10b981"
DOCS_WARNING_COLOR="#f59e0b"
DOCS_ERROR_COLOR="#ef4444"
DOCS_INFO_COLOR="#3b82f6"
DOCS_BACKGROUND_COLOR="#ffffff"
DOCS_SURFACE_COLOR="#f8fafc"
DOCS_BORDER_COLOR="#e2e8f0"
DOCS_TEXT_COLOR="#0f172a"
DOCS_TEXT_SECONDARY_COLOR="#64748b"

Testing Your Customizations

After updating your .env file:

  1. Clear the configuration cache:
php artisan config:clear

  1. Refresh your browser to see the changes

  2. Test all components:

    • Header branding
    • Logo display
    • Contact information
    • Color theme throughout pages
    • Shortcodes (note, warning, info, tip)
    • Code blocks
    • Tables

Customization Best Practices

Logo Guidelines

  1. Use SVG when possible for crisp display
  2. Keep it simple - complex logos don't scale well at small sizes
  3. Test at different sizes - try heights from 30-60px
  4. Ensure good contrast with the header background

Color Guidelines

  1. Start with primary color - choose your main brand color
  2. Maintain consistency - use similar saturation levels
  3. Test accessibility - ensure text is readable
  4. Use semantic colors appropriately:
    • Red/Orange for warnings and errors
    • Blue for information
    • Green for success and tips

Contact Information

  1. Keep it current - outdated contact info frustrates users
  2. Use descriptive email addresses - support@ or help@ are clear
  3. Format phone numbers consistently
  4. Test the links - make sure mailto: and tel: work correctly

Advanced: Custom CSS

For advanced customization beyond color changes, you can modify the styles in:

resources/views/docs/show.blade.php

Look for the <style> section in the <head>. All CSS is contained in this single file for easy customization.

Need More Help?

  • See BRANDING.md in the project root for additional documentation
  • Check .env.example for all available options
  • Explore other documentation pages to see features in action

What's Next?

Now that your documentation is customized:

  1. Writing Content - Learn Markdown syntax and features
  2. File Structure - Organize your documentation
  3. Reusable Components - Create reusable content blocks
  4. Shortcodes - Add visual emphasis to your pages
×