Home › Discussions › Campaign Portal Building › Calling on all CSS-savvy Web designers - Create your own campaign theme! - Campaign Portal Building Discussions on Obsidian Portal Community Forums
Calling on all CSS-savvy Web designers - Create your own campaign theme!
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
h2. The approach
The first pass we'd like to take is CSS-based theming and skinning. We've gone to considerable effort to avoid table based design and have added divs, spans, classes, and ids with great abandon.
Our plan is to approach this similar to the "CSS Zen Garden":http://www.csszengarden.com/, where each theme is simply a CSS + some images. Further, rather than directly uploading your own CSS, there will need to be an approval process. We only want quality themes, not your average MySpace eye-bleeding background.
h2. How to start
Don't run out and fire up Photoshop and Illustrator just yet. We'd like to take a little time and gather some feedback on our underlying markup first. Please take a look at the source (specifically, on campaign pages like adventure log posts, wiki pages, npc tracker, and such) and scrutinize our divs, spans, classes, ids, and other css-relevant information. Post your thoughts and criticisms here so the community can comment. We'll try to incorporate all the critiques into an update or two. Once we've scrubbed our HTML sufficiently, then we'll open the gates and start inviting theme submissions.
h2. The fine print
* This will be a premium-only feature.
* If you submit a theme and it gets accepted, then you will get a designer credit along with some free subscription time.
* Submitted themes will be available for everyone to select from. Maybe we'll offer private themes in the future, but not just yet.
* Don't use copyrighted artwork in your themes!
* By submitting a theme, you give us the right to use it and let others use it. So, don't come back and sue us when you see someone else using your theme!
Further, I'm toying with the idea of allowing individual campaign banner graphics, like the ones in these campaigns:
* "Quiet Professionals":http://www.obsidianportal.com/campaign/qp
* "Rain Like Blood":http://www.obsidianportal.com/campaign/rain-like-blood
- Sorry to pick on you, Rob, I just like your stuff :)
If anyone has any ideas about banner sizing or where to stick the img tag in the HTML, please let us know. Along with the individual theme idea, I'm guessing that each theme should come with a default image which can be replaced.
Then again, maybe I'm getting ahead of myself and should just focus on the themes for now.
But the banners are not that hard to make. I saw Rain Like Blood... ahh no, it was the previous featured campaign, and thought: I won't to do that. Now I never touched textile before finding Obsidian, and never used before half a year ago... and it took my 10 minutes, 11 tops, to make a similar banner!
Now I really wanted to make a menu par in the party wiki, and I think I could - but: I am afraid that I make the wiki too complicated for my players... and I want player involvement before style. *So my request would be: Please retain the excellent usability on the site!*
Now I really really hope someone will make a spacy CCS stuff - otherwise ya'll force my to learn that stuff myself ;) - (I think my brother knows the programming, and I can do the graphics)
...Troels
ps. also thanks for the fav Micha, and good rating! I will(after I hand inmy master thesis) make.... *drummroll* a english part of my site, to highligt some goodies in english, cause I feel all selfish having my site in danish!
I am always flattered when people say we have good usability. In my eyes, all I can see are the flaws. It always seems clunky and hard to navigate, but then again it's better than everything else out there (which is pretty much nothing) so we've got that going for us.
I'm very jealous of all the graphic artists out there. I'm completely useless when it comes to artwork, Photoshop, Illustrator, and all the rest. That's why we're pushing the cool theming off on all of you, since it's not really our strong point. We'll make sure everything works, and you guys can make it all look good.
...Troels
Taking a look at your HTML, here are my comments:
* First, you might want to add some empty "utility" div/spans, like CSS Zen Garden does (see the very bottom of their source code), for the purpose of hanging content off of which lies outside of the real page content. This is useful for doing things like placing graphics that hover over the page content and things like that.
* In a similar vein, you might want to double-up your important div blocks, since some techniques need more than one level of selection to hang off of. I wouldn't go so far as to go four levels deep (which some people use to make rounded corners); two should be sufficient in nearly all cases. And I'd only do it if you could handle it semantically (i.e., "container" and "content" or something - see the CSS Zen Garden source for examples).
* Your div id's look really clean and semantic - way better than most sites! And practically everything is tagged with an id or a class - that will make it easy to target them, and you'll be able to target everything. Good work there. The only exceptions to semantic labels I saw were "right-column" and some stuff that referred to tabs. (Oh, and in your footer you have some "floatleft" and "alignright" classes. I don't know if you're going to let people style all the way out to your footers, but it might be a good idea to make those semantic regardless.)
* There's some h4's sitting around where there should be properly semantic divs instead. That's not a heading that is part of the document content, really, so I'd just style that instead of relying on an h4, since people will likely want to style their content h4's. You don't want your nav content to break when someone styles their fourth-level headings for the page content.
* I would add classes to your body tags for the different types of pages ("campaign-page", "item-page", etc.) so that you could write selectors for particular page types without having to split it up into separate CSS files. And then I would add an ID tag there for particular pages, so people could target particular pages with their CSS.
* I would make your "top-navigation" links a list of list items instead of just a series of hyperlinks. That way, they could be easily selected separately with CSS selectors. Similar suggestion anywhere else you may be doing something similar.
Hope this helps. Let me know if you need any other help; I do web development as my day job, so I could probably help you out some in this effort. You've got a great little site going here, so I'd like to see it flourish.
Also, we've tried to go through and add container divs to most of our content pages ("blog_post", "wiki-page", and such). Are you suggesting adding the classes to the element?
The ID-per-page is interesting. I've seen that sort of thing on Drupal and it intrigued me. You can exactly style individual pages. I don't know if we want to go exactly to that level of customization, but it's a good idea.
Hopefully, we can get this rolled out soon. We've been busy in real life lately, but that's the way it goes :(
Container divs around content pages would achieve basically the same effect so long as it's the first and only child of a body element, so, either. If your container divs aren't strictly the sole child inside the body tag, though, there would be a difference. (Heck, maybe you should put them as attributes in the HTML tag instead of the body tag, since the html tag can be styled, as well...)
Regarding going to that level of customization, my guess is that this particular feature wouldn't take much overhead or development on your part, since, presumably, you've got a unique identifier in hand when you render the page anyway - you just need to echo it into the body ID attribute.
But yes, that would be nice. It's been asked for and discussed in depth in several other "threads":http://forums.obsidianportal.com/comments.php?DiscussionID=950&page=1, none quite as old as this one, but has yet to materialize.
I LOVE THIS IDEA! MAKE IT SO!
Of course, since I am not CSS-savvy, someone else will have to make it so.
Now, I play the waiting game...