Seller Help

HTML and CSS Editor Guide

This guide explains what the listing description editor can and cannot do on obid. The editor sanitizes content for safety, so some tags, attributes, and CSS are removed automatically when you save.

Back to Sell Page Quick Start

Using AI To Generate Listing HTML

If you want Grok, ChatGPT, Copilot, Claude, or another AI tool to generate listing HTML for you, open the detailed rules page first and give those rules to the AI before asking it to write a template.

Open Detailed Rules Page

Quick Start

Write your description in Rich Text mode, or switch to HTML and CSS Editor mode.
Use clean semantic HTML and simple inline CSS.
Save and preview your listing. If anything unsafe is detected, it will be removed.

Tip: Keep structure simple and readable for bidders on mobile.

Mini Guide: Using The HTML Editor

Start in Rich Text if needed, then switch to HTML and CSS Editor for layout control.
Build in blocks: section, heading, paragraph, list, then add styles last.
Use classes for repeated styling and keep inline styles short and focused.
Use Live View often to confirm the sanitized output before saving.
If something disappears, simplify the selector or remove advanced CSS functions first.

Safe Starter Pattern

<section class="product-card" style="border: 1px solid #3f3f46; border-radius: 12px; padding: 14px;">
  <style>
    .product-card:hover { border-color: #0ea5e9; }
    .product-card h3 { margin: 0 0 8px 0; font-size: 20px; }
    .product-card ul li:nth-child(odd) { color: #d1d5db; }
  </style>
  <h3>Item Highlights</h3>
  <ul>
    <li>Fully tested</li>
    <li>Fast dispatch</li>
  </ul>
</section>

Preview renders sanitized output from the mini pattern above.

What It Can Do

Text formatting: headings, paragraphs, bold, italics, underline, lists, and alignment.
Layout blocks: div, section, article, header, footer, figure, figcaption, table elements.
Safe links: https, http, mailto, tel, and relative links.
Images: external https or site-relative image paths, plus alt text.
Custom classes and element IDs (sanitized to safe characters).
Inline styles and style blocks with a curated set of CSS properties and safe pseudo-classes (for example :hover, :focus, :checked, :nth-child, :not, :is, :where, and :has).
Simple SVG markup for icons/graphics (unsafe attributes removed).
Limited inputs: checkbox and radio only (useful for visual checklists).

What It Cannot Do

No scripts or executable content: script, iframe, object, embed, form controls, and similar are blocked.
No JavaScript URLs or CSS execution patterns like javascript:, expression(), behavior, or -moz-binding.
No CSS imports or URL-based CSS values: @import and url() are removed.
No Shadow DOM escape selectors such as :host, :host-context, ::slotted, ::part, or :root.
No event-handler attributes such as onclick or onload.
No unsupported tag names or invalid attributes outside the allow-list.

Supported HTML Tags (High-Level)

Common supported tags include:

p, br, h1-h6, strong, em, u, s, ul, ol, li, span, div, blockquote, a, img, hr, code, pre, table, thead, tbody, tfoot, tr, th, td, section, article, header, footer, main, figure, figcaption, label, style, input (radio and checkbox only), plus a safe subset of SVG tags.

Template Compatibility

Templates copied from standalone HTML files are rendered inside a listing wrapper, not a full page document.
Selectors targeting html or body are automatically remapped to .description-content for safer in-site rendering.
Security filters still remove unsafe patterns such as script tags, @import, url() in CSS values, javascript: links, and blocked form controls.
If your imported template looks different, move page-level styles to class-based selectors on your main wrapper and recheck Live View.

Advanced Seller Landing Template

This is the primary visual guide template. Paste it into the HTML and CSS editor when you want a richer, brochure-style listing layout. It is designed to work with the current sanitizer rules.

<div class="obid-listing" style="font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;max-width:700px;margin:0 auto;color:#1a1a2e;line-height:1.7;padding:30px 24px;">

  <!-- Title area -->
  <div style="text-align:center;margin-bottom:36px;padding-bottom:28px;border-bottom:2px solid #f0f0f0;">
    <div style="display:inline-block;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;padding:18px 32px;margin-bottom:20px;">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-4 0v2"/><path d="M8 7V5a2 2 0 0 0-4 0v2"/><line x1="12" y1="12" x2="12" y2="16"/><line x1="10" y1="14" x2="14" y2="14"/></svg>
    </div>
    <h1 style="font-size:2rem;font-weight:800;margin:0 0 10px 0;color:#1a1a2e;">Vintage Leica M6 Film Camera</h1>
    <p style="margin:0 0 20px 0;font-size:1.1rem;color:#555;">Classic 35mm rangefinder · Full mechanical · Excellent working order</p>
    <div style="display:flex;justify-content:center;flex-wrap:wrap;gap:10px;">
      <span style="background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:999px;padding:5px 16px;font-size:0.88rem;font-weight:600;">&#x1F4F7; Legendary Build Quality</span>
      <span style="background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;border-radius:999px;padding:5px 16px;font-size:0.88rem;font-weight:600;">&#x2705; Fully Tested &amp; Working</span>
      <span style="background:#fefce8;color:#854d0e;border:1px solid #fde68a;border-radius:999px;padding:5px 16px;font-size:0.88rem;font-weight:600;">&#x1F4E6; Insured Tracked Shipping</span>
    </div>
  </div>

  <!-- CSS-only tabs: all inputs first, then label bar, then panels -->
  <style>
    .adv-radio { display:none; }
    .adv-tab-bar { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:-1px; position:relative; z-index:1; }
    .adv-label { display:inline-block; padding:11px 22px; background:#f5f7fa; border:1px solid #dde2ee; border-bottom:none; border-radius:10px 10px 0 0; cursor:pointer; font-weight:600; font-size:0.92rem; color:#555; transition:background 0.2s,color 0.2s; }
    .adv-panel { display:none; padding:28px 24px; border:1px solid #dde2ee; border-radius:0 10px 10px 10px; background:#fff; animation:fadeAdv 0.3s ease; }
    #cam-t1:checked ~ .adv-tab-bar label[for="cam-t1"],
    #cam-t2:checked ~ .adv-tab-bar label[for="cam-t2"],
    #cam-t3:checked ~ .adv-tab-bar label[for="cam-t3"],
    #cam-t4:checked ~ .adv-tab-bar label[for="cam-t4"] { background:#1a1a2e; color:#fff; border-color:#1a1a2e; }
    #cam-t1:checked ~ .adv-p1,
    #cam-t2:checked ~ .adv-p2,
    #cam-t3:checked ~ .adv-p3,
    #cam-t4:checked ~ .adv-p4 { display:block; }
    @keyframes fadeAdv { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
    @media(max-width:520px){ .adv-label{padding:9px 12px;font-size:0.82rem;} }
  </style>

  <!-- All radios first so ~ combinator can reach labels and panels below -->
  <input class="adv-radio" type="radio" name="cam-tabs" id="cam-t1" checked>
  <input class="adv-radio" type="radio" name="cam-tabs" id="cam-t2">
  <input class="adv-radio" type="radio" name="cam-tabs" id="cam-t3">
  <input class="adv-radio" type="radio" name="cam-tabs" id="cam-t4">

  <!-- Tab label bar -->
  <div class="adv-tab-bar">
    <label class="adv-label" for="cam-t1">Overview</label>
    <label class="adv-label" for="cam-t2">Condition</label>
    <label class="adv-label" for="cam-t3">What's Included</label>
    <label class="adv-label" for="cam-t4">Shipping &amp; Returns</label>
  </div>

  <!-- Panel 1: Overview -->
  <div class="adv-panel adv-p1">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;">
      <div style="background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:14px;height:220px;display:flex;align-items:center;justify-content:center;">
        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#93c5fd" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="6" width="22" height="15" rx="2"/><circle cx="12" cy="13" r="4"/><path d="M7 6V4a1 1 0 0 1 1-1h2l1 3"/></svg>
      </div>
      <div>
        <p style="font-size:0.97rem;color:#333;margin:0 0 16px 0;">The Leica M6 is one of the most coveted 35mm rangefinder cameras ever made. This example is from 1987, fully mechanical with an accurate built-in light meter. I've had it CLA'd (cleaned, lubricated, adjusted) in 2024.</p>
        <div style="display:flex;flex-direction:column;gap:8px;font-size:0.92rem;">
          <div style="display:flex;align-items:center;gap:8px;"><span style="color:#16a34a;font-size:1.1rem;">&#x2713;</span> Shutter speeds accurate at all settings</div>
          <div style="display:flex;align-items:center;gap:8px;"><span style="color:#16a34a;font-size:1.1rem;">&#x2713;</span> Viewfinder bright and clean</div>
          <div style="display:flex;align-items:center;gap:8px;"><span style="color:#16a34a;font-size:1.1rem;">&#x2713;</span> Light seals replaced 2024</div>
          <div style="display:flex;align-items:center;gap:8px;"><span style="color:#16a34a;font-size:1.1rem;">&#x2713;</span> Meter reading confirmed accurate</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Panel 2: Condition -->
  <div class="adv-panel adv-p2">
    <p style="font-size:0.96rem;color:#333;margin:0 0 18px 0;">Cosmetically this camera rates at approximately <strong>8.5/10</strong>. I have been transparent below — please read before bidding.</p>
    <table style="width:100%;border-collapse:collapse;font-size:0.93rem;">
      <tr style="background:#f8fafc;"><th style="text-align:left;padding:10px 14px;color:#374151;border-bottom:1px solid #e5e7eb;width:34%;">Area</th><th style="text-align:left;padding:10px 14px;color:#374151;border-bottom:1px solid #e5e7eb;">Notes</th></tr>
      <tr><td style="padding:9px 14px;border-bottom:1px solid #f0f0f0;font-weight:500;">Body brass</td><td style="padding:9px 14px;border-bottom:1px solid #f0f0f0;">Slight wear on top corners — no dents</td></tr>
      <tr style="background:#f8fafc;"><td style="padding:9px 14px;border-bottom:1px solid #f0f0f0;font-weight:500;">Leatherette</td><td style="padding:9px 14px;border-bottom:1px solid #f0f0f0;">Original, intact, no peeling</td></tr>
      <tr><td style="padding:9px 14px;border-bottom:1px solid #f0f0f0;font-weight:500;">Glass elements</td><td style="padding:9px 14px;border-bottom:1px solid #f0f0f0;">No haze, fungus, or scratches</td></tr>
      <tr style="background:#f8fafc;"><td style="padding:9px 14px;font-weight:500;">Mechanics</td><td style="padding:9px 14px;">All smooth and fully functional</td></tr>
    </table>
  </div>

  <!-- Panel 3: What's Included -->
  <div class="adv-panel adv-p3">
    <table style="width:100%;border-collapse:collapse;font-size:0.93rem;">
      <thead><tr style="background:#1a1a2e;color:#fff;"><th style="text-align:left;padding:11px 16px;">Item</th><th style="text-align:left;padding:11px 16px;">Included</th></tr></thead>
      <tbody>
        <tr style="background:#f8fafc;"><td style="padding:10px 16px;border-bottom:1px solid #eee;">Leica M6 body (0.72x finder)</td><td style="padding:10px 16px;border-bottom:1px solid #eee;color:#16a34a;font-weight:600;">&#x2713; Yes</td></tr>
        <tr><td style="padding:10px 16px;border-bottom:1px solid #eee;">Original body cap</td><td style="padding:10px 16px;border-bottom:1px solid #eee;color:#16a34a;font-weight:600;">&#x2713; Yes</td></tr>
        <tr style="background:#f8fafc;"><td style="padding:10px 16px;border-bottom:1px solid #eee;">Neck strap (Leica branded)</td><td style="padding:10px 16px;border-bottom:1px solid #eee;color:#16a34a;font-weight:600;">&#x2713; Yes</td></tr>
        <tr><td style="padding:10px 16px;border-bottom:1px solid #eee;">Original box &amp; manual</td><td style="padding:10px 16px;border-bottom:1px solid #eee;color:#dc2626;font-weight:600;">&#x2715; No</td></tr>
        <tr style="background:#f8fafc;"><td style="padding:10px 16px;">Lens</td><td style="padding:10px 16px;color:#dc2626;font-weight:600;">&#x2715; Body only</td></tr>
      </tbody>
    </table>
  </div>

  <!-- Panel 4: Shipping &amp; Returns -->
  <div class="adv-panel adv-p4">
    <div style="display:flex;flex-direction:column;gap:16px;">
      <div style="display:flex;gap:16px;padding:18px;background:#f8fafc;border-radius:12px;border-left:4px solid #3b82f6;">
        <span style="font-size:2rem;flex-shrink:0;">&#x1F4E6;</span>
        <div><strong>Shipping:</strong> Dispatched within 2 business days via Royal Mail Special Delivery, fully insured and tracked. I double-box all cameras with foam padding.</div>
      </div>
      <div style="display:flex;gap:16px;padding:18px;background:#f8fafc;border-radius:12px;border-left:4px solid #10b981;">
        <span style="font-size:2rem;flex-shrink:0;">&#x1F504;</span>
        <div><strong>Returns:</strong> 14-day returns accepted if item is significantly not as described. Buyer pays return postage. Item must be returned in the same condition.</div>
      </div>
      <div style="display:flex;gap:16px;padding:18px;background:#f8fafc;border-radius:12px;border-left:4px solid #f59e0b;">
        <span style="font-size:2rem;flex-shrink:0;">&#x2753;</span>
        <div><strong>Questions?</strong> Message me before bidding — I'm happy to share more photos or answer anything about the camera's history or condition.</div>
      </div>
    </div>
  </div>

</div>

Tip: Swap in your own product text, colours, and badge labels. Keep the radio input order and class names intact — the tab behaviour depends on them.

Theme lock Preview renders sanitized output from the template above.

Troubleshooting

If content disappears after save, it likely used blocked tags, blocked attributes, or unsafe CSS syntax.
If a link does not render, ensure href starts with https://, mailto:, tel:, /, #, or ?.
If an image does not render, ensure src starts with https:// or /.
If styles are removed, simplify declarations and avoid advanced CSS functions.