# BIM Viewer Customization Guide

This guide explains how to easily customize colors, titles, and layout of the BIM viewer.

## Quick Customization

### 1. Changing Colors

Open the `viewer.css` file and modify the CSS variables at the beginning:

```css
:root {
    /* Primary colors */
    --sbv-primary-color: #55452A;      /* Main color (buttons, headers) */
    --sbv-secondary-color: #55452A;    /* Hover color */
    --sbv-accent-color: #55452A;       /* Accent color (gradient) */
    
    /* Background colors */
    --sbv-bg-light: #CFC5B4;           /* Light background */
    --sbv-bg-white: #99A170;           /* White/panel background */
    
    /* Text colors */
    --sbv-text-dark: #000000;          /* Dark text */
    --sbv-text-light: #000000;         /* Light text */
    --sbv-text-white: #ffffff;         /* White text */
    
    /* Borders */
    --sbv-border-color: #CFC5B4;
    --sbv-border-radius: 4px;
}
```

#### Color Palette Examples

**Professional Blue Theme**
```css
--sbv-primary-color: #0073aa;
--sbv-secondary-color: #005177;
--sbv-accent-color: #00a0d2;
```

**Nature Green Theme**
```css
--sbv-primary-color: #2ecc71;
--sbv-secondary-color: #27ae60;
--sbv-accent-color: #3498db;
```

**Energetic Orange Theme**
```css
--sbv-primary-color: #e67e22;
--sbv-secondary-color: #d35400;
--sbv-accent-color: #f39c12;
```

**Elegant Purple Theme**
```css
--sbv-primary-color: #9b59b6;
--sbv-secondary-color: #8e44ad;
--sbv-accent-color: #c39bd3;
```

**Architecture Red Theme**
```css
--sbv-primary-color: #c0392b;
--sbv-secondary-color: #a93226;
--sbv- accent-color: #e74c3c;
```

### 2. Changing Titles

#### In HTML/PHP Files

**Local test** (`test/index.html`):
```html
<h3>Object Properties</h3>
```

**WordPress** (`simple-bim-viewer.php`, line ~88):
```php
<h3>Object Properties</h3>
```

Change to:
```html
<h3>Element Properties</h3>
<!-- or -->
<h3>Construction Details</h3>
<!-- or -->
<h3>Element Information</h3>
```

#### Reset Button

**Local test** (`test/index.html`):
```html
<button id="sbv-reset-view">🔄 Reset View</button>
```

Change to:
```html
<button id="sbv-reset-view">Home View</button>
<!-- or -->
<button id="sbv-reset-view">Reset</button>
```

### 3. Modify "Select an object" Text

**In `viewer.js` file**, line ~73:

```javascript
document.getElementById('sbv-metadata-content').innerHTML = "Select an object to view its properties...";
```

Change to:
```javascript
document.getElementById('sbv-metadata-content').innerHTML = "Click on a model element to view its properties...";
```

### 4. Customize Property Header

**In `viewer.js` file**, `displayMetadata` function, line ~96:

```javascript
let content = `<div class="sbv-meta-header"><strong>${metaObject.name || objectId}</strong><br><small>${metaObject.type}</small></div>`;
```

Change to:
```javascript
let content = `<div class="sbv-meta-header">
    <strong>${metaObject.name || objectId}</strong>
    <br>
    <small>Type: ${metaObject.type}</small>
</div>`;
```

## Advanced Customizations

### Change Layout

#### Container Maximum Width

**In CSS** (`viewer.css`):
```css
/* Container principale - layout verticale */
.sbv-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
```

**In HTML** (`index.html` or `simple-bim-viewer.php`):
```html
<div style="max-width: 1200px; margin: 0 auto;">
```

#### Viewer Height

**Local test** (`index.html`):
```html
<div class="sbv-viewer-wrapper" style="height: 600px;">
```

**WordPress** (use shortcode parameter):
```
[bim_viewer url="..." height="800px"]
```

### Modify Table Style

**In CSS** (`viewer.css`), find the "Property Table" section:

```css
.sbv-meta-table th {
    background-color: var(--sbv-bg-light);  /* Table header background */
    color: var(--sbv-text-dark);            /* Header text color */
    font-weight: 600;                       /* Bold */
    font-size: 13px;                        /* Font size */
}

.sbv-meta-table td {
    color: var(--sbv-text-dark);            /* Cell text color */
    font-size: 14px;                        /* Font size */
}
```

### Add Rounded Borders

```css
:root {
    --sbv-border-radius: 8px;  /* Increase for more rounded borders */
}
```

### Modify Shadows

```css
:root {
    --sbv-shadow: 0 4px 8px rgba(0,0,0,0.2);        /* Stronger shadow */
    --sbv-shadow-hover: 0 8px 16px rgba(0,0,0,0.3); /* Stronger hover shadow */
}
```

## 🌐 WordPress Customization

### Method 1: Custom CSS (Recommended)

1. Go to **Appearance → Customize → Additional CSS**
2. Add your custom rules:

```css
/* Change colors */
:root {
    --sbv-primary-color: #e67e22 !important;
    --sbv-secondary-color: #d35400 !important;
}

/* Change button style */
#sbv-toolbar button {
    border-radius: 20px !important;
    font-weight: bold !important;
}

/* Change property header style */
.sbv-meta-header {
    background: linear-gradient(135deg, #e67e22, #f39c12) !important;
1. Create a child theme
2. Copy `viewer.css` to the child theme
3. Modify as needed
4. Changes will survive plugin updates

## Responsive Design

The viewer is already responsive. To customize mobile behavior:

```css
@media (max-width: 768px) {
    .sbv-viewer-wrapper {
        height: 400px !important;  /* Reduced height on mobile */
    }
    
    #sbv-toolbar button {
        font-size: 11px;           /* Smaller buttons */
        padding: 6px 10px;
    }
}
```

## Complete Theme Examples

### Dark Theme

```css
:root {
    --sbv-primary-color: #3498db;
    --sbv-secondary-color: #2980b9;
    --sbv-accent-color: #5dade2;
    
    --sbv-bg-light: #2c3e50;
    --sbv-bg-white: #34495e;
    
    --sbv-text-dark: #ecf0f1;
    --sbv-text-light: #bdc3c7;
    --sbv-text-white: #ffffff;
    
    --sbv-border-color: #34495e;
}
```

### Minimalist Theme

```css
:root {
    --sbv-primary-color: #2c3e50;
    --sbv-secondary-color: #34495e;
    --sbv-accent-color: #7f8c8d;
    
    --sbv-border-radius: 0px;
    --sbv-shadow: none;
    --sbv-shadow-hover: 0 2px 4px rgba(0,0,0,0.1);
}

#sbv-toolbar button {
    border: 2px solid var(--sbv-primary-color);
    background-color: transparent;
    color: var(--sbv-primary-color);
}
```

## Troubleshooting

### Colors don't change

- Make sure to use `!important` if using custom CSS in WordPress
- Clear browser cache (Ctrl+F5)
- Verify CSS variables are supported by your browser

### Layout is broken

- Check for CSS syntax errors
- Verify CSS selectors are correct
- Use browser developer tools (F12) to debug

### Changes not showing in WordPress

- Clear WordPress cache
- Clear browser cache
- Temporarily disable caching/minification plugins

## Support

For additional customizations, see:
- [CSS Variables (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
- [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
