
To create a new theme for The Cyberix Network:
Method 1: CSS-Only Theme (Simple)

Create a new directory: /assets/themes/your-theme-name/
Create style.css with your custom CSS
Create theme.json with metadata:

{
    "name": "Your Theme Name",
    "description": "Description of your theme",
    "author": "Your Name",
    "version": "1.0",
    "created": "2025-10-07"
}

The CSS will override the default styles while keeping the same HTML structure.

Method 2: Custom Layout Theme (Advanced)

For themes that need to modify the HTML structure:

Create the theme directory,

Include style.css and theme.json
Add a custom layout.tpl file
The system will automatically use the custom layout if it exists

Note: Custom layouts are more complex to maintain since we'll need to update them when or if any PHP variables that edit the default layout change.. 
or if other things change that could break it

Theme CSS Structure

Your theme CSS should include these key elements:

/* Core style */
body { }
a:link { }
a:visited { }
a:hover { }
a:active { }

/* Post formats */
.greentext { }
.reply-link { }
pre { }

/* Layout */
table.main-table { }
.desktop-sidebar { }
.mobile-nav { }
.mobile-footer { }

/* Responsive breakpoints */
@media (max-width: 799px) { }
@media (min-width: 800px) { }
@media (max-width: 360px) { }


----

800px - assumably a desktop computer
799px - a mobile device of some variety
360px - definitely a small mobile device or a painstakingly small screen size/resolution


For reference, as of 07-Oct-25, layout.tpl is this:

```tpl
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>{PAGE_TITLE} - {SITE_NAME}</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1.0">

<meta name="description" content="{PAGE_DESCRIPTION}">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="{CURRENT_URL}">
    <meta property="og:title" content="{PAGE_TITLE} - {SITE_NAME}">
    <meta property="og:description" content="{PAGE_DESCRIPTION}">
    <meta property="og:image" content="{SITE_URL}/assets/images/cyberixbanner.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="{SITE_NAME} - The sophisticated man's creative playground.">
    <meta property="og:site_name" content="{SITE_NAME}">
    <meta property="og:locale" content="en_US">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="{CURRENT_URL}">
    <meta name="twitter:title" content="{PAGE_TITLE} - {SITE_NAME}">
    <meta name="twitter:description" content="{PAGE_DESCRIPTION}">
    <meta name="twitter:image" content="{SITE_URL}/assets/images/cyberixbanner.png">
    <meta name="twitter:image:alt" content="{SITE_NAME} - The sophisticated man's creative playground.">
    
    <!-- Discord -->
    <meta name="theme-color" content="#0066cc">
    <meta name="author" content="{SITE_NAME}">
    
    <!-- Additional SEO and Social -->
    <meta name="robots" content="index, follow">
    <meta name="googlebot" content="index, follow">
    <meta name="format-detection" content="telephone=no">
    <link rel="canonical" href="{CURRENT_URL}">
    
    <!-- Favicons and App Icons -->
    <link rel="icon" href="{SITE_URL}/assets/images/cyxfavicon.png">
    <link rel="apple-touch-icon" href="{SITE_URL}/assets/images/cyxfavicon.png">
    <link rel="shortcut icon" href="{SITE_URL}/assets/images/cyxfavicon.png">
    
    <!-- JSON-LD Structured Data for better SEO -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "{SITE_NAME}",
        "description": "{SITE_DESCRIPTION}",
        "url": "{SITE_URL}",
        "image": "{SITE_URL}/assets/images/cyberixbanner.png",
        "sameAs": []
    }
    </script>
<STYLE>
{THEME_CSS}
</STYLE>
</HEAD>

<BODY>

<CENTER>

<!-- Mobile Navigation -->
<DIV CLASS="mobile-nav">
    <A HREF="/">Home</A>
    <A HREF="/forum">Forums</A>
    <A HREF="/connect">Connect</A>
    <A HREF="/webrings">Webrings</A>
    <A HREF="/settings">Settings</A>
    {MOD_PANEL_LINK}
</DIV>

<TABLE CLASS="main-table" WIDTH="800" BORDER="0" CELLSPACING="0" CELLPADDING="5">
<TR>
    <TD COLSPAN="2">
        <B>The Cyberix Network</B>
    </TD>
</TR>

<TR>
    <TD COLSPAN="2">
        <I>The sophisticated man's creative playground.</I>
		<HR>
    </TD>
</TR>

<TR>
    <!-- Sidebar -->
    <TD CLASS="sidebar-cell" WIDTH="160" VALIGN="TOP">
        <DIV CLASS="desktop-sidebar">
        <B>Navigation</B><BR>
        <HR>
        • <A HREF="/">Home</A><BR>
        • <A HREF="/forum">Forums</A><BR>
        • <A HREF="/connect">Connect</A><BR>
        • <A HREF="/webrings">Webrings</A><BR>
        • <A HREF="/settings">Settings</A><BR>
        {MOD_PANEL_LINK}
        <HR>
        <FONT SIZE="1">
        <B>Visitors:</B> {TOTAL_VISITORS}<BR>
        <B>Hits:</B> {TOTAL_HITS}<BR>
        <B>Version:</B> 07-Oct-25 (1.4.1)<BR>
        <B>Site established:</B> 07-Jun-2025<BR>
        <HR>
        {RANDOM}
		<HR>
        <CENTER>
            <A HREF="https://cy-x.net">
                <IMG SRC="{SITE_URL}/assets/images/button.png" ALT="cy-x.net">
            </A>
        </CENTER>
        </FONT>
        </DIV>
    </TD>
    
    <!-- Main Content -->
    <TD VALIGN="TOP">
        {GLOBAL_CAPTCHA_HTML}
        {BAN_HEADER_HTML}
        
        <!-- BEGIN MESSAGES -->
		<CENTER>
        <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="5">
        <TR><TD><FONT COLOR="{MESSAGES.color}">{MESSAGES.text}</FONT></TD></TR>
        </TABLE>
		</CENTER>
        <!-- END MESSAGES -->
        
        {CONTENT}
    </TD>
</TR>
</TABLE>

<!-- Mobile Footer -->
<DIV CLASS="mobile-footer">
    <A HREF="https://cy-x.net">
        <IMG SRC="{SITE_URL}/assets/images/button.png" ALT="cy-x.net">
    </A>
    <BR>
    <FONT SIZE="1">
    <B>Visitors:</B> {TOTAL_VISITORS} | <B>Hits:</B> {TOTAL_HITS} | <B>Version:</B> 1.4<BR>
    {RANDOM}
    </FONT>
</DIV>

</CENTER>

</BODY>
</HTML>
```

Our default style.css is this:
```css
/* Default Cyberix Theme */

body { 
    background: #000000; 
    color: #C0C0C0; 
    margin: 0;
    padding: 0;
}

a:link { color: #4da6ff; text-decoration: none; }
a:visited { color: #4da6ff; text-decoration: none; }
a:hover { color: #FFFFFF; text-decoration: underline; }
a:active { color: #00FF80; text-decoration: underline; }
img { border: none; max-width: 100%; }

/* fix BS */

pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #111111;
    padding: 10px;
}

.greentext {
    color: #789922;
}

.reply-link {
    color: #D00 !important;
    text-decoration: underline !important;
}

td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

img {
    max-width: 100%;
    height: auto;
}

/* Mobile styles */
@media (max-width: 799px) {
    body {
        padding: 8px;
        font-size: 16px;
        display: block !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
    
    table.main-table {
        table-layout: fixed;
        width: 100% !important;
        max-width: 100%;
    }
    
    /* Stack layout on mobile */
    table.main-table > tbody > tr {
        display: block !important;
    }
    
    table.main-table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .desktop-sidebar {
        display: none !important;
    }
    
    .mobile-nav {
        text-align: center;
        margin-bottom: 15px;
        border-bottom: 1px solid #444477;
        padding-bottom: 15px;
    }
    
    .mobile-nav a {
        display: inline-block;
        margin: 0 8px 8px 0;
        padding: 6px 10px;
        background: #111122;
        border: 1px solid #444477;
    }
    
    .mobile-footer {
        text-align: center;
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #444477;
    }
}

/* Desktop styles */
@media (min-width: 800px) {
    body {
        padding: 10px 0;
    }
    
    table.main-table {
        width: 800px;
    }
    
    .mobile-nav, .mobile-footer {
        display: none !important;
    }
}

/* Small phones */
@media (max-width: 360px) {
    body {
        padding: 5px;
        font-size: 14px;
    }
    
    .mobile-nav a {
        margin: 0 4px 6px 0;
        font-size: 13px;
        padding: 4px 8px;
    }
}
```


Theming notes:

Try to avoid modern webshit development tropes. If it isn't obvious, themes should be made with slightly older browsers and performance in consideration.
I should be able to use your theme in Pale Moon (the most functional oldest-browser I know of) just fine.

The default layout.tpl and style.css should be considered your best reference. They are compatible with most, if not all browsers and perform well on all devices tested.