Custom CSS Beta Discussion

145791025

Comments

  • gaaran
    gaaran
    Posts: 740
    Haha, firebug is how I found all of the classes and id's that OP uses, so I think it's a must have to set up your custom CSS.
  • tic
    tic
    Posts: 44
    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!
  • Keryth987
    Keryth987
    Posts: 1,000
    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

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,969
    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/

    Just trying to help out.

  • gaaran
    gaaran
    Posts: 740
    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.
  • Langy
    Langy
    Posts: 364
    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.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,969
    Thanks Langy and Gaaran- as always! You 2 make me actually think I am starting to understand...

    Just trying to help out.

  • GMBill
    GMBill
    Posts: 3
    p=. *Menu Bars*

    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)
  • Keryth987
    Keryth987
    Posts: 1,000
    Thanks for the help and advice all.

    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

  • gaaran
    gaaran
    Posts: 740
    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 ;).
  • madartiste
    madartiste
    Posts: 328 edited September 2012
    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.
    Post edited by madartiste on
  • bislab
    Posts: 4
    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?
  • Langy
    Langy
    Posts: 364
    The actual name of the font.
  • bislab
    Posts: 4
    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?
  • Langy
    Langy
    Posts: 364
    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.
  • bislab
    Posts: 4
    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.
  • jtokay
    jtokay
    Posts: 6
    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?
  • Savannah
    Savannah
    Posts: 188
    a.create-wiki-page-link {color: red;}

    Obviously you can put whatever color you want, but I like to keep mine red.
  • jtokay
    jtokay
    Posts: 6
    Great, thanks so much!!
  • ColdComfort
    ColdComfort
    Posts: 5
    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!)
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,969
    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.

    Just trying to help out.

  • ColdComfort
    ColdComfort
    Posts: 5 edited October 2012
    Sorry, Killervp, was that comment in response to my post? If so, I'm not sure that that will help me... I suspect my description was kind of vague.

    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
    Post edited by ColdComfort on
  • Syrinx
    Syrinx
    Posts: 42
    Hi, ColdComfort.
    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
  • ColdComfort
    ColdComfort
    Posts: 5
    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.

    Thanks for all the help guys!
  • Pils
    Pils
    Posts: 149
    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

    -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...)

  • ColdComfort
    ColdComfort
    Posts: 5
    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.

    Hope that helps.
  • Pils
    Pils
    Posts: 149
    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

    -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...)

  • ColdComfort
    ColdComfort
    Posts: 5
    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.
  • Pils
    Pils
    Posts: 149
    Thanks again for the explanation!

    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...)

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,969
    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/

    Just trying to help out.

Sign In or Register to comment.

October2022
Wildside

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