A Totally Unofficial CSS Help & Tips FAQ

NinjaFlashX

*EDIT - Much of the info here is outdated post Reforge. I'll be looking to update here soon.*

Because I finally got fed up with jumping around trying to find bits of CSS code in the forums and various campaigns (because let's face it, the community here is great at helping each other), I'm going to try and put a FAQ/index here. Please feel free to add in the comments and I will update anything I've missed.

h2. Guides:

"OP CSS Intro guide":http://help.obsidianportal.com/kb/advanced/custom-css-for-your-campaign
"Wolfhound's Tutorials":http://www.obsidianportal.com/campaign/dfd/wikis/css-4
"More of Wolfhound's Tutorials":http://www.obsidianportal.com/campaign/dfd/wikis/css-5
"Wolfhound's CSS Templates":http://forums.obsidianportal.com/comments.php?DiscussionID=2779
"Kallak's alternate character listings":http://forums.obsidianportal.com/comments.php?DiscussionID=2951&page=1
"Robertkety's Interactive Map":http://forums.obsidianportal.com/comments.php?DiscussionID=3044&page=1
"Killervp's campaign CSS":http://www.obsidianportal.com/campaign/a-god-rebuilt/wikis/css
"Pils campaign CSS":http://www.obsidianportal.com/campaign/dark-sun-a-trova/wikis/codes-css
"A special shout out to Chainsaw's HRSE campaign":http://www.obsidianportal.com/campaigns/hrse/themes/custom_css.css?cc=1359252223

h2. Formatting FAQ

Q: Can I rename the existing Nav tabs?
A: "Thanks to Madartiste, yes you can":http://forums.obsidianportal.com/comments.php?DiscussionID=2985&page=1#Item_7

Q: Who do I change the OP logo so it is transparent?
A: "By following Chainsaw's and Langy's advice":http://forums.obsidianportal.com/comments.php?DiscussionID=2985&page=1#Item_15

Q: How do I move the existing tabnav to the left side?
A: "Try Flash's tabnav hack":http://www.obsidianportal.com/campaign/heroesunchained/wikis/css-code

Q: Help! I have 4 bajillion tags in my campaign. How do I make it so that it doesn't take up so much space in my sidebar?
A: "Use Kallak's handy dandy overflow CSS code!":http://forums.obsidianportal.com/comments.php?DiscussionID=2985&page=1#Item_2
*Options:* Change the max-height px based on your campaign

Q: Zoinks! My campaign is so uber that I have 20,586 Fans. How do I hide some of these -stalkers- eager fans???
A: "Sounds rough, go ahead and try Kallak's Super Duper Scrolling Fan Box":http://forums.obsidianportal.com/comments.php?DiscussionID=2985&page=1#Item_4
*Options:* Change the max-height px based on your campaign

Q: How do I add a background to my campaign?
A: "Wolfhound's tutorial is a good start":http://www.obsidianportal.com/campaign/dfd/wikis/css-4
*Options:* If your background is too small, you can try adding background-size:cover; Also, if you want your background to repeat, add background-repeat: repeat; (you may need to remove the background-size:cover though)

Q: Can I move the secondary column around?
A: "Kallak will show you the way":http://forums.obsidianportal.com/comments.php?DiscussionID=2985&page=1#Item_14

Q: How can I change link colors across my site?
A: "KalinoAltes and Savannah have some good ideas on that":http://forums.obsidianportal.com/comments.php?DiscussionID=3022&page=1
*Options:* "CraigCoxson gives some more options as well":http://forums.obsidianportal.com/comments.php?DiscussionID=2637&page=2#Item_28

Q: How do I add multiple images to my sidebar?
A: "Madartiste (via Chainsaw) explains to us noobs":http://forums.obsidianportal.com/comments.php?DiscussionID=2637&page=3#Item_47

Q: How do I control my YouTube/videos from overflowing into my sidebars/other areas of my pages?
A: "Saethone uses his Jedi Coding skills to explain":http://forums.obsidianportal.com/comments.php?DiscussionID=2991

h2. CSS Resources:

"http://www.w3schools.com/css/":http://www.w3schools.com/css/
"http://css-tricks.com/snippets/css/browser-specific-hacks/":http://css-tricks.com/snippets/css/browser-specific-hacks/
"http://www.google.com/webfonts/":http://www.google.com/webfonts/
"https://typekit.com/":https://typekit.com/

h2. CSS Development Tools:

(These CSS Dev Tools are an add-on to your browser that allow you to *generally speaking* edit a page on the fly, inspect elements of any page, and in general, really help a ton to figuring out what works and what does not prior to clicking SAVE)

"For Firefox":http://getfirebug.com/
"For Chrome":https://developers.google.com/chrome-developer-tools/
"For IE":http://www.microsoft.com/en-us/download/details.aspx?id=18359
"For Safari":https://developer.apple.com/technologies/safari/developer-tools.html
"Notepad++":http://notepad-plus-plus.org/

Flash
"Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _Where Slaves Become Legends_

NinjaFlashX

fyi, I have more to add under formatting, but I've run out of juice and am going to go to bed. Will finish tomorrow.

Flash
"Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _Where Slaves Become Legends_

twiggyleaf

Nice work, Ninja!

NinjaFlashX

Alrighty, I've added what I could find in the CSS Discussions. I know there a bunch more tidbits and custom CSS out there. So please, point them out to me and I will happily add them to the list.

If you have a CSS code question, don't be shy and ask away. We'll figure it out and share for everyone.

Flash
"Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _Where Slaves Become Legends_

arsheesh

Wow, thanks for putting this together Ninja, I'm sure this will be very helpful to the community. Making it a sticky so now it is "official".

Cheers,
-Arsheesh

Dungeon_Master_Loki

Now that is how a real Ninja does it!

Badass! Many thanks from the community at large!

gaaran

Very useful! Just a note, the

Q: Who do I change the OP logo so it is transparent?
A: By following Chainsaw’s and Langy’s advice

link is broken, I get a 404.

NinjaFlashX

Doh! Sorry about that Gaaran. Fixed.

GamingMegaverse

Awesome Ninja! Great work!

FrankSirmarco

You rock, Ninja!

Flyndad

If I see a character description (the crunch) on another campaign that is using the same ruleset as my campaign and I like it, is all the coding somehow copyable? Would I need that person's permission if it is? I have sent him an email but there has been no response.

The name of the campaign is Dead Ends using the Warhammer Fantasy Roleplay 3rd edition format,..

Thanks for any assistance anyone may have,...

robertkety

Flyndad,
If you're talking about looking at the HTML or CSS code for a page, use Chrome or Firefox and press CTRL-SHIFT-I to use the built in code inspector. If you're talking about the written description in a bio, I think sending a message request is adequate. As long as you're not profiting from re-using someone else's character bio, I don't see an issue. Besides, imitation is the most sincere form of flattery.

Kallak

Great post. I remember how helpful the original "Unofficial FAQ":http://forums.obsidianportal.com/comments.php?DiscussionID=1114&page=2#Item_36 was when I was first getting started. Nice to know that new people will have this at their disposal as well.

Savannah

Are you talking about the character sheet "this character":http://www.obsidianportal.com/campaigns/dead-ends/characters/albrecht-fahl has, Flyndad? That looks like a dynamic sheet template. You should be able to apply it from the little drop-down menu at the very top of the create new character window. You will have to make sure your campaign is set to the rulesystem you are using (which it probably is, but I figured I'd mention it).

Flyndad

Yes, that is the character.

I will create a new character tonight and attempt what you have advised with the drop-down menu.

Thanks,..

Flyndad

Hmmm,.. I tried to create a new character this morning, but I don't see any drop down menu.

Using Firefox, I can see the "coding" that was used to make that character's "crunch" box, but being totally ignorant to programming language it is very hard for me to tell where it starts and stops.

Is it possible to copy/paste the coding I see when Firefox pulls it up? Then take the copy and paste it into my campaign's character crunch box? or create one of these templates you mentioned for the WFRP3e ruleset? I hate to be so ignorant, but ya gotta start somewhere right??

Thanks,..

crasher

I'm also interested in this dynamic character template. There is no drop down in the edit or create character area. Just some plain text that says "Dynamic Template"

UPDATE: I don't think that is a template available through the site. Other game systems have the drop down but WFRP 3E doesn't.

robertkety

Wow, I looked a little closer at the code. It looks like they coded each character sheet and pasted it into the Description area of the standard character page. All of the formatting appears to occur in the HTML so you can copy, paste, and customize the code on your page without worrying about adding CSS code. I'll message you the code.

Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons

Flyndad

WOW!,.. Thanks for the code (and the time you took in researching it) and sending it to me,..

I wish I could say Great! That's it! Unfortunately, I am as dumb as a rock when it comes to "code". After learning a little now it very well may be there are no simple answers.

I am more confused than ever,... I guess I was hoping that I could copy paste something into the crunch window and when it saved it would look like Albrecht Fahl's crunch page, but "blank" so that my players, if I can find any, could simply go in and "fill it out".

When I received your mail via yahoo, the code came up and it looked like "code". I copy/pasted into the crunch box and when previewed it look exactly like what I had put in there,.."code".

When I looked at your same email through Obsidian Portal, the code looked more like a "template", but it only had the wording/words. It did not contain the colors or the same spacing, or the "layout" that the original does,..

So now having gone through this, and people have taken time to help, I guess I can articulate my question better. Is there a simple way to make my characters crunch page look like Albrecht Fahl's crunch page, but blank, so players can input their own stats and action cards?

I know I am in way over my head when it comes to this stuff, and I was really happy with the way the whole campaign site was looking,( to tell ya the truth, I was ecstatic when I figured out how to create, link, and utilize the wiki !! :) ) ... I just came across Albrecht Fahl's character crunch page and was hoping I could make mine look like that without a masters degree in programing. It is truly a talent I do NOT posses,..

Thanks again for taking the time to help a coding noob,..

Maybe there is a way to make a template that duplicates Albrecht Fahl's crunch box? ,. Not only would I use it but I am certain that "the old world league" ( An online WFRP3e group) would utilize it often.

Anyway,.. no complaints here,. I love the Obsidian Portal site and can easily see how once a group gets used to it there is no going back to the just "pen & paper" way of playing,. Just having a searchable database of the details of every NPC a character has come across alone is worth the meager monthly price !!!

Thanks for a GREAT site !!

GamingMegaverse

DST, or dynamic sheet templates, commonly referred to here as DST or character sheets, are a feature that individuals, outside of the OP staff create. To use them you must have a few things-
One, under your settings, the correct game system. If you are looking to use a Warhammer 3e sheet, don't put anything like Warhammer 2e as your game- even if that is the system you are playing! Sheets correspond to systems!
Second, there has to be a DST! For example, I have a character sheet that I use, but it is not in a DST form! Some of us don't want to go through the heavier programming!
Hope this helps! The master of the DST's, (volunteer!!) as again, these are volunteer coded, is the awesome "Chainsaw XIV":http://www.obsidianportal.com/profile/ChainsawXIV Drop him a line- but as I said, this is volunteer, and he is a busy dude!
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/

weasel0

If you put code into the "crunch" box, as you say, then when you edit the character sheet, you have to do it in code. Thats how my group is doing it as Hackmaster doesnt have a DST.

"The Masters of Hack":http://www.obsidianportal.com/campaigns/the-masters-of-hack

Savannah

Unfortunately, if there's no DST, you are going to have to use some code. Fortunately, it does not require a masters degree in programming ;)

I'm no expert, but I do like spending way too much time making my sites look good, so if you want to send me the code you've got, I'd be willing to take a look at it and see if I can't help you figure it out. (Can't do a DST for you, though, as I still can't figure out how the heck they're created.)

robertkety

Just posted some code for a "sliding header":http://forums.obsidianportal.com/comments.php?DiscussionID=3069&page=1#Item_2.

Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons

HurstGM

ok a tiny bit of background and then my question.

I know I mentioned in the other forum that Im about to no renew my membership. I also mentioned that I had stopped using the portal for a good long while. So the reason I stopped was that I got divorced and had a heart attack. So I recovering for a while. I am now engaged to another woman who is also a gamer and a player in our group. Just before the reforge I had deveolped a new game and was creating an epic video for it. Well I told her about the reforge and finished the video she saw it and asked when I was going to create the new site. I told her I was not.
Amber, "Why not?
Me "I dont want to learn CSS"
Amber "Is it hard?"
Me "Not really I just dont want to do it"
Amber "So you write Excel Marcos that auto update across the world and that 50000 people use but you dont want to learn CSS? Sounds like a bit of an excuse to me."
Me, ".......Go make me a sandwich." (She knew it was a joke but i did get a bonus sandwich)

So now my question:

Im trying to get the left hand sidee bars to shrink like what I see on other pages. (Make them icons only ect.)

Here is my code

.tabnav a:link, .tabnav a:visited, .tabnav a:active, .tabnav a:hover {
font-size: 12pt;
color: black;
text-shadow: 1px 2px 1px white, -2px -2px 1px white;
}
.tabnav a:link, .tabnav a:visited {
background: none repeat scroll 0 0 transparent;
border: medium none transparent;
line-height: 20px;
}
.tabnav {
background: none repeat scroll 0 0 transparent;
left: 260px;
width: 130px;
}
.tab-container {
width: 130px;
position: fixed;
left: 260px;
}
.tabnav a.active:link, .tabnav a.active:visited {
border: inherit;
background: transparent;
color: brown;
}
.tabnav a {
margin-bottom: 5px;
}

What am I doing wrong?

Please dont tell Amber jk....wait....nah dont tell her

SkidAce

You can collapse the left hand icons without any code, if I am understanding you.

Go to your campaign settings, go to style. On the right hand side of the screen halfway(?) down is an option checkblock to "Collapse Front Page Menu".

Let me know if that helps.

HurstGM

Bugger all! Thanks Skid it was driving me NUTS

Pils

Another little css to block the navbar and keep it always visible (it's not a visual success, but it help with long pages...).
"Example":https://dark-sun-a-trova.obsidianportal.com/adventure-log/round-4

@/*Fixed Navbar and hide text*/
#campaign-nav {position:fixed !important; }
.nav-text {display:none;}@

-Pils
"Dark Sun / La Décade des Héros":https://dark-sun-a-trova.obsidianportal.com/: Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Al-Qadim / Golden Voyages":https://aq-golden-voyages.obsidianportal.com/: Who among you dares to challenge the high seas?

HurstGM

Will that work for the stuff on the right? Im just now getting the intial page together and I would like to axe that stuff if I could.

GamingMegaverse

Welcome back Hurst!!

Pils

@HurstGM: here a code (maybe you will have to change the "850px" according to your page). I test it quickly, I don't know if it's really good...

@/* Fixed right bar */
#sidebar.large-3.columns.sidebar {position:fixed !important; left:850px}@

NinjaFlashX

This is WAY outdated post Reforge. I know there have been TONS of folks posting stuff in these forums and what not. I'll see about updating this in the near future. I checked out for about a month after the Reforge and am now just getting caught back up.

Flash
"Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _From Slaves To Legends_