Hey all,

Guess I am not searching the forum right, but I can't find any thread where someone shared custom admin themes.

Either with just the styling changed and layout intact as it is, or completely custom theme with different layout composition. Any links to such threads?

I am interested to see what others came up with, cause I literally went with dev tools open and just changing the CSS for the default theme. I really like KirbyCMS theme and ProcessWire's AdminThemeCanvas, so I wanted to create something similar, clean and simple style.

I am attaching a few screenshots if anyone is interested:

Screenshot 2022-02-22 at 18.19.20.png (19.21 KiB) Viewed 3760 times

Screenshot 2022-02-22 at 18.22.35.png (103.26 KiB) Viewed 3760 times

Screenshot 2022-02-22 at 18.40.48.png (108.01 KiB) Viewed 3760 times

Hi @madebym!

I don't think the forum has a designated area for custom themes people have developed. I know people post custom tags and functions from time to time in the Tips and Tricks area, which I find very helpful. So if someone wanted to post a theme they're happy with, they could post it there I imagine. I don't think I've seen any posts about custom themes myself.

That being said, I tend to like the default admin theme, so I haven't deviated much. But I'd love to see other themes, especially if anyone's done anything more than just changing some font sizes and spacing (which is all I've done )

Are you familiar with how to make your own theme? You said you tinkered in the dev tools, changing CSS, etc? If not, the theming documentation is in the Couch v2.0 post, near the top. The documentation is just an overview to get you started, and you'll want to dig around the default theme folder (couch/theme/_system/) to get a feel for the file structure and see what does what.

Best practice is to follow the selective overriding method as discussed in this post to keep things clean. Don't just overwrite the files in the _system folder.

@madebym By the way, I really like ProcessWire! I haven't built any client sites with it, but I have tinkered with it and picked up some useful techniques I learned there (like delayed output).

It feels like a great option for someone who wants to write a little more vanilla PHP -- like a nice hybrid between Couch and Laravel

[trendoman]

I also wish there were more than one stock theme. I can tolerate the same CSS (only wish a darker / night theme) but need more layouts, more login options, better JS-powered editable fields and a fully reworked richtext editor. I'll be astonished to see someone drop it, it takes weeks / months to build right and a good experience with Design, PHP, JS, Couch internals.. Definitely too much to ask!

When I learned tailwind, I started a new backend theme. But it was too much work and I gave up.
The actual theme is old school coded like: .sidebar-txt>p>a, what's is okay. But I am coding the last 10 years with BEM and tailwind has a utility-first approach. With Tailwind CSS v3.0 it could be easier to transform.

@madebym would be happy, if you share your clean theme with me.

@mwlarkin1 I saw that post on theme customization, but tbh I just wanted to change some of the styles to make overall look and feel more cleaner. No text shadows, gradient backgrounds, etc.

So I opened dev tools and started from the sidebar, changing CSS for elements I wanted.

It is a complete mess of overrides lol, so I am giving it a second try that would result in cleaner CSS. I'll share it here once I have it done.

Regarding Processwire, it is indeed a great CMS, especially the API which allows for powerful stuff with not lots of code.

As a matter of fact, I am currently undecided which CMS to use for one project I started a few days ago. I haven't built anything complex with PW, just two simple sites, but would really love to get it to know better, cause I like everything about it.

On the other hand, I have my dear Couch that never lets me down, so I am leaning towards it

@simonWpt Yes, I agree that using something like Tailwind would make things easier. Even a vanilla CSS solution would suffice, custom properties are ideal for theming. If all the necessary styles are exposed as variables, it makes basic theming a breeze.

BTW, I am also interested to see @trendoman clean theme

@SimonWpt Would you say the HTML structure of the admin panel is too rigid for your liking (too many elements and subelements as specified in the theme files like theme/_system/sidebar.html)? If so, merely applying CSS or Tailwind classes to Couch's default markup would indeed seem too time consuming and mind-bending to maintain.

Maybe another approach would be to reorganize the HTML markup itself to make it more flat which can then have Tailwind classes or CSS grid applied. Especially helpful if you plan on making radical visual changes to the admin panel.

So instead of using the default sidebar.html ...

Code: Select all

<ul id="nav">
    <cms:admin_menuitems depth='1'>
    [ . . . ]
        <li class="nav-group"<cms:if is_menu_collapsed> style="display: none;"</cms:if>>
            <ul>
                <cms:admin_menuitems depth='1' childof=k_menu_name>
                    <li>
                        <a class="<cms:if k_menu_icon >nav-icon</cms:if><cms:if k_is_current> nav-active</cms:if> <cms:show k_menu_class />" title="<cms:show k_menu_name />" href="<cms:show k_menu_link />">
                            <cms:if k_menu_icon >
                                <cms:show_icon k_menu_icon />
                            </cms:if>
                            <span class="nav-title"><cms:show k_menu_title /></span>
                        </a>
                    </li>
                </cms:admin_menuitems>
            </ul>
        </li>
    [ . . . ]
    </cms:admin_menuitems>
</ul>

... maybe your theme re-interprets the sidebar markup to your liking so it plays nicely with you manner of styling. For instance, I might render the markup like this and use CSS grid for layout.

Code: Select all

<nav id="sidebar_nav">
    <cms:admin_menuitems depth='1'>
    [ . . . ]
        <section class="nav-group"<cms:if is_menu_collapsed> is-collapsed</cms:if>>
            <nav class='sidebar-menu-nav'>
                <cms:admin_menuitems depth='1' childof=k_menu_name>
                    <a class="<cms:if k_menu_icon >has-nav-icon</cms:if><cms:if k_is_current> is-active</cms:if>" title="<cms:show k_menu_name />" href="<cms:show k_menu_link />">
                        <cms:if k_menu_icon ><span class='nav-icon'><cms:show_icon k_menu_icon /></span></cms:if>
                        <cms:show k_menu_title />
                    </a>
                </cms:admin_menuitems>
            </nav>
        </section>
    [ . . . ]
    </cms:admin_menuitems>
</nav>

If you prefer Tailwind, I imagine you'd just leave out the class names and replace them with Tailwind classes.

Of course that's more work, but if you're really into making a custom theme, I imagine this would be more maintainable than just using CSS applied to Couch's default flavor of markup.

- - - - - - -

@madebym I too find myself always coming back to dear Couch despite dipping my toes in Processwire, Laravel, etc. Really, it's the pre-built admin panel that I like about Couch. And it's so easy for clients to manage. Of course, some clients would prefer a more shiny and functional admin panel.

And I definitely understand @trendoman's desire for more modern JS-powered editables. Something like Filestack's approach to uploading assets vs the default KCFinder we have in <cms:editable type='image' />. I use Filestack with some projects for this very reason.

Hello Couchers.
This is a interesting topic.

Once I tried to make color-management-css for CouchCMS.
But I gave up to finish it because of my luck of sense of coloring.

Any color-specialists can make much better cololr-management for CouchCMS what I did.

main.zip

main.css with color-variables updated 2022/02/25

(13.12 KiB) Downloaded 385 times

"What I did"

I picked up each colors to use css-variables.(like --color_0: #0a0a0a;)
And set these variable to where these colors are used.(like background: var(--color_4); )

But variable-names are not sementic.
There are 90 colors and some are very similar.
They should be reduced so it will be easy to maintenance.


@trendoman!
You can use for dark-mode.

Code: Select all

@media (prefers-color-scheme: dark) {
  :root {
    --main-text: #ddd;
    --main-bg: #000;
  }
}

@SimonWpt Would you say the HTML structure of the admin panel is too rigid for your liking

The CSS design is primarly problematic, because it is cluttered. Look i.e. at the logo HTML:

Code: Select all

<img id="logo" src="https://domain.com/couch/theme/_system/includes/admin/images/couch_dark.png">

And this is the CSS code, which affects the logo:

Code: Select all

#logo {
    height: 68px;
}
a>img {
    border: 0;
}
img {
    vertical-align: top;
    -moz-force-broken-image-icon: 1;
    -ms-interpolation-mode: bicubic;
}
* {
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
a {
    outline: none;
    text-decoration: none;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
body {
    min-width: 360px;
    background-color: #f5f5f5;
    color: #111;
    font: 12px/1.5 "Helvetica Neue",Arial,sans-serif;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
::selection {
    background: rgba(105,75,60,.6);
    color: #fff;
    text-shadow: none;
}

Probably the approach of simply exchanging the colors and spacing via the dev tools is the simplest solution for a nice backend.

Hello Couchers.

I made main_color.scss. But it looks weired with many extends.

main_color.zip

main_color.scss

(5.29 KiB) Downloaded 419 times

"What I did"

I picked up color-values from main.css.
Then I made a scss-file from it.

So I hope this scss-file help you to reduce colors and to make sementic css-variable-names.