graphicpush

Part of the 9rules network.

Branding the TXP Admin Interface for Clients

I firmly believe in Textpattern as a solid, client-ready product. I have designed and deployed dozens of TXP-powered sites for clients of all shapes and sizes, from complex government agencies to local artists. Its usability is paramount to this success. When clients first open the administrative interface, they get it. I’ve even had a few like the software so much they bought Textpattern Solutions without realizing I was a co-author.

Over the past few months I have been playing with the admin mod cobbled together by various authors. While I liked the core look and feel, I wanted to adapt it to be something more neutral and brandable, reducing the emphasis on Textpattern in favor of the company actually using it.

My goals behind this work:

  1. Take advantage of the work Dan Hoy, Azuntik, and most recently, milkshake have done in getting the interface out of the stuffy tables of yesteryear and into the chic, semantic HTML of today.
  2. Remove the tabs and dropshadows. They just seem … oldish.
  3. Make the solution more personalized — make the client feel special, as if its their CMS, not just a slam-bam-thank-you-ma’am Textpattern install.

Most of the hard work had already been done for me by others. However, I stripped their redesign one layer deeper by simplifying the CSS to use no images — just colors and a single logo file that are easily brandable. As an example, here is a screenshot of Textpattern driving Anthos Group:

screenshots of txp admin mod

Get the Files

download files

Installation

The package includes three files. It would be prudent to back up your default files before overwriting them with these new ones.

  1. textpattern.css overwrites the file in the directory /textpattern/.
  2. txplib_head.php overwrites the file in the directory /textpattern/lib/.
  3. logo_template.psd is a Photoshop file that is sized for the logo inside the colored masthead.

Customization

  1. Create the Logo
    Create the logo using the Photoshop file. The height should be 40px, and the width no more than 600px. This allows for plenty of branding. Personally, I like to add the logo, and then add some text such as “content management system”, kind of like the screenshot above. Save the logo as a transparent 24-bit PNG. If you are still in the paleolithic age of browsing and your antinqueware does not support transparent PNGs, save as a GIF or JPG and make sure the logo’s background matches the color you choose for top band of color. Upload the final file through FTP or through Textpattern, and make a note of its final destination.
  2. Edit the CSS
    Open textpattern.css, and look at the first two definitions. The first specifies the background color of the top masthead, the second the location of your brand spanking new logo file. Tweak and save.

No edits need to be made to the txplib_head.php file. It simply creates the semantic HTML for the navigation that allows for the new styling, and is identical to the original file noted above.

I can offer limited support for this. From my testing on three or four different sites, it handles must plugins with ease. It has been tested rigorously in Opera and Firefox, and does work in IE but with slightly less sexiness. I assume it works fine in Safari on a Mac, but I don’t use Macs so I really have no way of knowing for sure.

Creative Commons License
Mod to Textpattern Admin Interface by Kevin Potts is licensed under a Creative Commons Attribution 3.0 United States License.
Based on a work at textpattern.org.

Comments.

Shane
wrote the following on Wednesday May 21, 2008

You are a genius.

This is seriously awesome. I can’t wait to implement it on the church site I’ve got with TXP under the hood.

Shane
wrote the following on Wednesday May 21, 2008

Implemented.

This is just as easy as you’ve explained it here. Thanks for doing all the work.

Micah
wrote the following on Thursday May 22, 2008

Kevin, this came along at a great time. I’ve frequently wanted to customize Textpattern’s admin interface, but I’d usually held back because I wasn’t sure how recoverable it was if I goofed. Man, my clients are going to love me, now.

Thanks!

Markus Merz
wrote the following on Saturday May 24, 2008

Great. Sent to del.icio.us. Thanks!!!

Christopher
wrote the following on Monday May 26, 2008

Kevin, slightly off topic, but what do you think of the current and future states of Textpattern? It seems like a lot are jumping ship while at the same time a new push for TXP direction and promotion is being made. I’m sorry to hear of Mary’s departure and have concerns. What is your take on xPattern?

Kevin Potts
wrote the following on Monday May 26, 2008

I don’t think too many are jumping ship … I just think people panic when one prominent person leaves. There will be more to volunteer.

I think the giant push for revitalizing the Textpattern homepage is awesome — I have even volunteered to help.

I’m not sure xPattern will go anywhere. I don’t understand why these disgruntled developers don’t focus their efforts on plugins. If it does eventually have a beta version I’ll give it a shot, but until then it’s not even on my radar. I need a tool I am confident will work for clients long-term.

Christopher
wrote the following on Tuesday May 27, 2008

Thanks, that’s good to hear. I’ll put my worries behind and continue to use Textpattern.

This is a great customization article, btw. I’d take advantage of it if I hadn’t just revamped the admin interface on my own (using the same mod you started with).

ncus
wrote the following on Saturday May 31, 2008

Sweet.. download it save it, and bookmark it.

Thank you for sharing.

Lawrence Salberg
wrote the following on Sunday June 1, 2008

This is interesting. I just uploaded it on one site and it does look cleaner.

I’d be interested, however, to know why this is an improvement in so far as clients are concerned. I like the idea of “branding” it, but is it faster or something?

The main problem I’ve seen with using T/P for clients (and I use it for all my non-ecommerce clients) is that you have to gank the permissions file to keep clients out of the forms page. Just choosing copy editor isn’t enough. Of course, the problem is easily solved by just uploading a different version of the permissions folder for each T/P install and then setting the client as a copy editor. So far I haven’t had a client complain about being a lowly “copy editor”, but I’d like to gank the thing further to call them properly as “client”.

A pretty branding scheme for their own company would nicely complement that.

BTW, something weird with the tab control on this comment form. After the website field it tabs to the image on the upper left rather than to the Message box.

Viking KARWUR
wrote the following on Wednesday June 11, 2008

Hey, Thanks!
TXP helps my freelance business… :)

Nicole
wrote the following on Saturday June 14, 2008

I love this. As a fairly new TXP user, I’m starting to like it the more I use it and see add-ons like these.

I just have one question though, is there a way to change the colours of the links (i.e. Textile Help, Insert Image, Advanced Options, etc.) along with the headers (Status, Sort and Display)? I’d love to change it from the default blue and green if that’s at all possible.

Gary Horsman
wrote the following on Sunday June 29, 2008

Works great except in the new Firefox 3 on the Mac. Any chance for an update?

Add Your Comment



This is not spam
Remember
wrote the following on Thursday August 21, 2008

Metadata.

  • Posted: Wednesday May 21, 2008
  • Category: Textpattern
  • Comments: 12

Synopsis

Over the years of implementing Textpattern into client sites, I’ve always secretly pined for a simple way to customize the interface so it meshes with the client’s brand better. Recently, I was able to build off the work of others to create an easily editable CSS file that helps orient the admin section toward the company actually using the CMS and away from the default Textpattern look and feel.

Tags

, , ,

Socialize



Sponsors

Highrise

Job Opportunities

Full-time and freelance job opportunities available at Authentic Jobs:

Post a job and reach web professionals everywhere.