Txp Admin Facelift

Mary · 2005-08-12 01:43:54

Before. After: edit post, dropdown menu, publish button, message format, possible warning format, area hover, action hover, form label hover (Oct 27)

(Thanks to ImageShack for hosting the screenshots.)

download

Notes

The one in bold is the latest one I worked with, but I keep the others linked so you can see the progression. From now on there will also be additions/changes based on input from people actually trying to use the interface, rather than just me.

kemie, Philippe and others are helping me out with this, and others are welcomed and appreciated.

If any advanced users want to have a copy of the modified/created files to offer other suggestions, as well as try it out to see how it feels (looking at just a static image is difficult to judge, I know), email me and I’ll either email you a zip of the files for you to drop in or give you an address where you can download it – your choice, let me know when you contact me.

I really don’t want to just offer it for download for anyone and everyone, because of this being experimental and evolving, I don’t want to get stuck having to support this in any fashion for this reason. :)

Idea creds: Philippe and Rob’s pre-existing work, and those who’ve contributed their opinions, ideas and sometimes even comps (Jon, Philippe) or portions of html/css (Philippe), in this thread and also via emails back and forth.

I am hoping we get multiple categories at some point, in which case I like Rob’s implementation of the multi-select form input as opposed to, say, checkboxes (ala WordPress). I think it would fit in nicely: Multiple Category Support in Textpattern

Ideas and opinions are most welcome, either via this thread or contact me by email, so don’t be shy.

Header

It is still “Txp-ish”, the background an orange gradient.
“Textpattern” header image is replaced with some lightly styled text.
View site, now appears on the left, linked using the site’s name.
Username and logout at the top of the page as well.
Just in case you click “logout” by mistake, its a JavaScript prompt (“Logout?”). Similar for “View Site”. That might be helpful or just annoying, like everything else we see how it goes.
Replaced side tabs with buttons and moved them to the right-hand column. Current view’s button is disabled. Don’t hide the buttons, make them smarter.

Tabs

They are reborn. Hard to explain, take a peek.
They are centred, which seems to be okay from those I’ve heard from.
Operate more correctly with existing privileges.
Tab looks more obviously like a tab.
Tinkered with hover styling.

Other

CSS signature applied to admin header.
Event-based id for the body tag.
Scalable font sizes. Philippe suggested a new preference to determine the base font size (the size of “regular” text), and we could pre-populate it with a reasonable default (say, 12px). I’ve started including this in the zip so it can be tested (see more under “Font/text”).
Dropdown is styled.
Nice little permlink to post ala zem_article_info
Plugin tab nicely wraps the plugin preview code so the page does not scroll horizontally or vertically.
tagbuilder link lists use headers and unordered lists
tagbuilder window adjusted to match, layout placed in its own template file

Tweaks and fixes

Dropped JavaScript and CSS into separate files.
Removed some css redundancy, and some of the inline styling of the write tab.
Dropped the header and footer into individual files as well, with minimal but sufficient markup to support easier styling of admin interface (either private or for distribution).
Tweak red submit button borders so it matches the style used by the existing grey buttons, appears a little less harsh looking.
Fixed the left-hand side panel so that it doesn’t caused the whole layout to shift depending upon whether Advanced Options or Recent Article list is visible or not; hide/show is a lot more seamless.
All admin popup windows are auto-centred.
CSS validates, new txp_article.php validates.
Form labels are “clickable” and change colour on hover.
Various CSS/markup fixes for various browser/platform bugs, courtesy of Philippe.

Font/text

What do you think?

So, “what font size did you want”? Results thus far: 26 votes total

The current 11px is just fine.	15
11px is just a little too small, make it 12px.	6
None of the above, make it smaller.	3
None of the above, make it bigger.	2

Last edited by Mary (2006-06-05 04:09:53)

andjules · 2005-08-12 02:46:57

oddly, i prefer:
the softer horizontal tabs & submit button;
but
not the vertically oriented tabs, even though they ‘fit’ with the top tabs
I actually never really like vertically oriented text – especially at microfont size – somehow they seem a touch less legible now. and the gap between them & the text area seems a little more noticeable.

but i definitely prefer the softer top tabs now that i’ve compared them 10 times.

Dean · 2005-08-12 06:31:11

Unfortunately, on my mac anyway, the shadow delineations all but disappear, making the file-tab visual met’phor kind of, well, nonexistent. I’m definitely open to a redesign of the tab system however.

sekhu · 2005-08-12 07:02:12

perhpaps yu can get robs permission to integrate quick pik into the interface?

Jeremie · 2005-08-12 07:14:03

I prefer it in “before”.

phiw13 · 2005-08-12 08:47:57

> Dean wrote:

> Unfortunately, on my mac anyway, the shadow delineations all but disappear, making the file-tab visual met’phor kind of, well, nonexistent. I’m definitely open to a redesign of the tab system however.

Dean, have you seen this one ?

Mary,

Given the choice, I prefer ‘before’, although I – personal opinion – find both kind of ~~chaotic~~ overloaded would be a better word.

Last edited by phiw13 (2005-08-12 08:48:57)

NeilA · 2005-08-12 09:28:56

The ‘Empty Spaces’ design uses a much more readable font (to my eyes)… will try it this weekend
Otherwise I would stick with the ‘before’.

On a related note, I love the ‘QuickPik’ functionality. but get really frustrated with the slight delay when the screen refreshes, which shifts the screen contents down as it loads (this is on FF in Win XP).

wilshire · 2005-08-12 20:01:19

As long as we’re talking redesign of the tab system, hows about something like this

I’m not necessarily stuck on this specific look but having shortcuts in the header of each page to edit my recent articles, pages, styles and forms is a helluva time saver.

NeilA · 2005-08-12 21:50:30

As I said Rob, I love the functionality of Quikpik, and I do have it set up to hide the tabs – the only two tiny problems I have are:

The delay in redrawing the screen, as Quickpik takes a small amount of time to load the menu (or whatever it does). On my system, this causes the screen to draw, then move down as the menu kicks in. Probably not something you can do anything about, but worthy of a mention.
When I have (for examples) many forms, the menu drops off the bottom of the browser window, and makes it hard to get to the bottom items. This happens more when I’m working on my laptop with a lower res screen.

But please know that I have it installed on all 12+ TXP sites! It’s just great.

Cheers

Last edited by NeilA (2005-08-12 21:51:32)

rene · 2005-08-12 22:42:11

‘after’ is fine, but without the rounded publish button.

bizartist · 2005-08-12 22:51:49

Wow, I’m really liking the look of this one actually

thebombsite · 2005-08-12 22:53:39

I’ve just installed it. Very nice indeed.

Textpattern CMS

Textpattern CMS support forum

#1 2005-08-12 01:43:54