Branding the TXP Admin Interface for Clients
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.
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:
- 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.
- Remove the tabs and dropshadows. They just seem … oldish.
- 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:
Get the Files
The package includes three files. It would be prudent to back up your default files before overwriting them with these new ones.
- textpattern.css overwrites the file in the directory /textpattern/.
- txplib_head.php overwrites the file in the directory /textpattern/lib/.
- logo_template.psd is a Photoshop file that is sized for the logo inside the colored masthead.
- 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.
- 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.
Update to 4.0.8
The CSS file has been updated to work with 4.0.8. Also tested on 4.0.7 without any issues.
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.