I skin things. A lot of things. Being a web developer tends to put me in this particular situation quite frequently. It'll be a Monday like any other, I'll be relaxing at home listening to some @imogenheap and drinking Community, when suddenly I get a call from a client telling me they love their new design, but have just gotten this spiffy software that they really want to use and it needs to look exactly like their existing website.
I'm not sure about all of you other designers out there, but I never shy away from a challenge! I affirm to them on the phone that, yes, I can skin whatever software it is that they need. I then set out on a GoogleQuest to see if it's been done before and if there are any how-to's on the subject. To date, I've skinned the following applications:
- phpBB
- phpNuke
- InfusionSoft Shopping Cart
- Dydacomp's SiteLINK E-Commerce (they said that our skin of their software was so invasive that they had to refuse technical support. We had to re-write so much of their program code that their own developers couldn't find their way around it. Looked amazing though!)
- Wordpress
- Podcast Generator
- MySpace
- CuteNews
- and various other proprietary softwares, just to name a few things.
Now, before you just go off and find a how-to guide for skinning your MySpace (I recommend Joe Burns' guide, found here), let me give you a few tips and tricks I've learned throughout the years.
1. Remember CSS Inherits
This is so important to remember! CSS will always inherit the last thing it gets in regards to something. For example:
<style>
div.parent { color:#fff }
span.parent { color: #00ff00 }
</style>
And then in my HTML document I have:
<div class="parent"><span class="parent">Text Here</span></div>
Then my output will result in lime green text. Why? Because whatever you declare last is what the CSS is going to use. Most people's problems with stylesheeting stems from this sort of error, not realizing that their CSS contradicts on the page. Now if you get creative, you can use this inherit aspect of CSS to your advantage by declaring it later on the page somewhere in the body tag.
2. Can't reach something?
Lets say you have the ability to insert some CSS on your page, but you don't have the ability to touch certain things the company puts on the page (such as logos, watermarks, etc), but the way they have it positioned really screws up your layout, or they made the image with a white background instead of a clear one (because who uses a background other than white!?) and it just looks awful! What can you do about it? You don't have access to that part of the HTML code because your theme capabilities are limited! Take a moment to look at the source code of the document, use something like Chrome's Inspect feature - some developer tool - and see what the ID or Class of the object is. I promise you it will have one, they always do. Then, in your css, simply re-declare that class to be positioned in the middle of the page with a z-index of -500, or better yet: display: none;
3. Always Look At The Source!
Make sure you always check out the source code of the document in preview mode to see where exactly your HTML is being inserted. Try and figure out if you can do a little "Creative Engineering" with your source code. Maybe you can close off some of their tags early and open your own? You never know what you can do with a theme until you really play around.
4. Image Control
I recently had the pleasure of making a theme for InfusionSoft's e-commerce solution. I was pretty proud of myself with the work I did, and while working I had a few great ideas. You see, it came with some stock images and about 3 places for me to input some HTML. Well the stock images were forced in place on the page with CSS I couldn't control (unless I redeclared), but more than that, the hyperlinks they went to were bolted in place and there was no way I could change them or finagle my way to them. What they did do, however, was give me the ability to upload my own images to replace their locked down ones. So my solution was this: Download their "return to cart" image (see, we were only using their checkout process and I needed to redirect the 'return to cart' to a page other than where it went), and then make a one pixel by one pixel clear image and upload it as my custom image for return to cart, thus rendering their anchored link invisible. And then, in one of the sections where I had HTML control, I simply added my own image link complete with their 'return to cart' button that I had uploaded to another server and remote called.
5. Inline Styling
I know its not correct anymore and its supposed to be depreciated and everyone thinks its ugly and messy (except for you guys, non-AJAX javascript crowd! Props!), and if you do it enough you might have a very angry Dr. Jeffery Jaffe show up at your door; but in the world of no-holds-bar custom theme design, everything is fair game. Its a messy take-no-prisoners war to the death (or, at least, the best theme design), where anything goes as long as you come out on top! And a necessary evil among all of the brutality is the evil of inline styling. When all else fails, the <span> tag wont!
<span style="position:relative;top:0px;left:0px;padding:15px;margin:20px;background-color:#000;border:30px dashed #00ffff;">This is an awkward text box!</span>
Don't be afraid to use it, because I can guarantee you that the Germans aren't.
Posted on
Tue, August 31, 2010
by Remy Sheppard