Custom CSS Beta Discussion

2456725

Comments

  • Micah
    Micah
    Posts: 894
    Below is a list of what I've done so far. Unfortunately, I'm sure some of these will be breaking changes in a couple of cases, most notably changes to the character and item pages. I really hope it doesn't break the DSTs, or at least not too much. But, the goal was to achieve some consistency and make overall styling simpler. Since we're rolling out the custom campaign CSS along with this change, hopefully fixing any issues will not be too painful and part of moving styling out of the pages themselves and into the overall CSS.

    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
  • Micah
    Micah
    Posts: 894
    My current plan is to release this to everyone on Tuesday or Wednesday of this week, after the frenzy of Ennies voting dies down.

    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
    Kallak
    Posts: 1,090
    I have a suggestion for getting more novice users started on using the custom CSS. Make a series of images for the various page types (character, item, etc...) and make diagram labels on which class/id they are set by. This way newer themers can have a visual reference to guide them when making changes. Maybe add a few links for CSS tutorials that you think are adequate.
    All the best,
    - Kallak
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited July 2012
    The guidelines page looks mostly good to me, but it may be worth outlining (what I hope will be) a few common exceptions to your red-zone policy. Rules as written for example, my "test campaign":http://www.obsidianportal.com/campaign/chainsawxiv-test-campaign/comments where I've been playing with this is violating the guidelines, but I don't think there's anything unreasonable going on there. Specifically, the following things should be expressly allowed:

    * 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.
    Post edited by ChainsawXIV on
  • Micah
    Micah
    Posts: 894
    Great point. I should be less aggressive in the verbiage. 99% of our users are fantastic and I shouldn't talk to people as if they're trolls. I'll make the updates that you suggest.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,978
    Thanks to all of you that helped test this! Us noobs cannot wait to steal from you!!

    Just trying to help out.

  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Spotted another issue that should get fixed - on the Characters and Items tabs, the footer is inside the the content block, instead of outside. I haven't dissected the issue, but I'm guessing there's a missing closing tag somewhere in the HTML.
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    I can't wait till this is rolled out! Great work everyone!

    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

  • Micah
    Micah
    Posts: 894
    You bring up a good question. Unfortunately, the CSS is only editable by the GM since it's on the 'Edit Campaign Settings' screen which is restricted to the GM. Even co-GM's can't get access to this screen.

    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.
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    Awww....that makes me cry. I do 99% of the style editing for our "Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained site (as I am the co-GM as well). Please let us know if you figure something out Micah. (I know I'm one of the 1%, but I'd be forever grateful!!!) Thanks for the response and hard work.

    ;-)

    ~Flash

    Heroes Unchained: CotM 2013

  • Micah
    Micah
    Posts: 894
    It's clunky, but you can always just send a txt doc to your GM and ask them to paste it into the custom CSS textarea. Definitely not a perfect solution, but a workaround until something better comes along.
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    True. Now that I think about it, I can always test on one of my campaigns, and once a style has been set, it shouldn't need to be changed that often. Thanks for the idea.

    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

  • Langy
    Langy
    Posts: 364
    The lack of a co-GM being able to edit this kinda sucks:/ I'd really like it if co-GM's could get as much control over a game as the actual GM; me and Caring are true partners on Edgerunners, but I'm only a co-GM since he was the guy with Ascendant access when we started it and you can have only one GM.

    I guess I'll have to do the CSS styling on my test campaign and just have him upload it when it's good:/
  • Micah
    Micah
    Posts: 894
    Ok, all the updates are deployed, and custom CSS is enabled for everyone. There seems to be an issue with expiring the cache for the CSS, so if you make edits and the CSS doesn't update that's a known bug. We're working on it.

    Also, I hope the markup changes we made are not too damaging to peoples' campaigns. Like I said...rip the band-aid off.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,978
    Here is the link for the "help guide":http://help.obsidianportal.com/kb/advanced/custom-css-for-your-campaign

    Just trying to help out.

  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    This feature is working great so far. I've just finished my first pass at styling my "current campaign":http://www.obsidianportal.com/campaigns/hrse, and things are coming along great I think. Thanks! That said, there are just a couple of lingering issues - not with the styling itself, but revealed by it - that would be great to get fixed:

    * The footers are inside the content blocks on the character and item index pages
    * The Obsidian Portal logo in the top navigation should be converted to a transparent png
  • Micah
    Micah
    Posts: 894
    I'll look into the footers today. You mentioned it before and I just didn't have time to get to it. As for the logo, I'll see about that. I'm really not that great at photoshop so even simple things like making a background transparent are kind of difficult for me. But I'll give it a shot.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    I don't have 'shop at work, but I can bang the logo image out for you in two minutes or less when I get home from my game tonight and email it over to you. If I had the original PSD file for it I could probably knock that down to thirty seconds (with a probably imperceptible increase in image quality), so send that my way if you're so inclined.
  • PurpleSteve
    PurpleSteve
    Posts: 12
    Regarding the 'Ascendant only' part of this, if we downgrade to a normal membership after editing the CSS will the styles stay edited or will they revert to default?
  • Micah
    Micah
    Posts: 894
    I'm still grappling with what to do with campaigns that lapse back to free. As it stands right now, the custom CSS will no longer be loaded for those campaigns, but I think that's too harsh and I'm thinking of changing that. However, it will remain un-editable, which can be frustrating if you just want to change one little thing. But, at least in that case, if someone decides to stop a campaign and leave OP for a while, they can know their campaign will still be displayed in the way they want.
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    Will @font-face work?

    Heroes Unchained: CotM 2013

  • Micah
    Micah
    Posts: 894
    The footer on the characters and items page should be fixed now.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited July 2012
    font-face should work I think, though I haven't actually tested it. I know that the @ character is allowed, since the campaign I linked to above uses an media rule hack to fix some Chrome formatting issues.

    The only things I've run into that aren't allowed are the generic child selector (really just the > character in general, but that's the only meaningful use of it in CSS that I can think of off the top of my head), and the key word "description". If your CSS includes either of those strings, the system won't accept it. There are probably other disallowed phrases, but those are the two I've run into.

    Incidentally, it would be nice if the error message it displayed when that happens told you specifically what the offending phrase was. It took a lot of process of elimination to figure out the description thing...
    Post edited by ChainsawXIV on
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited July 2012
    Micah, when you fixed the item index, you ended up with the .item-list class on both the body and the div that wraps the actual list of items. I'm pretty sure that's an accidental collision.

    Edit: Also with .adventure-log-list and .character-list, same issue.
    Post edited by ChainsawXIV on
  • ednoria
    ednoria
    Posts: 17
    Chainsaw (or anyone else), would you be willing to post the code you used for your campaign? I don't know a whole lot about CSS, and I'm not going to change anything right off, but I'd like to see some examples of what people are doing. Thank you!
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,978
    I will second ednoria's request, and ask that it gets a link in the Unofficial FAQ.
    Chainsaw and the rest of the testers, thanks for your efforts!!
    killervp
    "A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
    "Duskreign's First Ever COTM":http://www.obsidianportal.com/campaigns/wyrmshadow/wiki_pages/112011
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

    Just trying to help out.

  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    I'm a CSS noob, I literally know nothing about it, but here's what I've managed to figure out:

    First off, I use Firefox. After reading Micah's write up posted earlier, I installed Firebug. Very simple and easy to install.

    Once installed, I went to Chainsaw's HRSE campaign and turned on Firebug by clicking on its icon located in the upper right of Firefox for me.

    A CSS console popped up at the bottom of my browser. After poking around and scratching my head I finally figured out where the custom CSS changes are kept.

    If you click on the CSS "tab" you should see a drop down arrow almost directly below the CSS "tab". If you click on the drop down arrow, you should see "custom_css.css". If you select that, it will display all of the custom css code that is being used by that campaign site.

    I'm finding that I'm referencing http://www.w3.org/ alot to understand what is what. ;-) Hence why I asked about @font-face, as I'm not having any luck with getting it to work yet. Could by my website that I'm referencing though...still troubleshooting that issue...

    Heroes Unchained: CotM 2013

  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    Ha ha ha! It helps if your www service is running..... duh.

    Does anyone know of any free or cheap sites that can host a ttf? Don't feel like going through the headache of reinstalling IIS on Vista again.

    Heroes Unchained: CotM 2013

  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    Nevermind, totally forgot I had a dropbox account and they have a public share. We'll see if I can get this darn @font-face to work after all!!!

    Heroes Unchained: CotM 2013

  • berdman
    berdman
    Posts: 46
    Another good resource for HTML and CSS is W3Schools: http://www.w3schools.com/

    They have a pretty complete list of HTML Tags and CSS style along with tutorials and a try it editor so you can see how it works. They also have pretty up-to-date information on what is supported in what browsers and versions if you are worried about that or switch between browsers and OSes. Great site and free.
Sign In or Register to comment.

February 2023
The Domain of Dread Council Meeting

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions