Custom CSS Beta Discussion

1246725

Comments

  • Langy
    Langy
    Posts: 364
    Ah, yeah. I kinda thought that might happen, but wasn't sure which order you needed. Looks like you need the parent class first, then the child class. Anyways, good stuff.
  • berdman
    berdman
    Posts: 46
    Thanks for the help. Have not done UI/CSS styling in a while. That was my thought, but I was afraid I would turn the whole content section off.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,970
    Berdman- Your test site looks really good- you should make your regular site public!

    Just trying to help out.

  • berdman
    berdman
    Posts: 46
    Thanks for the compliment. I am going to make it public, at the moment it is very much a work in progress and looks nothing like the test site.
  • Kallak
    Kallak
    Posts: 1,090
    Not to be a pain, but could a class be added to the hyperlink for Item Name on the Item page? Currently there is a class for the H2, but not the link itself, so it can't be styled without changing all standard hyperlink properties.
    All the best,
    - Kallak
  • berdman
    berdman
    Posts: 46
    You can do it by using the class on the tag. Try this CSS. Not at home so trouble validating it by it should work:

    .item-name a:link
    {
    color:#29ABE2;
    text-decoration:none
    }

    .item-name a:visited
    {
    color:#29ABE2;
    text-decoration:none
    }

    .item-name a:hover
    {
    color:#0F9;
    text-decoration:none
    }

    .item-name a:active
    {
    color:#29ABE2;
    text-decoration:none
    }

    This will change the link for the item and should restrict it to that tag. Basically you are using the class item-name and in combination to change the link.
  • Kallak
    Kallak
    Posts: 1,090
    hm, not working for me.
    All the best,
    - Kallak
  • berdman
    berdman
    Posts: 46
    That is strange it is working for me. I am doing it in ie9 at the moment, but I have used something similar and that has worked in Safari and Chrome as well. The CSS I listed is for the Name on the detail page of the item. The link in the item list should be doable with this:

    .item-list-item a:link
    {
    color:#29ABE2;
    text-decoration:none
    }

    .item-list-item a:visited
    {
    color:#29ABE2;
    text-decoration:none
    }

    .item-list-item a:hover
    {
    color:#0F9;
    text-decoration:none
    }

    .item-list-item a:active
    {
    color:#29ABE2;
    text-decoration:none
    }

    Take a look at my item page: "Item Page":http://www.obsidianportal.com/campaigns/d20-space-opera/items

    I have the two sections of CSS in my campaign level CSS. One thing is make sure that they are after any tag styling you have done or that may override it.

    If I am not hitting the correct place let me know. I will be able to dig more when I get home this evening.
  • Kallak
    Kallak
    Posts: 1,090
    IDK what's up. I definitely see it working on yours, but it's not working on mine.

    "my item page":http://www.obsidianportal.com/campaigns/dangerous-kalamar-4/items/amulet-of-natural-armor
    All the best,
    - Kallak
  • Kallak
    Kallak
    Posts: 1,090
    Nvm, fixed. Might help if I actually put in the full setup instead of just color lols.
    All the best,
    - Kallak
  • berdman
    berdman
    Posts: 46
    I think I may know what the problem is. Looking at your CSS you are only over riding the link. As a result you are still getting the default setting for a vistied link. After I went to the page it showed me the link using the standard OP visted style.

    Try overriding all the settings and set it to red or some obnoxious color you will notice right away. If you are not seeing it then you may need to delete your cached files. Reloading the CSS does not reset the visited history. I had an issue over the weekend on my iPad while testing some CSS changes where I had to delete the cache before the changes showed up in Safari. Sometimes the browser does not see the CSS changed.

    Beyond that one of the other CSS Gurus will have to chime in.
  • berdman
    berdman
    Posts: 46
    Glad you got it.
  • berdman
    berdman
    Posts: 46
    BTW Really like the look of your site.
  • Kallak
    Kallak
    Posts: 1,090
    Thanks. Converting all 3 million pages over from inline to external CSS will be a pain, but it'll be worth it in the long run
    All the best,
    - Kallak
  • Langy
    Langy
    Posts: 364
    Google Web Fonts doesn't appear to be working for some reason - the GWF font I've been using for my tabs in Edgerunners isn't showing up. Also, I can't figure out how to add a second GWF font. Do you just add a comma after the first font in the GWF box, a semicolon, etc, or is another box supposed to pop up if you click the 'add font' button? Because if so, it doesn't work, at least on Firefox.
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    Adding another font with the "Add font" link works for me and I run Firefox (14.0.1). Try IE? I'd say if it doesn't work with IE on the same machine as Firefox you've got an issue on your machine.

    Heroes Unchained: CotM 2013

  • Langy
    Langy
    Posts: 364
    Ah - I think I figured out the issue. Between yesterday and today something changed in OP's coding, making it so some scripts are routed through 'stripe.com'. No idea what that is, but I hadn't enabled scripts from that domain, so they weren't running.
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    Well, I've managed to figure out how to create a nav bar that will show up on every page using the existing navtab. HOWEVER, I can't figure out how to get it so it won't push over other content in the body.

    "Heart of Barsaive":http://www.obsidianportal.com/campaigns/heartofbarsaive

    Anyone see what I'm missing or have any ideas?

    Heroes Unchained: CotM 2013

  • berdman
    berdman
    Posts: 46
    I had a similar issue when I first set mine up. It would block the top tab links.

    I had to set the containing div to 1px. That seemed counter intuitive to me but it worked. This is the top of my Nav code:





    Your site looks great.
  • NinjaFlashX
    NinjaFlashX
    Posts: 94 edited August 2012
    Thanks Berdman!

    Unfortunately, I don't think that will work for me. In essence, here's why:

    You are using html with "inline" CSS to create your nav bar. Which won't appear on every page in your campaign (don't get me wrong, I'm not saying your way is bad or anything like that, I like it quite a bit actually, enough that I used it on our "Heroes Unchained":http://www.obsidianportal.com/campaign/heroesunchained site). I'm using only CSS to manipulate OP's existing navtab/bar, which will appear on EVERY page in this campaign.

    Woot! I finally figure it out. Check it "Heart of Barsaive":http://www.obsidianportal.com/campaigns/heartofbarsaive

    Navtab/bar CSS code is posted "HERE":http://www.obsidianportal.com/campaign/heroesunchained/wikis/wiki-code located at the bottom.

    Edit: If you use this code, please let me know. I'd love to see how others use it in their site or change it to better fit their site.

    Edit#2: If you use this code, I have a fee; you must favorite the "Heroes Unchained":http://www.obsidianportal.com/campaign/heroesunchained site where the code is located. Yes, I'm cheap like that. LOL! ;-) Whatever I can do to get more folks interested in Earthdawn and the awesome job that our players do in writing their adventure logs.
    Post edited by NinjaFlashX on

    Heroes Unchained: CotM 2013

  • NinjaFlashX
    NinjaFlashX
    Posts: 94 edited August 2012
    FYI - I just tested in Chrome and Firefox and the above code worked great.

    For some reason, in IE 8 and 9 the text-shadowing didn't render. And that's kind of important as it helps the text stand out against most backgrounds. Hmm....

    Edit: Oh... Turns out IE doesn't support "text-shadow":http://www.w3schools.com/cssref/css3_pr_text-shadow.asp I guess just change the color of the text if you insist on using IE. :-(
    Post edited by NinjaFlashX on

    Heroes Unchained: CotM 2013

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,970
    Ninja Flash- Playing around with your side bar code- thanks for posting it. For those that are curious, it is a side bar, not nav bar. Will post my version when done! Great font, by the way... and I really love what you are doing with your Heroes Unchained site!!
    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.

  • tic
    tic
    Posts: 44
    Hi!

    I love this feature so much, and finally upgraded to a paid account just so I could use it.

    Has anyone made a list of class names to avoid as of yet? It took me embarrassingly long to figure out that my table was colouring just slightly off because I named a TD class "odd," a TD class already defined in the OP stylesheets that was overriding mine.
  • berdman
    berdman
    Posts: 46
    Any ideas why I would get the CSS not allowed error when I add this class:

    .description-header
    {
    color:black;
    }

    I am trying to override my global h2 setting on the character page by using the description-header class, but I get this when I try to save:

    There were problems with the following fields:
    Campaign theme custom css Invalid or disallowed characters in the CSS. We do not allow Javascript or other advanced CSS, just the basics.

    Also get this if I try to set the description class to display:none to remove Description. Works with Bio.
  • Savannah
    Savannah
    Posts: 188
    Question about Google Web Fonts: There's a font family I'm using that includes specific italic and bold styles within the font family. I'm using it on an existing site where I have some italic sections, which aren't using the italic version of the font visible on the Google Web Fonts site.

    In the CSS section, I have: body {font-family:Alegreya; font-size:16px; color:black;}

    Which gets the font overall correctly. However, I've tried creating italic font with "font-style:italic;", , and _, and all of them slant the normal font style instead of using the italic font style in the family.

    Being very new to this, I have a feeling I'm missing something stupid; does anyone know how to fix this? (And does that explanation of the problem make sense?)
  • tic
    tic
    Posts: 44
    I understand you perfectly, Savannah!

    I'd like to preface this by saying I *have not tested it yet,* but because OP asks us to specify the font name, I assume that whatever we fill into that field is getting straight-up dropped into the declaration to call the font, basically ____.

    If that's the case, then you can change the font name you enter in to change which elements of the font you're calling. If you look up Alegreya on the Google Web Fonts page, you'll notice a number of style variations at the top of the Quick Use screen, including the default font, the italicized version you're interested in, bolds, bold italics, etc etc...

    If you change what you have selected, you'll notice that the LINK REL html snippet you get changes. With only the base font selected, for example, you're given: ____

    But if you have the base font and Normal 400 italic selected, you'll notice the above changes to: ____

    Again, I have not tested this, but try entering the font name in as "Alegreya:400italic,400" instead of plain old "Alegreya" and see if that works out any better!
  • Savannah
    Savannah
    Posts: 188
    It works! I added that as an additional font, and now I can italicize things correctly. Thanks! :D
  • tic
    tic
    Posts: 44 edited August 2012
    Awesome Savannah, I'm glad it worked :>

    Edit: and the other thing I was going to say is not actually a thing after all. Nevermind!
    Post edited by tic on
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Berdman, I noticed that "description" seems to be a forbidden word. Not sure why - it's not blocked by the validation script Micah posted earlier, as far as I can see - but I ran into the same thing with the same word in my own CSS work.
  • Savannah
    Savannah
    Posts: 188
    Time to show off: "Age of Worms":http://www.obsidianportal.com/campaigns/ageofworms-ap

    I was using a different navigation system until now, so some things may still be messed up until I restructure the wiki and fix all the pages (I think I've either fixed or hidden all the old ones, though). Fortunately, there's not much content so it won't take too much work.
Sign In or Register to comment.

November 2022
Curse of the Crimson Throne

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