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!
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.
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).
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.
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.
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.
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!)
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.
*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):
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.
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).
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).
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;
}
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)
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.
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.
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.
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.
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.
Comments
http://www.obsidianportal.com/campaigns/age-of-the-dragons
Age of the Dragons - Homebrew Fantasy | Edurance of Hope - Age of Rebellion
Nominate a Campaign for Campaign of the Month!
Age of the Dragons - Homebrew Fantasy | Edurance of Hope - Age of Rebellion
Nominate a Campaign for Campaign of the Month!
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.
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).
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
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.
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.
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!)
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
*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;}
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
I'll see about deploying this tomorrow morning.
So exciting!!!
Now to go learn about Typekit...
You too Chainsaw for explaining a few things to us noobs.
Heroes Unchained: CotM 2013
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
Now I'm going to relax. It's been a crazy couple days.
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.
.tab-container{
display:none;
}
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.
.tab-container .wiki-page { display:none;
}
.wiki-page .tab-container {display:none};
the other way left the tabs on everywhere.