Web Analytics
Skip to Main Content

ChatGPT Meets LibGuides

Working together to make our LibGuides smarter.

Translate Plain Text → LibGuides HTML/CSS ✍️➡️🧩

 

ChatGPT can take any block of plain text—whether it’s a paragraph, a list, or a set of instructions—and convert it directly into HTML/CSS code ready for insertion into LibGuides content boxes.

Pastel-ready Theme-agnostic No JS needed

What you can feed ChatGPT

Any plain text you’d normally paste into a guide:

Page description Step-by-step tutorial Checklist FAQ entries Call-outs / tips Workshop notes

Quick Start (5 steps)

  1. Paste your plain text (description, steps, FAQ, etc.).
  2. Prompt ChatGPT with the template below (ask for banner, cards, and toggles).
  3. Preview the output; tighten headings (verb-first, ≤ ~55 chars).
  4. Paste the HTML into a LibGuides Rich Text/HTML box.
  5. Check mobile view; adjust spacing and accent colors if needed.

Copy/Paste Prompt (theme-agnostic)

Convert the text between <PLAIN_TEXT> tags into a LibGuides-ready HTML block:
- Use a small gradient banner (UF blue by default), pastel cards, no external JS
- All text ≥16px; lists are verb-first and concise
- Include optional <details> toggles labeled “Show preview” and “Show code”
- Output must be self-contained (inline styles OK); expose CSS tokens as custom properties
- Add a short Quick Start checklist (3–5 steps)
- Provide a CTA row (I will edit URLs)

<PLAIN_TEXT>
[Paste your paragraph/list/instructions here...]
</PLAIN_TEXT>

Plain Text → HTML Element Map

  • Intro sentence → Gradient banner with 1–2 line description
  • Bulleted list → Ordered checklist with verbs first
  • Tip/note → Pastel call-out box
  • Long snippet → <pre> in a dark code panel
  • Optional detail → <details>/<summary> toggle
  • Actions → CTA pills (link to pages/forms)

Theme in seconds

Change --accent1/--accent2 at the top of a block to match any guide’s branding (e.g., Copilot blues, Perplexity purple, department colors).

Interactive Example

Plain Text (input) 
This page helps you find recent business articles about your company.
1) Open Business Source Ultimate via Library A–Z.
2) Search Company Name + limit to last 12 months.
3) Add one industry keyword and filter to Trade Publications.
4) Save two relevant articles and export citations.
5) Ask ChatGPT for one stronger search string.
Generated Block (preview)

Find Recent Articles on Your Company

Use Business Source Ultimate to pull the latest coverage, then refine with AI.

Quick Start

  1. Open Business Source Ultimate (Library A–Z).
  2. Search Company + limit to last 12 months.
  3. Add one industry keyword; filter to Trade Pubs.
  4. Save two relevant articles; export citations.
  5. Ask ChatGPT for one stronger search string.
Generated Block (code) 
<div style="--accent1:#3b82f6; --accent2:#2563eb; --border:#eaeaea; --radius:14px; font-size:16px; line-height:1.6;">
  <div style="background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#fff; padding:16px; border-radius:12px; margin:0 0 10px 0;">
    <h3 style="margin:0 0 4px 0; font-size:20px;">Find Recent Articles on Your Company</h3>
    <p style="margin:0;">Use Business Source Ultimate to pull the latest coverage, then refine with AI.</p>
  </div>
  <div style="background:#ffffff; border:1px solid var(--border); border-radius:12px; padding:12px;">
    <h4 style="margin:0 0 6px 0; font-size:18px;">Quick Start</h4>
    <ol style="margin:0; padding-left:18px;">
      <li><strong>Open</strong> Business Source Ultimate (Library A–Z).</li>
      <li><strong>Search</strong> Company + limit to last 12 months.</li>
      <li><strong>Add</strong> one industry keyword; <strong>filter</strong> to Trade Pubs.</li>
      <li><strong>Save</strong> two relevant articles; <strong>export</strong> citations.</li>
      <li><strong>Ask ChatGPT</strong> for one stronger search string.</li>
    </ol>
  </div>
</div>

Common Pitfalls (and quick fixes)

  • Dense paragraphs: convert to 4–6 verb-first steps.
  • Low contrast: swap light text on pastels for dark text.
  • Inconsistent spacing: use 12–16px inner padding; 10–16px gaps.
  • Code too long: wrap in <details> “Show code”.
  • Missing mobile check: quickly preview at 360–414px width.