Not signed in (Sign In or Register)

Discussion Tag Cloud

Vanilla 1.2.1 is a product of Lussumo. More Information: Documentation, Community Support.

    •  
      CommentAuthortic
    • CommentTimeAug 13th 2012 edited
     

    Looking awesome, man!

    I finally started styling my own secondary column tonight, and I’m so pleased that I’ve finally been able to deal with how absurd the 20-character-long username of one of my players was making the Party listing look. I’m not done yet, but it’s coming along nice, I think.

    •  
      CommentAuthormagavendon
    • CommentTimeAug 17th 2012
     

    For some reason some of my classes aren’t working correctly. My CSS code is (details on problem below):

    /* Begin code here */
    a.clean, .meta, .people
    { text-decoration: none;
    }

    .races
    { color: red;
    }

    .meta
    { color: orange;
    }

    .people
    { color: green;
    }

    a:hover {color: black;}
    /* End code here */

    The a.clean class and the a:hover class both work just fine, but for some reason the .races, .meta, and .people classes won’t work. The weirdest thing is that the “subclassing” works just fine. So when I set something to class=“meta” or class=“people” my code will see that and take out the text-decoration just like it would if it were just class=“clean” but it seems determined to deny me my color change. In-line CSS to change the color works just fine for me, so I’m really at a loss right now.
    If you want to look at the page directly, here you go.

    •  
      CommentAuthorgaaran
    • CommentTimeAug 17th 2012 edited
     

    Assuming you just want three different colors of text, and to have them turn black when you hover over them, try this:

    a{
    text-decoration: none;
    }
    /*this will remove all underlines from links*/

    .races{
    color: red;
    }

    .meta{
    color: orange;
    }

    .people{
    color: green;
    }

    a:hover {
    color: black;
    }
    /*you could add text-decoration: underline to the a:hover, if you wanted the underline to appear on hover*/

    if you only want to remove underlines from the above three custom classes, then use

    .meta a, .races a, .people a{
    text-decoration: none;
    }

    instead of the a{}.

    I’m not exactly sure what you’re trying to do, so i hope that helps.

    •  
      CommentAuthormagavendon
    • CommentTimeAug 17th 2012 edited
     

    I went ahead and removed my clean class in favor of just removing the underline from all links like you’ve written for me gaaran, I don’t know why I didn’t think of that in the first place since that was my intention anyway. Despite this, my links are still not changing colors. I even went ahead and added “color: yellow;” to the a{} just to see if I can get any color change. Interestingly enough, this does manage to change many of the links on the OP page to yellow, but the links inside the text remain the default blue (the ones without the inline CSS anyway, you can tell which they are since they turn black when hovered over). For further testing purposes I also added:

    p
    { color: #660099;
    }

    which is a purplish color. This change did change the color of the text on my wiki page.

    •  
      CommentAuthorgaaran
    • CommentTimeAug 17th 2012
     

    you could do

    #campain-content a:hover {
    color: black;
    }

    this would be further down the cascade (or whatever the terminology is) and #campaign-content is the id for everything in the “green” section of what you can mess with with the css.

    if that doesn’t work, can you write up a description of how you want the page to behave? then I’ll know exactly what you’re trying to do.

    •  
      CommentAuthorgaaran
    • CommentTimeAug 17th 2012
     

    I wanted to mention this as well, since this is the CSS beta discussion, I don’t know if it’s feasible at this point, but it might be better on the server load if we were able to choose more than one stylesheet. For example, in all the experimenting I’ve been doing, I’m up to several hundred lines of CSS, but I don’t need to load them on every one of my page. If I could break them up into different style sheets, that would be better on the server load.

    However, this might not really be an issue, since most people probably won’t have huge CSS files to be loaded on every page.

    •  
      CommentAuthormagavendon
    • CommentTimeAug 17th 2012
     

    The hover does work. That’s not the problem. It’s the color property I’m having problems with.

    On the page I’m looking at specifically, I’ve got a few things.
    I have 3 sections: Races, Meta-Info, and People.
    Under Races I have Ermeyer, Sneetch, and Tryclas each are a link to another wiki page.
    Meta-Info contains links to Classes, Dice, DoW-Log, DoW-Log (by person), Races, Race Templates, and Rules.
    Finally, under People I have Peter and Ralph.

    Originally I had used inline CSS to change the colors and decorations of the individual links on the page. An example would be, "{color:red;text-decoration:none;}google":http://www.google.com. The only three links on the page which I have changed from that inline CSS style are Ermeyer, Classes, and Peter. I have switched these to HTML for purposes of testing out the new CSS capabilities now open to us. These three links are currently the ones that are not changing colors, they are the default blue color that the anchor tag changes them to.

    Here’s the code that appears to be working:
    /* Working Code */
    a {text-decoration: none;
    color: yellow;}

    p {color: #660099;}

    a:hover {color: black;}
    /* End of Working Code */

    And here’s the code that appears to be failing:
    /* Failing Code */
    .races {color: red;}

    .meta {color: orange;}

    .people {color: green;}
    /* End of Failing Code */

    The color for all anchors listed in the working code above was a personal test to see if the color property even worked at all for me. It does, it turns all the links that Obsidian Portal supplies off to the side yellow, but the three links I care about for this test, Ermeyer, Classes, and Peter, do not change to yellow. They still remain the default blue color.

    Secondly, the color for all paragraphs is also another personal test to see if the color property was only having problems with the anchor tag and sure enough all my text changed to the purple color I selected.

    Finally, I have written a simple test file on my computer simply called test.html which has two links each referencing a different class from the CSS file I wrote to go with test.html called test.css. These two links change colors as well, and aside from the class name itself I have copied the CSS code exactly from test.css here to Obsidian Portal, so I cannot see that the code is at fault here.

    I am beginning to think there is some strange bug that is just affecting my campaign. After I finish this post I’m probably going to create an entirely new wiki page and see if the links can change colors from there and, failing that, I will create a brand new test campaign as well and try once again from that test campaign.

    If you have any ideas I’ll be glad to try them.

    •  
      CommentAuthormagavendon
    • CommentTimeAug 17th 2012 edited
     

    Update to above:

    I created a new page in which the races class and the people class both successfully changed the color of the link they were associated with, but the meta class did not.
    Thus red and green worked but not orange.

    Then I went to my test campaign and created a new test page there, after creating three CSS classes for red, green, and orange colors. I first tried the classes out with plain text using the span tag to change the color with each class and this worked perfectly. Then I created 3 links each using one of the three classes that I had created and none of them changed colors.

    Update 2:
    And for purposes of being thorough I returned to the original wiki page I had been checking my CSS with and put span tags around the category names and associated them with their respective classes to see if the text color would change accordingly. Sure enough, it worked. So the problem definitely seems to like with the color property among the anchor tag.

    •  
      CommentAuthorgaaran
    • CommentTimeAug 17th 2012
     

    ahhh… I THINK i’m seeing your issue, as I’m skimming while I’m at work, but try this:

    a{
    text-decoration: none;
    }
    /*this will remove all underlines from links*/

    .races, .races a{
    color: red;
    }

    .meta, .meta a{
    color: orange;
    }

    .people, .people a{
    color: green;
    }

    a:hover {
    color: black;
    }

    That will change the color of text AND links within the .races, .meta, and .people classes to the appropriate colors. Then when you hover over one of the links, it will turn black.

    •  
      CommentAuthormagavendon
    • CommentTimeAug 17th 2012
     

    That didn’t seem to work, either. :(

    •  
      CommentAuthorgaaran
    • CommentTimeAug 17th 2012
     

    okay, let me clarify what you are trying to do in much fewer words:

    you have three sections: races, meta, and people.

    you want all the text (including links) in those sections to be red, orange, and green respectively.

    you want the text color in all of those sections to turn black when you hover over them.

    If I’m correct, set it up as follows:

    a{
    text-decoration: none;
    }
    .races, .races a{
    color: red;
    }
    .meta, .meta a{
    color: orange;
    }
    .people, .people a{
    color: green;
    }
    a:hover {
    color: black;
    }

    then in the HTML:

    <div class=“race”>
    <a tag></a><br>
    <a tag></a><br>
    .
    .
    .
    </div>

    try that for each section, replacing the class. I think it’s the <p> tags on your page that are throwing it off.

    •  
      CommentAuthormagavendon
    • CommentTimeAug 17th 2012
     

    Alright! Placing everything inside the div tag and assigning the class to that respective div works!
    Thanks for all the help and advice! :D

    •  
      CommentAuthorgaaran
    • CommentTimeAug 17th 2012
     

    not a problem, glad i could help! :) anything for someone who actually reads my blog ;).

    •  
      CommentAuthortic
    • CommentTimeAug 17th 2012 edited
     

    Sorry, I haven’t read ALL of the subsequent posts since magavendon’s initial one, but looking at the code you pasted and what you’ve said … am I right that it’s the links you’re trying to change? EDIT I see you got your hands on some code that works, now. Awesome! Thanks Gaaran. Still, I’m going to take a minute to explain the CSS you initially posted…

    a.clean, .meta, .people {text-decoration: none;}

    I don’t think you understand what you’re telling your CSS to do, with this line of code. First off, when you put “a.clean,” you’re telling it to style an <a> (link) tag with the class “clean.” You would have to put <a href=“my linka here” class=“clean”> in order to use it.

    Second, your “.meta” and “.people” are doing nothing specific about links, but anything that’s given the class “meta” or “people” will apply the CSS you’ve provided.

    When you’re putting multiple classes in the same declaration, however, keep in mind that after the comma you have to start your declarations all over. The code above, styling “a.clean, .meta, .people” is basically doing the following:

    a.clean {text-decoration: none;} .meta {text-decoration: none;} .people {text-decoration: none;}

    The rest of the code you have…

    .races {color: red;} .meta {color: orange;} .people {color: green;}

    This also has nothing to do with links. This is colouring the text in HTML classes, but only the “regular” text.

    a:hover {color: black;}

    This is the correct CSS code to change the hover text, which is why it is working properly.

    I think what you want to do is something more along the lines of…

    .clean a, .meta a, .people a {text-decoration: none;} .races a {color: red;} .meta a {color: orange;} .people a {color: green;}

    The only difference between a.clean and .clean is that a.clean will only work if an A tag has the .clean class applied to it. The same way that you could put p.clean and that would only apply to a P, or div.clean and that would only apply to a div. If you put .clean with no specification, it will work for anything that has the clean class.

    Basically, “.clean” is like putting “a.clean, p.clean, div.clean, span.clean, img.clean, every-other-thing-under-the-sun.clean” while “a.clean” is really specific. Specifying classes in relation to specific properties is useful if you want to use the “clean” class in more than one place, and have it do different things every time. EG, you could set it so that when “clean” is a DIV it has a margin of 40px, but when it’s a P it has no margin but padding 10px. Or whatever.

    Another edit!

    Oh hey, I’m going to clarify something that I think might be causing a little confusion for some people. (Not necessarily in this case, just in general!)

    a.myclass {text-decoration: none;}
    The above means that an <a> property WITH the class of “myclass” applied to IT will receive text-decoration: none;.

    Compare this to…
    .myclass a {text-decoration: none;}
    THIS means that all of the <a>‘s inside the property with the class “myclass” receive text-decoration: none;.

    Also compare to…
    a .myclass {text-decoration: none;}
    Putting a space between the “a” and the “.myclass” means that the CSS will only apply when “myclass” is within a parent element of A. i.e. you would need to put <a href=“blablabla”><div class=“myclass”></div></a> in order to use this one.

    •  
      CommentAuthorLangy
    • CommentTimeAug 20th 2012
     

    One thing that’d be really nice is if all tags attached to a page were added to that page’s body as a class. So if a page has the ‘character’ tag, it’d get the ‘tag-character’ class in the Body element. That’d allow (relatively) easy automated styling of nav bars and the like.

  1.  

    I’ll throw one more suggestion into the heap here as well.

    The Filter By Tag header in the right navigation bar is the only header in that section that isn’t its own block (it lives in the same block as List Pages). That’s fine if that’s how it’s supposed to be, but it would be nice if it had a class or id so it could be targeted for styling. I can’t think of a way to single it out in the current setup.

    Example

    •  
      CommentAuthortic
    • CommentTimeAug 22nd 2012 edited
     

    Mirroring Chainsaw’s desire for the Filter By Tag heading to get its own class or ID 1000 times over. It doesn’t need any default styling, just name the thing SOMETHING so that, if we need to, we can.

    Edit Oh my god, Chainsaw, I love that page’s styling! It’s classy x100.

    •  
      CommentAuthorLord_AO
    • CommentTimeAug 22nd 2012
     

    I second tics assessment!!!

    Lord_AO
    Deepest Darkness

    •  
      CommentAuthorkillervp
    • CommentTimeAug 28th 2012
     

    I have 2 requests-
    1- This should be a sticky.
    2- All CSS coding questions should go here, in one mass CSS forum spot, for easier reference.
    My 2 cents.
    killervp
    A God…Rebuilt
    Duskreign’s First Ever COTM
    OP’s COTM April 2012

  2.  

    Finally got the hang of the css for my custom navigation bar. Legends of Azebron

    Now if I just need to work on getting the content areas of the wiki pages to line up better. I can’t get them to measure out the same as the home page…

    •  
      CommentAuthorkillervp
    • CommentTimeAug 29th 2012
     

    Hard to help on private campaigns Mercutio.

  3.  

    Oops! Must have accidently hit the private button lol! It’s back to public now…

    •  
      CommentAuthormadartiste
    • CommentTimeAug 30th 2012
     
    Mercutio, what isn't lining up? It looks all right to me -- though you might want to put some left and right padding on the page-body class so your text isn't flush up against the edge of the leather background. That or make a class for p.page-body to add the padding instead. Having the text right up against the edge makes it a bit less pleasant to read.
    •  
      CommentAuthorLord_AO
    • CommentTimeSep 12th 2012
     

    OK, weird question. Up til recently my CSS banner has been perfect. Now …I can’t see it. It used to be occassionally it wouldn’t fully upload the pics, now its always. Now its just a pure white area thats hard to read…. cue the Twilight Zone music.

    Deepest Darkness

    •  
      CommentAuthormadartiste
    • CommentTimeSep 12th 2012
     

    Hey Lord_AO, this doesn’t really answer your question, but when I used the Chrome Developer tools to inspect your elements only the Wiki background was loading. All the others showed up as broken images.
    Not sure what the deal is, but you might want to confirm the URLs for your background images are still good.
    I didn’t see anything on first glance that was wrong other than that.

    •  
      CommentAuthorLord_AO
    • CommentTimeSep 12th 2012
     

    Um. Nevermind…I did done did figured it out. lol Some how the pics were deleted so I just had to re-up them and re-linkafy them. Still odd though.

    •  
      CommentAuthorsaethone
    • CommentTimeSep 12th 2012
     

    on the Characters page – and I believe it only shows while on your own campaign, there is a Header above the “Player Characters” that just says “Characters” and is classed as “filter-tag-description”, which appears to be an off-limits class – would there be anyway this could be changed to the same class as the wiki page headers?

    The Items page has the same thing going on, the header is classed as “filter-tag-description” as well. The only other page with one of those headers is the Maps page but that one does have its own class

    •  
      CommentAuthormadartiste
    • CommentTimeSep 12th 2012
     

    @saethone, Well, you could try something like #character-list h2 for your selectors maybe? It seems to be the only h2 tag in the character-list div.
    I haven’t played too much with that particular piece just yet. Hopefully it will work.

    •  
      CommentAuthorsaethone
    • CommentTimeSep 12th 2012
     

    Ah good call, I didn’t think to check that. I’ll try it later and post my results

    •  
      CommentAuthormadartiste
    • CommentTimeSep 12th 2012
     

    Okay, I tried it out and it worked. #character-list h2 { } should let you style that heading.

  4.  

    Am I a cheater? I hope not. I just got Firebug, and I am looking at some OP sites that use the custom CSS and I am seeing at how you all are using the CSS. I don’t understand it all, but it is really helping this dumb old gamer dude to understand the newfangled coding and how it works. Also Wolfhound has started a tutorial that has sparked my interest. I still have a ton to learn, and my brain is getting fuzzy, but I thought I’d pass on this Firebug for Firefox thing. I figure most of you know about it, or the other plug-ins available, but being new to this, I was excited to find it, and share it with others.

    •  
      CommentAuthorgaaran
    • CommentTimeSep 14th 2012
     
    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.
    •  
      CommentAuthortic
    • CommentTimeSep 14th 2012
     

    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!

    •  
      CommentAuthorKeryth987
    • CommentTimeSep 16th 2012
     

    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

    •  
      CommentAuthorkillervp
    • CommentTimeSep 17th 2012
     

    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
    Duskreign’s First Ever COTM
    OP’s COTM April 2012

    •  
      CommentAuthorgaaran
    • CommentTimeSep 17th 2012
     
    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.
    •  
      CommentAuthorLangy
    • CommentTimeSep 17th 2012
     
    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.
    •  
      CommentAuthorkillervp
    • CommentTimeSep 18th 2012
     

    Thanks Langy and Gaaran- as always! You 2 make me actually think I am starting to understand…

    •  
      CommentAuthorGMBill
    • CommentTimeSep 18th 2012
     

    Menu Bars

    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

    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; }

    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)

    •  
      CommentAuthorKeryth987
    • CommentTimeSep 19th 2012
     

    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

    •  
      CommentAuthorgaaran
    • CommentTimeSep 28th 2012
     

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

    •  
      CommentAuthormadartiste
    • CommentTimeSep 28th 2012 edited
     

    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.

    • CommentAuthorbislab
    • CommentTimeOct 5th 2012
     
    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?
    •  
      CommentAuthorLangy
    • CommentTimeOct 5th 2012
     

    The actual name of the font.

    • CommentAuthorbislab
    • CommentTimeOct 5th 2012
     
    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?
    •  
      CommentAuthorLangy
    • CommentTimeOct 5th 2012
     

    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.

    • CommentAuthorbislab
    • CommentTimeOct 5th 2012
     
    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.
    •  
      CommentAuthorjtokay
    • CommentTimeOct 14th 2012
     
    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?
    •  
      CommentAuthorSavannah
    • CommentTimeOct 14th 2012
     

    a.create-wiki-page-link {color: red;}

    Obviously you can put whatever color you want, but I like to keep mine red.

    •  
      CommentAuthorjtokay
    • CommentTimeOct 15th 2012
     
    Great, thanks so much!!