Phoenix Mark, no way! How do you think people got started learning HTML and CSS? From using View Source and checking out what makes stuff work. You keep on checking stuff out in Firebug and experimenting with what you see there!
OK. I', getting totally lost here now with the CSS. Wolfhound has been a HUGE help, and I've gotten some things to work, but I cannot, for the life of me, figure out how to do my current custom menu bar as part of my CSS so I won;t have to past it every single time to my pages. I've gone through a few tutorial siters, but OP complains everytime that it can only do basic CSS. I've seen in the discussion here that some people are doing it, but, can someone please tell me HOW?
Thanks
Peace and Long Life,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
Are you referring to the navbar? To my knowledge, people only have done the standard bar links for that- your city, characters, rules, and sessions links would not work with CSS.
If someone has solved this, please share!!
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/
Unfortunately, I don't think you can change the labels on the tabs without doing it on each page. However, you can make it a class in your css, so that the code you have to put on each page is only a few characters. If I'm wrong, I'd love to see how someone did it with just CSS.
The issue isn't really the labels - you can replace them with images with whatever you want them to say, I believe. The issue is that they'd still link to the same locations as normal, which isn't at all what that custom navbar does.
p. So, the _body.campaign-home_ and the _body.character-list_ is where to start the CSS identifier from if you want it to look different on those specific pages. For instance this makes the Characters link (only) blue on the home page (only) and red on the characters page (only):
p. If you want to apply a CSS rule all the time except when it is the focus, start from the _div#main-column_ and leave out the identifier for the _li_ .
This will make everything blue, and the characters tab red when you are on the characters page. You can then add a line per tab for when that tab is the page you are on.. Just for posterity I would leave the general rule above the specific rule.
like so:
* div#main-column div#campaign-header div.tab-container ul.tabnav li a { color:#00F; }
* body.character-list div#wrapper div#content div#main-column div#campaign-header div.tab-container ul.tabnav li.characters a { color:#F00; }
Hope that helps, Keryth987 (and anyone else that might be interested)
For now though, I'm abandoning my CSS work. Changes I made were messing everything else up too much. Just going to return to polishing up what I have. I'll try CSS on my next site.
Peace and Long Life,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
Hey all, I have a question about a particular part of my CSS. I'm currently testing in chrome, but if someone could take a look at our "main wiki page":http://www.obsidianportal.com/campaign/the-dark-queen-of-the-west/wikis/main-page it would be appreciated. Specifically, if you mouse over the "Music" or "locations" buttons when the pop-up appears, the divs shift a little left and right. If someone has an idea how to make it NOT do that, I would appreciate it ;).
Sorry, Gaaran, I was distracted. If you move your mouse between the two icons, they dance back and forth... :)
I've actually seen this problem before, but I still don't have a fix for it. My first thought was that some padding or margin setting was different on the hover state, but I didn't spot anything in your custom CSS that indicates that (your code is incredibly well commented, by the way -- I need to adopt that practice!). I'll do some digging and see if I can come up with anything for you.
I can't for the life of me seem to get the google web fonts to work. Am I entering a URL to the font in the 'add font' fields? Or the actual name of the font I wish to employ?
Thanks Langy, but that didn't seem to help either. Do I need to add the code reference that the google font site gives (the javascript) or is that handled from within OP when I add the font names into the campaign profile?
Nope. You do need to use the CSS to actually set the font of whatever item you're looking to change to that same font name, though - just adding the font to the OP campaign profile won't actually use it yet, just allow you to use it.
Yes, I've been using the font-family:xx in the CSS sheet and I do have some of the fonts working now. It seems that some work and some don't. From other comments, I see that you might have to designate certain styles for a font as well to get them to show properly. Thanks for the help, the campaign page continues apace.
I’m just doing some minor cosmetic tweaking to my campaign, nothing major. I’ve changed the background images, the link colors, and whatnot. In doing the link colors, I noticed it changed all instances of the link colors. That’s fine for the most part, but the one distinction I’d like to have back is for the Wiki pages that don’t exist yet. Does anyone know what the tag for that is?
Hey guys! I've powered my way through a lot of the CSS mods I want to do on my pages, but my tabnav bar is still haunted by a white line, running underneath all the page links. I've managed to use the transparent setting to kill the borders, but that line's persistent.
Anyone have any suggestions on how I can get rid of it? I can't seem to pin down what it's related to...
(Also, while I'm posting, thanks to Wolfhound, browsing your code has been very educational!)
The gutter solution by CraigCoxson is the one I use "here":http://forums.obsidianportal.com/comments.php?DiscussionID=2637&page=2 About 3/4 down the page.
Finally found it, after a lengthy struggle. Thanks for the tip about the FireFox inspect element Syrinx, I'd been using that, but only to kind of eyeball what parts of the page each element controlled, and was ignoring all the (incredibly useful) CSS information on the right.
The border was a 1x1px background image on the .tabnav, which was why it was completely unaffected by the border commands. Setting .tabnav {background-image:none;} fixed that right up, and then you just need to take off the border-bottom:white; on the active tab.
Hi,
I'm slowly learning to use CSS (thanks Wolfhound!), and I want to know if I could change the name of each element of the navbar (home, adventure log... etc.), and the destination of each link of the navbar.
Could someone help me ?
Thanks!
-Pils
Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Dark Sun / La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova
The short answer seems to be "No." However, it's possible to make it _look_ like you did. What people seem to do is to hide the tabnav bar, and then recreate it in their page content body. Of course, this means adding it to every page on your campaign site.
Check out these campaigns for examples: http://www.obsidianportal.com/campaigns/age-of-legends http://www.obsidianportal.com/campaigns/a-god-rebuilt http://www.obsidianportal.com/campaigns/wyrmshadow
Notice that the content for the tabnav bar is no longer in the campaign-header div.
Plan B for you might be to make a floating menu, like the one used by Arsheesh on his Age of Legends campaign page. The code seems relatively easy to hijack (though I'm sure coming up with it was no small task). But again, this will need to go into every page you want it on, AFAIK.
Thanks ColdComfort, I already knew this method, but I'm searching what I could do with CSS... :/ But you help me, thanks!
-Pils
Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Dark Sun / La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova
Well, CSS affects style and not content by design, except with certain commands which aren't enabled on ObsidianPortal, so far as I can tell. The link locations and names of the tabs are hard coded into the page, and I'm pretty sure CSS can't change those.
I change my banner & my navigation tab with success, but it was a long time work!
(and even if we can't change a tab's name, it's possible to suppress a tab with a "display:none" command, thanks to Lord Ao)
-Pils
Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Dark Sun / La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova
Thanks for the shout out ColdComfort. Under my "Site Appearance Page":http://www.obsidianportal.com/campaign/a-god-rebuilt/wikis/site-appearance-and-how-we-role are not only the nav bar code, but backgrounds, parchments, and my CSS coding.
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/
Comments
Thanks
Peace and Long Life,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
If someone has solved this, please share!!
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.
Just trying to help out.
p. The complete CSS path to the 'Characters' tab from the main campaign and from the characters page:
* html.wf-rye-n4-active body.campaign-home div#wrapper div#content div#main-column div#campaign-header div.tab-container ul.tabnav li.characters a
* html.wf-rye-n4-active body.character-list div#wrapper div#content div#main-column div#campaign-header div.tab-container ul.tabnav li.characters a.active
p. So, the _body.campaign-home_ and the _body.character-list_ is where to start the CSS identifier from if you want it to look different on those specific pages. For instance this makes the Characters link (only) blue on the home page (only) and red on the characters page (only):
* body.campaign-home div#wrapper div#content div#main-column div#campaign-header div.tab-container ul.tabnav li.characters a { color: #00F; }
* body.character-list div#wrapper div#content div#main-column div#campaign-header div.tab-container ul.tabnav li.characters a { color:#F00; }
p. If you want to apply a CSS rule all the time except when it is the focus, start from the _div#main-column_ and leave out the identifier for the _li_ .
This will make everything blue, and the characters tab red when you are on the characters page. You can then add a line per tab for when that tab is the page you are on.. Just for posterity I would leave the general rule above the specific rule.
like so:
* div#main-column div#campaign-header div.tab-container ul.tabnav li a { color:#00F; }
* body.character-list div#wrapper div#content div#main-column div#campaign-header div.tab-container ul.tabnav li.characters a { color:#F00; }
Hope that helps, Keryth987 (and anyone else that might be interested)
For now though, I'm abandoning my CSS work. Changes I made were messing everything else up too much. Just going to return to polishing up what I have. I'll try CSS on my next site.
Peace and Long Life,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
I've actually seen this problem before, but I still don't have a fix for it. My first thought was that some padding or margin setting was different on the hover state, but I didn't spot anything in your custom CSS that indicates that (your code is incredibly well commented, by the way -- I need to adopt that practice!). I'll do some digging and see if I can come up with anything for you.
Obviously you can put whatever color you want, but I like to keep mine red.
Anyone have any suggestions on how I can get rid of it? I can't seem to pin down what it's related to...
(Also, while I'm posting, thanks to Wolfhound, browsing your code has been very educational!)
Just trying to help out.
This is the line I'm trying to get rid of. Also known as "Satan's Horizontal Rule" by some.
http://i.imgur.com/C6sHl.jpg
I, by chance, looked into this. I used firefox-inspect-element and found the code for the tabnav.
.tabnav {
height: 20px;
margin: 0px 0px 10px;
padding-left: 10px;
background: url("/images/tab_bottom.gif") repeat-x scroll center bottom transparent; opacity:1.0;
filter:alpha(opacity=1.0);
I added : opacity:1.0; filter:alpha(opacity=1.0); to the existing code. Voila! The grey border disappeared.
Check my Blade Runner game for confirmation "Tears in rain":http://www.obsidianportal.com/campaigns/brtest
/Dave
The border was a 1x1px background image on the .tabnav, which was why it was completely unaffected by the border commands. Setting .tabnav {background-image:none;} fixed that right up, and then you just need to take off the border-bottom:white; on the active tab.
Thanks for all the help guys!
I'm slowly learning to use CSS (thanks Wolfhound!), and I want to know if I could change the name of each element of the navbar (home, adventure log... etc.), and the destination of each link of the navbar.
Could someone help me ?
Thanks!
-Pils
Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Dark Sun / La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova
-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...)
Check out these campaigns for examples: http://www.obsidianportal.com/campaigns/age-of-legends http://www.obsidianportal.com/campaigns/a-god-rebuilt http://www.obsidianportal.com/campaigns/wyrmshadow
Notice that the content for the tabnav bar is no longer in the campaign-header div.
Plan B for you might be to make a floating menu, like the one used by Arsheesh on his Age of Legends campaign page. The code seems relatively easy to hijack (though I'm sure coming up with it was no small task). But again, this will need to go into every page you want it on, AFAIK.
Hope that helps.
-Pils
Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Dark Sun / La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova
-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...)
I change my banner & my navigation tab with success, but it was a long time work!
(and even if we can't change a tab's name, it's possible to suppress a tab with a "display:none" command, thanks to Lord Ao)
-Pils
Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Dark Sun / La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova
-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...)
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.