Custom CSS Beta Discussion

1356725

Comments

  • saethone
    saethone
    Posts: 153
    still in the process of removing old coding from my page, and giving myself a crash course in CSS, but thus far its working wonderfully

    http://www.obsidianportal.com/campaigns/age-of-the-dragons
  • saethone
    saethone
    Posts: 153
    by the way, NinjaFlashX - thank you so much for pointing out Firebug. With that, I've not only been able to look at other people's CSS - but under the HTML section, it helps you to see what classes and id's correspond to what on the screen. Incredibly helpful!
  • ChainsawXIV
    ChainsawXIV
    Posts: 529 edited July 2012
    Micah, here's a transparent version of the navigation logo for you: "logo.png":http://omnichron.net/external/op/src/logo.png

    As others requested, here's a copy of the current CSS from my campaign: "hrse.css":http://omnichron.net/external/op/src/hrse.css

    In terms of other resources, berdman's suggestion of "W3Schools":http://www.w3schools.com/css/ is excellent - they have good tutorials, and their reference pages are far easier to parse than the W3C technical specifications, which always drive me nuts, and don't actually cover what's _supported_ by browsers.

    On the browser support note, you may also find "this cheat sheet of browser specific CSS hacks":http://css-tricks.com/snippets/css/browser-specific-hacks/ useful in adjusting your page to look just right in various browsers. I've had much use for the Chrome hack in particular.

    From the tools end, Firebug is alright, but don't miss the *Inspect Element* feature in Firefox either. It will give you a clear picture of the CSS cascade for any element from the right-click menu, and its 3D view of the page is fantastic for figuring out the oddities of page layout. At the same time, Chrome's *Inspect Element* feature offers a great display for picking through the page code like Firebug, and shows better visualizations of the margins and padding of elements. Note that you can type directly into the CSS information shown by either browser's inspect feature, allowing you to quickly try out your changes without having to resubmit and refresh, which is invaluable for zeroing in on just the right values for things.

    You may also find a good text editor like "Notepad++":http://notepad-plus-plus.org/ useful for editing your master sheet. It will color code your CSS for easy reading as you work on it (which also makes it easier to spot little mistakes), and allows you to fold up your rules for easier browsing.
    Post edited by ChainsawXIV on
  • ChainsawXIV
    ChainsawXIV
    Posts: 529
    After some investigation, @font-face won't work here, but not because of anything about the Obsidian Portal setup. Firefox and Chrome, for some reason that I assume to be security related, do not allow web fonts unless they are hosted on the same domain as the page they're viewed on, so it seems were out of luck in that respect, at least for the moment.

    The easiest solution I can think of for this at the moment would be to allow TFF and EOT file types to be uploaded the built in image uploading feature here on Obsidian Portal. We could then use that system to put fonts in a viable location. For that matter, you might enable SVG files as well, which would let people use vector art on their pages (I mention this because SVG can also be used for fonts in some browsers).
  • Shammond42
    Shammond42
    Posts: 65
    ChainsawXIV,

    Does this help. http://stackoverflow.com/questions/2892691/font-face-fonts-only-work-on-their-own-domain. I know that it is possible because I've used services like TypeKit (typekit.com) which exist to serve fonts for your web sites. I was going to try to see if I could figure out how to get typekit working this weekend.

    Steve
  • Langy
    Langy
    Posts: 364
    Making it so we can upload fonts would be *excellent*. I'd definitely be pleased with that.
  • Micah
    Micah
    Posts: 894
    Ok, a lot going on here. I'll try to respond:

    h4. Overall Answer - Better than nothing

    I hope people aren't getting too frustrated with what you can't do, or can't do yet. I know it's not a perfect solution, but my gut says it's still much better than the way it was before. I hope we can strike a balance of adding more to it without making it a monster to maintain and improve.

    h4. Troubleshooting disallowed CSS

    We use "this snippet of code":https://github.com/courtenay/css_file_sanitize/blob/master/lib/css_sanitize.rb for "sanitizing" our CSS. I'll be the first to admit that I don't really know exactly what it looks for, as I'm not an expert in CSS black-hattery. However, after reading around it was recommended as a good starting point for defending against anything malicious. The basic idea is to prevent any sort of malicious javascript in the CSS.

    Technically, it does not sanitize (ie. remove) and instead just rejects anything suspicious. I apologize that it's so opaque, but I haven't had a chance to really dig into it all that much.

    h4. Fonting

    I don't really know much (anything) about @font-face. I'll try to look into it today, and "TypeKit":https://typekit.com/ and "Google Web Fonts":http://www.google.com/webfonts/ both look especially interesting. If there's some way we can use either (or both) to simplify the process then I'll put that in as soon as I can figure it out.

    As for uploading your own fonts, I don't have anything against it, but file uploads are a lot of trouble for us. Data that sits outside our database is much harder to track, manage, backup, and otherwise deal with. That's why we still don't have a "Files" section for each campaign. So, uploading your own fonts is probably in the far-far-future pile.

    h4. Duplicate classes on body and div

    This was intentional, although I'm open to changing it if that's what people want. Essentially, we wrap the main content section of each page in a div and I added/modified the classes on there to be somewhat standard. At the same time, I decided to add a class on the body element to represent the content.

    The idea was to allow styling of the entire page based on the inner content. For example, if you want outer styling (menus, sidebars, etc) to be different for character and/or wiki pages, you can key off the body class.

    I had hoped this wouldn't be too confusing, so please let me know if it is. I'd say we're still in the grace period where I can change classes and divs without hurting too many people. Let me know if you have strong feelings either way.
  • CraigCoxson
    CraigCoxson
    Posts: 20
    Ok....I have a specific CSS question regarding setting up links. Here is my code:

    a:link {color:dodgerBlue;text-decoration:none;}
    a.character:link {color:darkRed;}
    a.items:link {color:green;}
    a.place:link {color:blue;}

    a:visited {color:dodgerBlue;text-decoration:none;}
    a.character:visited {color:darkRed;}
    a.items:visited {color:green;}
    a.place:visited {color:blue;}

    a:hover (color:black;}

    Inheritance is working perfectly with the text-decoration, but the :hove pseudo-class does not work. When I inspect using chrome tools, hover is crossed out, suggesting the page isn't using it/it is being over-written, but I can't figure ot where this is happening.

    Also, wanted to post here that the nav bar uses the following definition: #navigation ul li a

    The reason I mention this is I put up a white background (BW image) and the nav bar disappeared. Changed the link color to make it visible.
  • Micah
    Micah
    Posts: 894
    From what I've read, it looks like "Google Web Fonts":http://www.google.com/webfonts/ should be fairly easy to integrate. We could allow you to choose a list of font families you want to use and then retrieve them from GWF.

    Typekit looks to be much more difficult, in that you have to create predefined "kits" containing the fonts you want. They have an API we could hook into to create a kit for each campaign, but dealing with an external API is a little more involved than I want to get into at this point. This is really unfortunate, as their font library is quite large and I'd gladly pay to get everyone access to the Typekit fonts in their campaigns.

    I've got a little time this afternoon. I may see if I can futz around with GWF. I may be able to get a working implementation by tonight or tomorrow (no promises!)
  • Shammond42
    Shammond42
    Posts: 65
    Micah,

    Typekit integration that I have seen in the past was much simpler than that. A text field to input the id of the "kit" for your campaign. OP would then insert the appropriate tags to load the kit from "typekit". It is up to the user to have a TypeKit account and make the kit. They have a free options that includes a couple of fonts for a single site, that would work for a single campaign. I think WordPress does it this way.

    An alternative might be for you to make a "fantasy kit", a "sci-fi kit", etc. Each kit would have a potentially large selection of fonts that people could chose from, and they could select a kit for their campaign. This has the disadvantage of viewers having to download a larger font package than needed, but would be much simpler than trying to do an api level integration with 1 kit/campaign.

    Steve
  • ChainsawXIV
    ChainsawXIV
    Posts: 529 edited July 2012
    *Fonts:* I haven't tried the thing the Shammond42 linked to yet - I'll try that out when I get home tonight, and report back. GWF sounds like a good feature to support in general, regardless of what else we can figure out in that regard. The short story with @font-face is that it allows you to load in a font file from the web, just like an image or any other asset, but that security restrictions mean that the font file needs to be on the same domain as the page itself. Thus my suggestion of just adding font file types to the allowed files on the existing upload feature - it's a bit hack, but it would put the file in a viable place, and all the infrastructure for it exists already.

    *Classes:* I see where you're going with this, and it makes sense. Upon closer examination, I see that the characters and items tabs have the _class_ on the body tag, and the _id_ on the content div. I missed this detail at first glance, but that works. The issue is just with the adventure log list, where the body and div both have the same _class_. The body tag should probably have this as its _id_ instead.

    *Disallowed CSS:* I'm not a ruby guy, but I'm guessing that the regex match in that script will return the substring it matches. You could try appending that to the error output with a little message to the tune of "here's the offending text". Incidentally, the > character is disallowed only to stop people from including HTML, but you need < as well to make a tag, so you really only need to block the one for the same results, and doing so would allow the > generic child selector.

    *CraigCoxson:* Assuming that's copy and paste from your CSS, the issue is that you have a ( instead of a { in your a:hover rule. If that's not it, then something further down the cascade is overwriting your hover rule, so you may need to do a more specific selector (like individually applying the hover rules for each of the types you outlined):

    a:hover, a.character:hover, a.items:hover, a.place:hover {color:black;}
    Post edited by ChainsawXIV on
  • Micah
    Micah
    Posts: 894
    Steve,

    You make a good point about letting people have their own Typekit account. GWF and Typekit both use the same javascript library, or at least they can. So, if I get GWF working, it probably won't be too much trouble to add Typekit to that.

    Micah
  • Langy
    Langy
    Posts: 364
    Excellent. Google Web Fonts would be almost as good as being able to upload our own (well, maybe half as good; there are several specific fonts I'd like to use that GWF doesn't have).
  • Micah
    Micah
    Posts: 894
    I managed to get both GWF and Typekit working. For GWF you input the names of the fonts you want, and with Typekit you paste in your kit id.

    I'll see about deploying this tomorrow morning.

    So exciting!!!
  • ChainsawXIV
    ChainsawXIV
    Posts: 529
    After a bit of experimentation, it looks like shammond42's link won't pan out - the .htaccess option is only good for bridging to other subdomains, and the Base64 encoding option is no good because the system here doesn't allow embedded data (for perfectly valid security reasons).

    Now to go learn about Typekit...
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    Awesome Micah, looking forward to your changes. Thanks for the hard work!

    You too Chainsaw for explaining a few things to us noobs.

    Heroes Unchained: CotM 2013

  • CraigCoxson
    CraigCoxson
    Posts: 20 edited July 2012
    Background image gutters:
    Instead of changing the header and footer colors, I decided to just create gutters at the top and bottom of the page. The first code is for a non-repeating background. The second is for a repeating background. The black.jpg image is just a black square. It could be smaller, but I was rushed when creating it. This is compatible with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and Internet Explorer (9.0+). The 45px gutter is the top gutter. The 208px gutter is at the bottom. Depending of font changes in your body tag you may need to adjust those.

    body {
    background-image: url('http://cdn.obsidianportal.com/assets/141091/black.jpg'), url('http://cdn.obsidianportal.com/assets/141078/chicago_1901.jpg');
    background-size: 100% 208px, auto 100%;
    background-position: bottom center, center 45px;
    background-repeat: no-repeat, no-repeat;
    }

    body {
    background-image: url('http://cdn.obsidianportal.com/assets/141091/black.jpg'), url('http://cdn.obsidianportal.com/assets/141091/black.jpg'), url('http://cdn.obsidianportal.com/assets/141078/chicago_1901.jpg');
    background-size: 100% 208px, 100% 45px, auto auto;
    background-position: bottom center, top center, center center;
    background-repeat: no-repeat, no-repeat, repeat;
    }

    non-repeat example: http://www.obsidianportal.com/campaigns/blake-chronicles
    repeat example: http://www.obsidianportal.com/campaigns/the-rebuilt-testing-ground
    Post edited by CraigCoxson on
  • CraigCoxson
    CraigCoxson
    Posts: 20 edited July 2012
    double post. Sorry.
    Post edited by CraigCoxson on
  • Langy
    Langy
    Posts: 364
    Excellent. We've now got custom fonts via Google Web Fonts and Typekit, and they're working just fine! (or the GWF ones are, at least; don't have a TypeKit account to test them on)
  • Micah
    Micah
    Posts: 894
    Yep, it's deployed. I've also updated the guide with a little more information on how to use the font controls. Typekit especially is a little confusing but once you get all the stars aligned it works fine.

    Now I'm going to relax. It's been a crazy couple days.
  • ChainsawXIV
    ChainsawXIV
    Posts: 529
    Thanks Micah! Nice work.
  • Langy
    Langy
    Posts: 364
    One little thing that would be nice, if you can manage it: Make it so any link that leads to the current URL has a specific class (maybe 'Active'?). Or at ones that lead to the current slug. That'd be mighty handy.
  • neonbasschild
    neonbasschild
    Posts: 20
    Is it possible to have a side nav bar contained in CSS? I know you define everything like how we do now in the dev box. Do we have insert code into each page then to have it display the new CSS box?


    Or is it possible to have it automatically add to the page? Only way I can think of is to have it put in body or something but then it will mess with the location and formatting of the body box.
  • Langy
    Langy
    Posts: 364
    Unfortunately, no. We can't do an entire nav bar in CSS, or use CSS to automatically add actual content to pages.
  • neonbasschild
    neonbasschild
    Posts: 20
    OK so for adding nav bars and the like to the side we are stuck using dev boxes. One last question is there any way to quickly REMOVE the normal nav bar through CSS? I dont think there is but I dont use CSS a ton so I could be wrong.
  • Langy
    Langy
    Posts: 364
    Sure, that's pretty easy. Use:

    .tab-container{
    display:none;
    }
  • neonbasschild
    neonbasschild
    Posts: 20
    Now I just need to find a way to add my side navigation to the forums, calendar, and character tabs.....
  • berdman
    berdman
    Posts: 46
    I am working on my Navbar replacement for the tabs, and pretty much have it where I want it. I used the CSS suggested by Langy to hide the tabs and as expected it turned the tabs off for the entire site. Is there a way to turn the tabs off for just the Wiki Pages using CSS?

    You can see what I am trying to do here: "Brent's Test Campaign":http://www.obsidianportal.com/campaign/brent-test-campaign/wikis/charexp

    I think I am going to replace the Adventure-Log list and the Character list so it is not an issue as neither is the Wiki and Home page, but I am planning on using the Calendar, the Maps, and the Forums pages at the least so I don't want to leave people stuck without navigation.

    Any help or ideas would be appreciated.
  • Langy
    Langy
    Posts: 364
    Yep. Instead of what I previously posted, use:

    .tab-container .wiki-page { display:none;
    }
  • berdman
    berdman
    Posts: 46
    Thanks for the info. I had to turn it around to be:

    .wiki-page .tab-container {display:none};

    the other way left the tabs on everywhere.
Sign In or Register to comment.

May 2022
Revenge on the Kraken's Bane

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