Custom CSS Beta Discussion

13468925

Comments

  • magavendon
    magavendon
    Posts: 112
    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":http://www.obsidianportal.com/campaign/fronos/wikis/main-page you go.
  • gaaran
    gaaran
    Posts: 740 edited August 2012
    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.
    Post edited by gaaran on
  • magavendon
    magavendon
    Posts: 112 edited August 2012
    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.
    Post edited by magavendon on
  • gaaran
    gaaran
    Posts: 740
    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.
  • gaaran
    gaaran
    Posts: 740
    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.
  • magavendon
    magavendon
    Posts: 112
    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.
  • magavendon
    magavendon
    Posts: 112 edited August 2012
    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.
    Post edited by magavendon on
  • gaaran
    gaaran
    Posts: 740
    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.
  • magavendon
    magavendon
    Posts: 112
    That didn't seem to work, either. :(
  • gaaran
    gaaran
    Posts: 740
    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:






    .
    .
    .


    try that for each section, replacing the class. I think it's the tags on your page that are throwing it off.
  • magavendon
    magavendon
    Posts: 112
    Alright! Placing everything inside the div tag and assigning the class to that respective div works!
    Thanks for all the help and advice! :D
  • gaaran
    gaaran
    Posts: 740
    not a problem, glad i could help! :) anything for someone who actually reads my blog ;).
  • tic
    tic
    Posts: 44 edited August 2012
    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 (link) tag with the class "clean." You would have to put 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 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 '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 in order to use this one.
    Post edited by tic on
  • Langy
    Langy
    Posts: 364
    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.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    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":http://www.obsidianportal.com/campaign/chainsawxiv-test-campaign/wikis/adventure-log
  • tic
    tic
    Posts: 44 edited August 2012
    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.
    Post edited by tic on
  • Lord_AO
    Lord_AO
    Posts: 38
    I second tics assessment!!!

    Lord_AO
    "Deepest Darkness":http://www.obsidianportal.com/campaigns/deepest-darkness
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,968
    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":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.

  • Mercutio361
    Mercutio361
    Posts: 16
    Finally got the hang of the css for my custom navigation bar. "Legends of Azebron":http://www.obsidianportal.com/campaigns/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...
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,968
    Hard to help on private campaigns Mercutio.

    Just trying to help out.

  • Mercutio361
    Mercutio361
    Posts: 16
    Oops! Must have accidently hit the private button lol! It's back to public now...
  • madartiste
    madartiste
    Posts: 328
    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.
  • Lord_AO
    Lord_AO
    Posts: 38
    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":http://www.obsidianportal.com/campaigns/deepest-darkness
  • madartiste
    madartiste
    Posts: 328
    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.
  • Lord_AO
    Lord_AO
    Posts: 38
    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.
  • saethone
    saethone
    Posts: 153
    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
  • madartiste
    madartiste
    Posts: 328
    @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.
  • saethone
    saethone
    Posts: 153
    Ah good call, I didn't think to check that. I'll try it later and post my results
  • madartiste
    madartiste
    Posts: 328
    Okay, I tried it out and it worked. #character-list h2 { } should let you style that heading.
  • PhoenixMark
    PhoenixMark
    Posts: 90
    Am I a cheater? I hope not. I just got "Firebug":https://getfirebug.com/, 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":http://www.obsidianportal.com/campaign/dfd/wikis/css-4 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.
Sign In or Register to comment.

September 2022
Merovia

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