White panel theme


#1

I made a theme panel for my personnal use, and I thought maybe some people could be interesting by this theme.
Here, everything is in Black & White, without extra-style like box-shadow, bold+grey or grey+italic. Every particular fields has been designed (like date picker, tags, or structures), I hope I didn’t forget some. I didn’t change font, just added some open-type features (tabular num.) for pages number, etc… Of course, depending on plugins you are using, you could have to change your plugins styles to fit to this theme.

From my point of view, the result is something very lightweight, more readable, and homogeneous.

Installation

  1. Copy-paste the CSS
  2. Name the css file “panel.css” and add it to /assets/css/
  3. put this line in the config.php c::set('panel.stylesheet', 'assets/css/panel.css');

The CSS file

https://gist.githubusercontent.com/culbrique/73e9ea0a9a478ac83a305da24d4e755c/raw/95338375de6f85ccf3c8ed80ed906f76a285ae11/panel.css

Support for Plugins
Now support my favorite field plugins : Tab-field, Prev-Next, Switch, Color-Picker, Slider


#2

Very cute! I think this style actually makes the UI a bit harder to use (contrast & color are really important factors for a good user experience), but it looks cool and an experienced panel user should be able to find everything without any delay. Nice work.


#3

Thanks, I only kept the green and red colors to indicate some essential functions and the messsage “you didn’t save this page” is blinking.

Edit : media queries and other things are now available. Enjoy !


#4

Wow, that looks so cool!! And also like a lot of work :slight_smile:


#5

Many Thanks !! :muscle:
I was surprise to see that nobody has made a panel theme yet, maybe because the kirby’s one is already very simple and very readable, but I’m wondering like @dreadnip suggested, if a back-office needs to be « ugly » to feel « secure ». By « ugly », I mean passing the function before the design.
By opposite with this theme, you can easily embed the font from your front-end website and display it into the panel.css . This way, you can propose to customers to get closer to the look of the front-end design giving something more personalized.


#6

No panel themes??? Challenge accepted :slight_smile:


#7

Would look good on a Macintosh running System 6 :slight_smile:

Joke apart, it looks cool but I wonder if legibility doesn’t suffer a bit. Everything seems to be on the same level, with the same visual prominence.


#8

more contrast = more legibility.
The default theme has (from my POV), some contrast problems : the breadcrumb arrow uses a weird :after gradient method, the smiley face when you save your page is black on a a dark green, and other minor things.

You made me think about this article on Smashing Magazine, take a look at this : ios7-mini
I’m using my “white” theme since a while and I can’t get back ! This has the same effect on me as this picture ! :slight_smile:

About the same visual level, I agree, but I think everything has already his own identity with margins, positions, or styles.


#9

this is a nice exercise! i modified bits of the panel sometimes but never the whole thing.

also, just wanna say that legibility and readability are really non descriptive adjectives, like they mean nothing. beside being non scientific (if that matters), they are more ingrained with a shared system of visual culture, than being a priori qualities of a system.

classic example is “this typeface is more legible than that”, which means… ???

black letter / gothic fonts have been used for centuries and it was just the only way you could experience reading on newspaper and posters. people trained their eyes for that. when sans serif were introduced, everybody reacted by saying “this is very hard to read”.

so always funny reading these adjectives as actual useful words in a conversation or explanation of some design choices.

:stuck_out_tongue: