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_
Comments
Flash
"Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _Where Slaves Become Legends_
Heroes Unchained: CotM 2013
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Inner Council Member
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_
Heroes Unchained: CotM 2013
Cheers,
-Arsheesh
Badass! Many thanks from the community at large!
Planejammer Panopticon: Central Hub for the Planejammer Campaign Series
Current Active Games: Planejammer: Catch My Drift! (Starfinder) | Planejammer: The Spelljoined (Pathfinder 1e) Campaign of the Year 2011 | Planejammer: Beyond The Sky (Pathfinder 1e)
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.
Heroes Unchained: CotM 2013
Just trying to help out.
The name of the campaign is Dead Ends using the Warhammer Fantasy Roleplay 3rd edition format,..
Thanks for any assistance anyone may have,...
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
I will create a new character tonight and attempt what you have advised with the drop-down menu.
Thanks,..
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,..
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.
Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
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 !!
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/
Just trying to help out.
"The Masters of Hack":http://www.obsidianportal.com/campaigns/the-masters-of-hack
~Weasel0
A Parade of Black | ShadowRunHack |
Where I play with CSS code
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.)
Robert
"Autumn Dragons":http://www.obsidianportal.com/campaigns/autumn-dragons
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
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.
Unconquered Kingdoms, July 2016 CotM
"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?
-Pils
Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)
Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!
(And I'm so soooorry for my poor english...)
Just trying to help out.
@/* Fixed right bar */
#sidebar.large-3.columns.sidebar {position:fixed !important; left:850px}@
-Pils
Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)
Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!
(And I'm so soooorry for my poor english...)
Flash
"Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _From Slaves To Legends_
Heroes Unchained: CotM 2013