SuperSatellite

Filling a Wordpress Sandbox

// April 2nd, 2008 // 18 Comments » // CSS, Scripts, Web, XHTML

With the debut of my new theme, I have decided that I will go ahead and make it available as a downloadable theme for Wordpress 2.5. This will take some time, as obviously I want to make sure everything works, and take out all the stuff that makes it specific to me. This also raised the question of what about people who do things that I don’t? Building a theme custom to one’s needs is one thing, but making something that is flexible to everyone’s is another.

To address this, the answer was simple. Development Sandbox. Easy enough. But the kicker was content. I needed a good base of different content, formatting elements, comments, categories, etc. On the Wordpress Theme Viewer, they have just such a site set up. When you test themes, a bunch of test data is displayed in the theme so that you can see how different elements interact with it. But, to my surprise, there was no where that you could download this data at to load into your own site. No demo site database, no Wordpress eXtended RSS (WXR) file floating around, and no one seemed to have an idea of where you could get it.

Some suggested copying my current site. Others just said to toss some junk in. Quasi-reasonable, both answers, but that’s not a good solution. I want something consistent that I can use over and over. Using my own site content isn’t a good idea, because I doubtlessly do things that others don’t, and don’t do things they do. Random content isn’t thought out enough, and might miss some elements that need to be tested. My solution was to create my own site, complete with seeded content to test formatting and display. It comes with pages and sub-pages, categories and sub-categories. There are comments, there are formatting elements. In short, most everything to make sure that you get all your formatting elements covered when designing a Wordpress theme.

I also want to make this available to everyone, and will endeavor to keep it up and make it better as needs grow. Please, feel free to make comments or suggestions, and I’ll incorporate new things into it as they are made. I will also entertain the idea of creating an entire SQL file of a site, for those wishing to go that route rather than importing WXR files. WXR files are limited in what they can contain, so it won’t bring in things like blog names, descriptions, links, link categories, and other such things.

This is version 1.0 of the SuperSatellite WordPress Content Framework (WPCF for short). It is being made available as a Wordpress eXtended RSS file, which you can import into your empty Wordpress install through the Import page under Manage in Wordpress 2.5. I created and tested this in 2.5, though it may work in other versions. If you try it with others, let me know if it does or does not work.

Changelog

• 1.0 (08.04.02)
  • Initial release

For your viewing pleasure

// March 31st, 2008 // 2 Comments » // Digital, Web, XHTML

Hey look, the theme is done! At least, done enough that I’m ready to start taking feedback. Use the comment form below for that. Even if it’s just to say “neat colors” or “I h8 u kthxdie.” But really, feel free to let me know what does and doesn’t work for you. I’ve tried keeping things simple, but engaging enough to make it worth looking at. I’ll also consider making it into a downloadable theme, if people are interested anyway. But I am very interested in what you think of it. I’m not really a designer at heart, but I do think this is a big improvement over the last layout.  I have one more change slated for the main frontpage, but I’m battling a vicious, nasty little bug, and I’m not gonna hold up the theme because of it, so that part’ll get done when it gets done.

I have not yet upgraded my blog to the famed Wordpress 2.5. No, instead, I am taking the cautious route for a change, which is a little unusual for me since I normally am not afraid of being bleeding edge. The thing is, I am dependent on a couple plugins I’d rather not lose. And having just finished this theme, I want to make sure all the hooks and functions I call aren’t being deprecated. I did help a buddy get going in 2.5 last week though, and it looks okay.  I just wish they’d done more with care towards backwards compatibility.  In the end, once I upgrade, you actually shouldn’t notice. So, you probably don’t really care. Sorry to waste your time on this paragraph. I love you for it though.

On that note, am I the only one that doesn’t like the WordPress site?  It always feels like content is out of date/sync with other parts, and the support areas are painful to navigate and find what you need.  I feel like I get led in circles a lot.  And the forums always come across very hostile, even those users marked as “moderators.”  That might just be me, but it always seems like for every question with a good answer, there is one with a snarky one and one with no anwsers.  But, at least the wiki has good information, which is all I normally need.  But if you want my advice, avoid their forums like the plague, and if you can’t, don’t even dare asking a remotely vague-ish question.

I am continuing to try to stick with an active social web presence. My attempt to live mostly through my NetVibes page didn’t go so great though, but I can say it’s sped things up in a couple places at least. It’s just that there’s too frequently not enough info in the feeds I’m reading, so I find myself visiting the sites about as much as always. I did do a new thing in the sidebar for my blog though, with the integration of Profilactic. Which is nothing like what you might think. It has nothing to do with sex that I have discovered (so far), and trust me, I’m looking. It’s a site designed for lifestreaming. That is, coordinating feeds from all your various social web stomping grounds. You can also use it like I did at the right to make a nice link list that can be styled up so people can see you in other areas. Then it adds pretty icons and all that jazz without you needing to screw with it (well, technically you do have to screw with it if you don’t like their default styling, which I didn’t, but it’s classed well and can be changed with CSS (Cascading Style Sheets) easily). At the site, it then creates a mash up of all the sites’ RSS feeds that you can send to people who want to keep with you on various fronts, but at one source. One feed to rule them all, one feed to bind them. Stupid hobbitses.

IE Collapsible div Bug

// March 13th, 2007 // 2 Comments » // Web, XHTML

One of the challenges of modern web design is designing to standards that haven’t been truly standardized. Nearly any web designer will agree that the concept of CSS (Cascading Style Sheets) is great, however, anyone who has done a true XHTML 1.0 Strict and CSS layout is familiar with all the discrepancy that exists between browsers, which is no fault of the code. This is painfully obvious in Internet Explorer, of course, which balks at anything not designed with Microsoft holding its hand (aside: it’s for this reason that I truly believe that web developers should boycott any designing that requires special testing or coding to work properly in IE (Internet Explorer), but that’s a rant for another time). Maybe that’s not very fair, but in all seriousness, Internet Explorer is a haven for rendering bugs.  So, it is inevitable that you will run in to a situation where you have to rack your brain to get around an inconsistency. I was faced with just such a situation recently that has a simple solution, but one that took some scrounging to solve. I present it here for anyone finding the same issue.

Challenge: W‭ithout using tables, create a template that will sit in a layout that collapses when empty, and expands when content is plugged in.

Yes, I know there are a number of brilliant ways to make this work with simple scripts, particularly something Javascript/CSS based. The thing is, the environment this was being used in required a nearly idiot proof editing means, and there was no access to the programming environment to create a backend to handle it. Web content editing was managed through Macromedia Contribute, which those familiar with it will tell you is a terrible little piece of software for content management. But, we work in the environment we have.

The base layout template extends a background left to right, width agnostic, with a centered, fixed-width content region. So, at the point where the alert should appear, I created a div:

This sets up the div that will extend the full width of the browser and display a flashing background. Next, we need to set up a div that will be the fixed-width in the center.

At the next step, we’ll start to see the problem posed by the browser discrepancy in Internet Explorer. We place a simple line of SSI (Server Side Include) code that will grab the file that holds the alert message and place that within the display region:

With the exception of IE, this works exactly as expected. When there is text in /elements/alert.htm, the div expands for the content within the overall page layout. When it is empty, it simply collapses down into nothing and is unseen. But then there is IE. As you can see in the screenshot below, even if the alert file is empty, it wants to try and render out the div.

It turns out that this is one of the many bugs  IE has with respect to rendering out empty elements.  When an element has no height defined, it defaults to producing an element that is a single line-height tall, regardless of if there is content there or not.  The original solution to this problem was a rather sloppy application of negative margins and added padding, which is more trickery than proper coding. After some research into the issue, I managed to scrounge up a page that appeared to mention the same issue over at the Webmaster World forum that provided a far more elegant solution. The trick is to include an empty comment in the layout. When IE renders out the divs, it is able to understand that the inner div is actually empty and will seal it up. The finished code, which requires no fancy CSS juggling, appears as thus:

And with that, problem solved. This code creates a cross browser, collapsible div when empty, and expands with content. Ideally, this would be better done by writing a script into whatever content management or template handling system you use that will write in the whole chunk of code when needed, and leave it out when not, or toggle the display value in the document’s stylesheet which would eliminate the need for the empty comment trick entirely. But, as in our case, that isn’t an option 100% of the time.