Admin Facelift. Take 3

Ace of Dubs · 2006-06-09 01:12:18

Splash

hcgtv · 2006-06-09 04:16:30

jm · 2006-06-09 06:56:18

Ace, I hate to break it to you, but you’re having way too much fun!

Before I forget, I found a light, unobtrusive, and customizable popup script. Just add a class like “help” or “code” or something to create a popup. I use addevent with it on my site: addEvent(window, 'load', initPage);.

rui · 2006-06-09 09:26:35

Ace of Dubs wrote:

Splash

Hi Ace,

Please don’t forget that txp is used in languages other than english.
The top left zone in the proposed mock-ups may not have sufficent space for the site name and the username (see the red lines in the image below – portuguese txp admin).

All the Best,
rui

Ace of Dubs · 2006-06-09 11:47:04

Good call, Rui. Changed the layout.

Also, I been doing some thinking and an “Upload Theme” Button is not the best way to add styles. Instead, we should have a theme folder which TXP reads (exactly how PunBB does it) You can upload your CSS files directly to this folder and they will appear in the dropdown menu. Inside the Theme folder, there will be an image folder where you will group images by theme and link them to your CSS.

I have a photoshop template that is sliced up to contain the rounded corners and icons. All colors are grouped together by layer and their transparency is blocked, so you can instantly fill them with whatever color you want, then “Save for Web” and save all the slices into your new theme folder. The CSS is already coded to look for the resulting slices. All that’s left to do is Search/Replace your link to the new folder within your CSS doc and that’s all.. With this system in place, you will essentially be able to create your own themes in minutes!

In regards to the Icons On/Off buttons, I think they will also be un-necessary, because not all themes will have icons in them. Instead we should rely on naming conventions. (Hot Cocoa, Hot Cocoa + Icons)

Eventually we can set up a download page where people can preview and grab only the themes that they want. This way we don’t bloat up installs with a bunch of useless files. A link to this page will show up on the admin, like so:

Having said all that, I think the default install should come with 4 themes. One in the original TXP yellow and the rest in various themes which will cover the bases for all color-blind issues. Not sure if PunBB does polls, but later on I will make a thread where we can vote on which themes will get default status.

jakob · 2006-06-10 16:29:28

Just noticed this thread, and the other one of Mary’s – lots of great examples – and it reminded me of an experiment of my own a while ago.

I like the idea of your photoshop template with the colours showing through. If one kept the design simple enough could you not bypass the photoshop file entirely and use ‘knockout’ transparent png’s along the lines of Logo Colour Variations or the SimpleBits Chameleon Icons, i.e. a white mask where the colour or background beneath shows through?

Then the key colours and background colours could be set in a css file or via admin fields, and if you added a background url, then you could even insert background patterning or a company logo.

Basecamp does soemthing similar, and offers fields where you can enter a handful of colours for the header and upload a logo. It works partly because they’ve kept things like the tabs really simple, and partly because they’ve also restricted the user’s changes to certain elements of the UI and left others to remain consistent. I gess that’s all doable by grouping these in the css file:

(pic links to larger image with schema)

Design-wise, I think it’s really important that the focus is still on the text fields and the most important action (i.e. save) and not on the controls or side panels. I find that clients are a little baffled by all the possibilities on the interface to start with as it is (would love to be able to switch off what’s not needed). It should be really clear where they should type and where they should save, change, assign, select or whatever. The other things should not compete for attention.

Also, vertical height of the top will I think be less and less of an issue as screen real estate goes up. But as the resolution of the screens increases (new laptops are now around 114dpi no longer 72dpi), the font-size will get ever more important (i.e. should be bullet-proof sizeable).

Getting things to work across all browsers, and making them bulletproof at different sizes is really difficult :-) I know, because I’ve tried it, and not made it all the way. This was my try on the txp admin, that I played with some months ago:

… and the articles screen

(pics link to full-screen images)

I came across some similar design decisions, such as login at the top (I removed the footer entirely), site/company name at the top, tiered tabs giving most focus to what’s in use, subdued display of other tabs, handling of ‘view site’ tab (not really a tab, rather an external link so it has no tab and a different roll-over arrow). To avoid the txp and company logo clash, I shifted my version of the textpattern logo from the top strip to another still prominent but out of the way location at the top-right of the tab itself (perhaps cut-off here in the thread preview pic).

Last edited by jakob (2006-06-10 16:31:42)

marco · 2006-06-10 17:17:51

Jacob and others who posted snapshots, are these admin themes available anywhere for download?

They look awfully good to me, I have not had time to go throug the entire thread, I’m ready to download an test them.

Ace of Dubs · 2006-06-10 19:26:12

Excellent work there, Jakob. Out of curiosity, do you have any code for these comps? I am in the process of building the templates, making them scalablle/bulletproof and of course IE-friendly. I like the way you are thinking and am sure your code will provide some extra insight.

kemie · 2006-06-10 19:40:24

my mouth is watering!

Nonsense · 2006-06-10 19:53:44

Some very good points there Jakob.
I like the idea with the arrows indication the browse-position. In fact I like it more than just plain icons which tend to get a bit messy.

Last edited by Nonsense (2006-06-12 10:07:41)

jakob · 2006-06-11 17:43:14

marco, there’s not really enough there to constitute a theme – it worked for my purposes (i.e. firefox and not IE) and would need plenty of tidying up to work in other browsers and be bulletproof with font-sizing etc. Some of the suggestions I made were ideas that arose doing it – i.e. not implemented (… begins to eat hat …). I’d love to work it up more but I just know that if I start, my nights will grow ever shorter …
Anyway, I’ll send ace of dubs my files. Maybe he/she can make more of them, if desired, that is.

(this version had different tabs and the dotted outline as rollover and otherwise no background tab, so it was a bit less ‘active’ on the eye).

Just for fun, and more background, here’s another tab variation I had photoshopped at the time and then decided not to pursue, not so much because I didn’t like it, but making bulletproof tabs that have non-straight sides is very difficult. If just the top corners are styled and the edges are straight (like the presentation and admin tabs) then the ‘sliding door’ tab can slide left and right and the bottom simply extends beneath the upper ‘edge of the card’ below. If the bottom corners are styled too, then horizontal and vertical sliding is needed at the same time – that quickly gets complex (check out those rounded corner css-tricks – most have lots of extra, and unnecessary, markup to provide hooks for the background css images). Possibly the sloped tab version works if you can do without a few pixels of shadow at the crossover of slant and shadow line (which if you look closely are missing in the post above). Maybe a combination of sliding doors for the sides and mozilla’s corner-drawing css would get that effect to work in mozilla – again, it’s an effect. End of the story: simpler forms are easier to achieve – cue ace of dubs’ version.

Thinking about the idea of the knockout png files, I’m not sure that it works for the second level of tabs when they have a colour, as somewhere you will have to make a colour decision that is ‘hard-written’ into the png, not unless you can make a non-colour dependent alpha mask (trying to get my head around that concept). Maybe another design-approach where the first and second-level tabs are more similar (like they are as standard) would make that concept workable.

marco · 2006-06-11 18:35:12

jakob wrote:

“…I didn’t like it, but making bulletproof tabs that have non-straight sides is very difficult. …”

I know the nifty cornes cubes produces very nice, rounded corners, at least on the top, but maybe it could work on the bottom as well; see example4.

I am wondering if would work for your second alternative; b.t.w., it is another very nice example of what TP admin might looks some day.

Textpattern CMS

Textpattern CMS support forum

#73 2006-06-09 01:12:18

Re: Admin Facelift. Take 3

#74 2006-06-09 04:16:30

Re: Admin Facelift. Take 3

#75 2006-06-09 06:56:18

Re: Admin Facelift. Take 3

#76 2006-06-09 09:26:35

Re: Admin Facelift. Take 3

#77 2006-06-09 11:47:04

Re: Admin Facelift. Take 3

#78 2006-06-10 16:29:28

Re: Admin Facelift. Take 3

#79 2006-06-10 17:17:51

Re: Admin Facelift. Take 3

#80 2006-06-10 19:26:12

Re: Admin Facelift. Take 3

#81 2006-06-10 19:40:24

Re: Admin Facelift. Take 3

#82 2006-06-10 19:53:44

Re: Admin Facelift. Take 3

#83 2006-06-11 17:43:14

Re: Admin Facelift. Take 3

#84 2006-06-11 18:35:12

Re: Admin Facelift. Take 3

Board footer