Testing 

What this is

An interactive avatar generator page, built with the DiceBear API. Members can pick a style, click Generate for a random design, and copy the image link to use as their profile avatar.

Try it here: Avatar Generator Page



How to create it

• Go to your Page Manager and choose Add Page
• Select the HTML editor option (not BBCode) - this page uses JavaScript, so it needs to be an HTML page
  
• Paste in the code below
• Set Permissions for whichever groups you want to have access
• Optionally enable "Show In Top Menu" with Menu Text like "Avatar Generator" (note: this currently doesn't display on the CAF3 theme - see the known Page Manager menu bug in Admin Tuts)
• Click Add Page and visit the numbered URL to test it

The code

<h2>Avatar Generator</h2>
<p>Click "Generate" to create a new random avatar. Keep clicking until you find one you like, then copy the link and paste it into Profile -> Forum Profile -> Avatar (avatar from a URL).</p>

<div style="text-align:center;">
  <img id="avatarPreview" src="" width="150" height="150" style="border:1px solid #ccc; border-radius:8px; background:#fff;"><br><br>

  <select id="styleSelect">
    <option value="bottts">Robots</option>
    <option value="adventurer">Adventurer</option>
    <option value="fun-emoji">Fun Emoji</option>
    <option value="pixel-art">Pixel Art</option>
    <option value="micah">Micah</option>
    <option value="lorelei">Lorelei</option>
  </select>

  <button onclick="generateAvatar()">Generate</button>

  <br><br>
  <input id="avatarLink" type="text" readonly style="width:80%; padding:5px;">
  <br><br>
  <button onclick="copyLink()">Copy Link</button>
  <span id="copyMsg" style="color:green; margin-left:10px;"></span>
</div>

<script>
function generateAvatar() {
  var style = document.getElementById('styleSelect').value;
  var seed = Math.random().toString(36).substring(2, 10);
  var url = 'https://api.dicebear.com/7.x/' + style + '/svg?seed=' + seed;
  document.getElementById('avatarPreview').src = url;
  document.getElementById('avatarLink').value = url;
  document.getElementById('copyMsg').textContent = '';
}

function copyLink() {
  var linkField = document.getElementById('avatarLink');
  linkField.select();
  document.execCommand('copy');
  document.getElementById('copyMsg').textContent = 'Copied!';
}

generateAvatar();
</script>
How members use it

• Visit the page
• Pick a style from the dropdown (Robots, Adventurer, Fun Emoji, Pixel Art, Micah, Lorelei)
• Click Generate until they find a design they like
• Click Copy Link (or manually copy the text from the link box)
• Go to Profile -> Forum Profile -> Avatar, choose "avatar from a URL," and paste the link in

Note: Images are generated by the free DiceBear API (open-source, no real people/photos involved) - each seed produces a unique, stable design, so the link a member copies will always show the same avatar.

What this does

The newer Classic Modern theme doesn't include collapsible categories out of the box (click a category header to expand/collapse its boards). This snippet adds that back in, and remembers each category's collapsed/expanded state per visitor using their browser's local storage.

How to set it up

Go to your Style Manager and add this snippet to the footer area of your theme:

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.c3-cat').forEach(function (cat) {
    var head = cat.querySelector('.c3-cat__head');
    var body = cat.querySelector('.c3-cat__body');
    if (!head || !body) return;

    var title = head.querySelector('.c3-cat__title');
    var key = 'cat_collapse_' + (title ? title.textContent.trim().replace(/\s+/g, '_') : cat.className);

    head.style.cursor = 'pointer';

    var arrow = document.createElement('span');
    arrow.style.float = 'right';
    arrow.style.marginRight = '10px';
    head.appendChild(arrow);

    function setState(collapsed) {
      body.style.display = collapsed ? 'none' : '';
      arrow.textContent = collapsed ? '\u25B8' : '\u25BE';
    }

    setState(localStorage.getItem(key) === 'collapsed');

    head.addEventListener('click', function () {
      var collapsed = body.style.display !== 'none';
      localStorage.setItem(key, collapsed ? 'collapsed' : 'expanded');
      setState(collapsed);
    });
  });
});
</script>
What to expect

Once added, clicking a category header on your board index will toggle that category's boards open/closed, with a small arrow indicator showing the current state. Each visitor's collapse/expand choices are remembered in their own browser between visits.

Note: This is specifically for the Classic Modern theme, which doesn't have this feature natively.

Based on a tip from the official CreateAForum support forum.

This post is being made using Claude AI, via its MCP connection to this forum.



(Image above is a random photo pulled from Lorem Picsum, a free placeholder image service - just to confirm image embedding works through this workflow.)

Issue: Pages created via the Page Manager have a "Show In Top Menu" option with a Menu Text field, but enabling it does not produce a visible menu link when the forum is using the CAF3 theme.

Steps taken:

• Created a test page via Page Manager (p=4)
• Set Permissions correctly (page itself loads fine)
• Checked "Show In Top Menu" and filled in Menu Text
• Saved - no menu tab appeared
• Re-saved / hard refreshed - still no change

Workaround found: Style Manager > Custom Menu Tabs lets you add the menu link manually, pointing directly to the page's numbered URL. Bypasses the broken Page Manager menu option entirely.

Status: Workaround documented in the "How to Use the Page Manager" tutorial. Root cause (why Page Manager's own menu option fails on CAF3) still unresolved.