::[ Empty Spaces ]:: Wandering through, a journey within.


Textpattern Administrative Interface Restyled

This article has been updated.
Scroll down to the end for the latest.

Because there is not much to do on a Sunday, we revamped slightly the administrative interface of Texpattern. Mainly, we optimized the stylesheet and reworked the tabs, as we as tired of looking at an all yellow interface. Long time ago, we already had changed most font-sizing (the default sizing of 10/11px being way to small for our old eyes). Everything is now using ems. The styling for most input buttons (input[type="submit"]) has been deleted, as it sometimes fights with the styling of those buttons in our user stylesheet (see this article). Based on this thread on the Textpatern users fora, the tabbed navigation has been reworked into unordered lists, instead of that messy set of nested tables. New background images for the tabs have been created: better blending into the environment, relatively flexible to various font-sizes, a change of colour. It looks like this in Firefox/OS X. Click on the screenshot for a larger view.

Textpattern administative interface preview

The revised stylesheet and image files, and the modified Textpattern file are available for download. This has been tested in Firefox (my default browser), and works equally well in Safari and Opera 7.5. Untested in IE6 Win (who use that browser, anyway ?), it should work, more or less; we migh have a look to improve it if needed. If blue is not your type of colour, the source Fireworks files can be requested, but you’ll have to ask it nicely.

It is not perfect yet, but as lots of things are hardcoded into the Textpattern files, they’re not that easily changed.

Update, January 17, 2006, Textpattern 4.03

I’ve made a new version, tailored for Textpattern release 4.03. It is based on work by Mary and my previous package. Download: txp-facelift.tgz. See also the discussion thread in the Textpatteren forums.

Update, November 3, 2006, Textpattern 4.04

The above package, update for Texpattern 4.04. Download txp-facelift-404.tgz.


Comments

  1. Comment by: agk — 12.09 2004 - 23:56 UTC+9   [ # ]

    Thank you very much!

  2. Comment by: klaus — 13.09 2004 - 02:01 UTC+9   [ # ]

    Very cool, thanx!
    Two points though.

    1. In .css line 14 there is a ”’” missing.
    2. I like that the TEXTAREA also has a greybg so i added “background:#f1f2f3;” to line 237 in the .css file /Klaus b

  3. Comment by: Philippe — 13.09 2004 - 14:10 UTC+9   [ # ]

    Thanks Klaus, fixed now. I’ll soon post an updated version, more streamlined, and more ‘Windows’ friendly, as far as font-family is concerned.

  4. Comment by: Mary —  2.10 2004 - 08:34 UTC+9   [ # ]

    I think there’s something missing from the download. All it had in it was images, a stylesheet and txp_head.php (and the admin doesn’t look right).

  5. Comment by: Philippe —  4.10 2004 - 09:21 UTC+9   [ # ]

    Mary, the files included are not a full Textpattern package, just the files I modified. The css file replaces the existing textpattern.css file, the images go into txp_img folder and the txplib_head.php file replaces the existing one in the lib folder, all within your textpattern directory.

  6. Comment by: David — 12.02 2005 - 02:59 UTC+9   [ # ]

    In IE6 the tabs are not side by side, but under each other.

    Should be

    tab1|tab2|tab3

    but displays as

    tab1|
    tab2|
    tab3|

    Can’t quite figure out what the problem is :(

  7. Comment by: David — 12.02 2005 - 03:09 UTC+9   [ # ]

    In order to work properly in IE6 it should read:

    #botnav li, #topnav li {display:inline;}

  8. Comment by: Philippe — 13.02 2005 - 09:41 UTC+9   [ # ]

    David, looks like I left some IE 5 Mac only code accessible to IE Win, Duh!.

    You can comment out the line
    #botnav li, #topnav li {display:inline-block;},
    and a bit lower there is a line
    #topnav ul>li{/* styles */}, change that to
    #topnav ul li{/* styles */}.

    I think, I don’t have access to IE or Windows from where I am at the moment. I’ll test more tomorrow, and upload a corrected package.

  9. Comment by: AkaXakA — 18.02 2005 - 04:46 UTC+9   [ # ]

    It keeps getting better!

    You’ll want to put a stripe through v2, as I nearly downloaded that instead of 2.1

  10. Comment by: Philippe — 18.02 2005 - 07:14 UTC+9   [ # ]

    AkaXakA, done! And thanks.

  11. Comment by: thomas — 24.02 2005 - 01:06 UTC+9   [ # ]

    great style, but there is a little bug with 1rc3 – take a look at this screenshot. i’m using firefox 1.0 btw.

  12. Comment by: Philippe — 24.02 2005 - 07:44 UTC+9   [ # ]

    Thomas, I know, and have it fixed in my local copy.
    in textpattern.css, search for label and comment out, or delete, the following: float:left; width:25%. That solves the problem.

  13. Comment by: thomas — 24.02 2005 - 15:12 UTC+9   [ # ]

    thx, it works now like a charm.

  14. Comment by: Philippe — 24.02 2005 - 15:30 UTC+9   [ # ]

    Cool.

    Once Txp 1.0 is released, I’ll put up an updated package.

Commenting is closed for this article. If you have anything to share, feel free to contact us.