Micah
This is a place to discuss any thoughts related to the Custom CSS / Campaign Theming that we're working on. In a nutshell, we're exploring the option of allowing people to define their own campaign-wide CSS rules. We've got a working prototype, but we'd like some more feedback before releasing it to everyone.
If you're not part of the beta, don't worry, we'll be releasing it soon enough.
If you are part of the beta (or have ideas), think about these questions:
* Are there any malicious CSS tricks we need to be especially aware of? We do some sanitizing and sanity checks, but CSS hackery is not something I'm terribly familiar with.
* What changes to the markup are necessary to support maximum flexibility in theming? We're happy to add extra divs, spans, classes, ids, etc, etc. If there's a particular CMS out there that does a good job with this, please point us.
* How can we roll this out (new markup, specifically) without destroying existing campaign theming? Do we need to support both the old and new markup styles? That would be a real pain on our end, but I can understand if it's necessary.
* Is there anything else we should be considering at the same time? What am I missing?
Thanks again for all your help!
Comments
The z-index discussion is good. We may implement something along the lines of limiting the z-index values, but as discussed someone can just inline style what they want. We really don't do a lot of pre-rendering or manipulating. We basically take the HTML and CSS you give us, do some basic sanitizing, and then send that to the browser. We mainly look at structure and don't consider semantics. Trying to determine z-values of particular elements is much more semantic than anything else we do. It's a tough call, as I don't want to leave open known vulnerabilities, but at the same time I hate the idea of spending lots of time fighting a war that's only in my head. So far we've been blessed with non-malicious users (and very awesome users, in fact) so I hate fighting shadows.
I like the idea of a final, mission critical stylesheet. I was also worried about people making the site unusable for themselves, and this would work well to prevent that.
Transparent png for the logo is a good idea. Not sure why we haven't done that yet.
Button vs link/span on "buttons" has been a pain in our ass for a long time. Anyone have a good guide on making button inputs look decent? Or, is there a way to make submit inputs with links and spans? I really hate the default HTML buttons.
I don't know of a better canned solution for custom buttons off the top of my head, but its a simple enough concept that I'm sure there are some out there. Personally, I quite like the standard interface elements as presented by browsers these days, but I know that this is more because of their uniform presentation and resolution independence than for aesthetic reasons, and I can understand your distaste. If you bullet point what you consider to be the vital features and qualities you need, and the deficiencies you see in the default inputs, I'd be happy to do some digging though.
For CSS styling, I'd like to be able to style elements by ID.
What I'd like to do with this is to restyle the Wiki section of a campaign entirely, moving the 'Create New Page' button all the way up to the top of the OP sidebar right below the User Profile. Then I'd hide the rest of the OP sidebar, and utilize the space freed up to expand the content section of my wiki.
The only way this would work out well and without removing any nice features is if the 'Previous Versions' and 'Tags' section of the wiki pages are moved to the Edit page, which honestly is probably where they should be anyways. The rest of the stuff in the OP sidebar really doesn't need to appear on every Wiki page; instead, I think they'd be just fine appearing solely on the campaign's Home page.
Another thing that might be needed would be an overall class being added to all Wiki pages. That way, I'd be able to style the Wiki pages separately from the non-Wiki pages.
Are you sure that there's an overall 'wrapper' class added to Wiki pages, to allow us to style them differently from the other pages? I haven't seen one when looking through the source code. Ideally, different page types would have different wrapper classes.
You're correct however that the different content types aren't differently classed at the moment. That'd be handy. Most of the individual elements have ID's already however, so you can target them easily enough.
To be completely honest, I almost wet myself when I read about the rollover. That's something I've been wanting to do for ages. Good lord. You guys have made my year.
Something is off here, cause this definitely is not working for me..
EDIT: As a point of clarification, applying style to default OP elements by ID works for me (like the main-column background from my earlier post, etc.) but styling content that I write into the pages by ID is what is not working for me. Have you tested that with success?
EDIT 2: Hmm, apparently using the id tag under div's and such doesn't work when coding content for pages?
- Kallak
_You’re correct however that the different content types aren’t differently classed at the moment._ - What does this mean? I think this may be what I was trying to express when asking if people wanted more semantic markup. If you want us to add more classes and such we can do that, I just need a little guidance on what to add. I suppose I could also just go nuts and add tons of classes to everything.
In any case, based on the fact that everyone seems generally happy with this feature as-is, I'm planning on rolling it out to everyone in the next couple days. We may do a quiet rollout, make sure it's generally working, and then make a big announcement.
Thanks again for all the help and ideas, and if you have more ideas, please keep them coming.
Further, different page types should have different IDs to allow us to specify different styles for different page types. For example, all 'Wiki' pages should have a 'wiki' class that covers everything on the page, all 'character' pages should have a 'character' class, the character list should have a 'characterList' class, etc.
Potential Classes:
* wiki-page
* wiki-index
* adventurelog-index
* adventurelog-post
* character-index
* character-page
* item-index
* item-page
and so forth...
Would that help?
A couple suggestions related to your list of potential classes:
1) Adding a class "edit-page" that is only used as an additional class (i.e., class="wiki-page edit-page") would solve the desire to distinctly style edit and display pages, without having to create a separate edit page class for each page type.
2) The class "adventurelog-post" breaks the implicit naming convention used in the other classes ("foo-page"). Recommend using "adventurelog-page" instead.
Walter
Anyways, great that you're putting this out there. Definitely looking forward to it, even though it totally means a rework of my campaign again (eventually, anyways). After that, just work on making 'includes' available and you'll make tons of people happy, happy, happy;)
Just trying to help out.
I hope to launch this to everyone sometime in the next week.
I apologize if this causes anyone any pain, but I thought it best to just rip off the band-aid and go for it.
h4. Big Changes
* Make sure top-level divs (ie. the ones surrounding the main content) have at least an ID and possibly a class. In the case of lists, it only has an ID. Examples: "wiki-list", "advnture-log-list", "wiki-page", "character-page"
* For single entities (a page, post, character, etc), the top-level ID includes the ID of the item (ie. "wiki-page-my-page-name" or "character-page-my-dude"). The top level class will just be the short version of that (ie. "wiki-page" or "character-page") The goal here is to allow separate styling of individual pages, if you'd like.
* Add a matching class on the element for all the top-level containers ("wiki-page", "wiki-page-list", "campaign-home", etc.)
* Changed "game-item" and "game-character" to just "item" and "character"
* "blog_post" becomes "adventure-log-page"
h4. Small Stuff
* add a class "wiki-list-all" when showing all wiki pages
* add a class "wiki-list-tag" when filtering wiki pages by tag
* add a div with class "pc-list" on the characters list page
* add a div with class "npc-list" on the characters list page
* changed "tag-list" on character index to instead of with
above it
* add a div with class "list-footer" at the bottom of the character list
* add a div with class "list-footer" at the bottom of the wiki page list
* chaged "game-character-display" to "game-character-page" on the surrounding div of a character page
* changed id of "avatar" on character/item pages to be a class of "character-avatar" and "item-avatar"
* complete overhaul of character/item pages to add much more semantic markup
* add a class (filter-tag-description) for the header when filtering wiki pages by tag
* add a class "npc-list-title" and "pc-list-title" on the character list page
I've also put together a "set of guidelines":http://help.obsidianportal.com/kb/advanced/custom-css-for-your-campaign and if you have any thoughts on things I've missed or am unclear about, please let me know.
- Kallak
* Altering page-level styling of things like fonts and the body background
* Styling of campaign banners, as they're user submitted anyway
*Edit:* For what it's worth, I think that the more permissive you are with regard to users altering their pages, the less of a policing issue it will end up being. If your statement on the red zones was more along the lines of "Everything in these areas (except your campaign banner) must remain visible, or you risk action against your account." it would fulfill the same objective in a simpler, clearer, and at the same time less restrictive way.
Just trying to help out.
Question for anyone that can answer: Micah's write up says this will be for Ascendant members only. Does that mean as long as the GM is Ascendant that everyone in the campaign will have access or just the GM (co-GM? as well?) will have the ability to edit style?
(Sorry, I know I'm not part of the beta, but you got me all excited for these changes!!! So I had to ask.)
~Flash
"Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - From Slaves To Legends
Heroes Unchained: CotM 2013
This isn't really because we don't think players should be able to edit this stuff. It's mainly because that seemed like the most reasonable place to put the CSS editing controls. Maybe there's a better place, but I can't think of one off the top of my head.
For now it will stay where it is (since 99% of the time it's the GM doing all the styling), but I'll try to think of some way to give players access to it.
;-)
~Flash
Heroes Unchained: CotM 2013
Any more thought on when this will be implemented for the rest of us noobs? ;-) Can't wait to start playing around with the styles.
Heroes Unchained: CotM 2013
I guess I'll have to do the CSS styling on my test campaign and just have him upload it when it's good:/
Also, I hope the markup changes we made are not too damaging to peoples' campaigns. Like I said...rip the band-aid off.