Custom CSS Beta Discussion

1235725

Comments

  • berdman
    berdman
    Posts: 46
    Chainsaw thanks for confirming that. Thought I was losing my mind.

    Could we request an id on the
  • CraigCoxson
    CraigCoxson
    Posts: 20
    I know this isn't exactly CSS discussion, but, now that we have CSS I would ask that we get a section to specify custom nav bars. This should be something as straightforward as giving us the nav fields and allowing us to specify custom text and custom targets. Implementation would be a bit harder, as it always is, but it would allow many people I know to dispense with work-a-rounds they currently use for the nav bar and use the inherent nav bar, just with their personal links. This is one thing that many people are still looking for, and it would just about make the site perfect in my opinion. Sure, there are a couple of other things that would need to be fixed at that point, but none of them are pressing.
  • tic
    tic
    Posts: 44 edited August 2012
    Hi!

    I just finished wrestling with a really frustrating issue, so I'm going to post it here so that others know what might be causing their similar problems.

    There's two parts to this problem. The first part deals with EMs, and how different browsers deal with them -- namely firefox. Firefox will try to display partial pixels - if your font size, calculated between various EMs, works out to be a partial pixel -- 14.4 pixels, for instance, firefox will try to display those partial pixels, causing it to round that .4 differently from the way other browsers would. This results in the line heights of some elements on Obsidian Portal varying between browsers.

    Relevant affected elements: "wrapper" DIVs for the wiki, item, and character pages. If you are moving any elements up out of these pages, especially if you're trying to line something up with your header, YOU WILL HAVE PROBLEMS because the default font size is 14.4px. Firefox will want everything up 1 or 2 px higher than other browsers, because of the funny rounding differences.

    SOLUTION: Frigging set those things in pixels. Use the following code (or something like it) to do so:

    #campaign-content .wiki-page, #campaign-content .character-page, #campaign-content .item-page {font-size: 14px;}

    You don't have to use 14px. Use whatever size you want. This will make it consistent for you between browsers, and consistency is all we're really after with this solution.

    IMPORTANT: You must specify the #campaign-content ID, or this will change the font sizes of like everything on the page and I have no idea why. I don't know why the Campaigns / Games Nearby / etc bar at the top is letting wiki-page change its size. I don't know why my private message count is letting wiki-page change its size. I don't know why any of it is letting any of that happen, it just is, unless you specify that #campgain-content ID.

    Hope this helps alleviate someone's frustrations out there!
    Post edited by tic on
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Good advice Tic. Sizing by pixels is almost always the way to go, for the very reasons you've just outlined.

    As to why the rule you describe modifies everything, the answer is simple. The body tag on each page has its class set to a class that corresponds to the type of page it is, to allow for selective manipulation of the whole page by category (for example, if you wanted all wiki pages, but _only_ wiki pages to have a particular background). The same class is also applied to the content block of the page, so you can do exactly what you've done in that rule. Micah described this setup and his reasons for doing it that way in an earlier post in this thread.
  • CraigCoxson
    CraigCoxson
    Posts: 20
    Ok, did a little searching and came up with an implementation for my earlier idea. http://davidwalsh.name/create-html-elements-php-htmlelement-class

    This is just half of the answer, but the first example on the page shows how to implement it for making links, which is what I propose. The second half would be to have a database for each page (SQL) which you likely already have. PHP can make calls to databases, so instead of having the actual content of the page in the PHP call, you would put the database call. The Edit section of the page would have fields that would change the database entry. It would require a button to return the links to default settings, radio or otherwise, but you could easily set it up using this code so that we could specify custom links.

    Using a little tweaking, and a loop...well maybe a loop, too long since I actually did POHP coding and I was never really proficient then...anyway side comment aside, It might even be possible to set a custom number to the links, instead of the standard number there now.

    Something else to consider, even if people want to keep the current links as they are now, they would be able to change the order they appear using this tool, should it be provided.

    Since we are using Textile to enter things into the page, I'm pretty sure you've already disabled the end user use of PHP, since it's likely already in use on your page, all things considered.
  • CraigCoxson
    CraigCoxson
    Posts: 20
    @Savannah RE:Age of Worms

    I notice you have no content on a few of the pages. May I suggest, instead of blanking the content, that you blank the link?

    li.adventure-log {display:none;}

    That would remove the adventure logs link from all of your pages. The classes for every element of the nav bar are:
    .home
    .adventure-log
    .wiki
    .characters
    .items
    .forum
    .calendar
    .maps
    .comments

    !!!!CAUTION!!!!!! These are site-wide all user changes. do not use these unless you intend to make site-wide changes. Specifying these as a class of li will make it impact less of your site, but you are still altering the nav-bar elements here.

    That being said, if you wanted to simply alter some of the pages, and not all pages, you would have to specify the page you were on first:

    .adventure-log-list li.adventure-log {display:none;}

    This makes it so the adventure-log tab does not show when you are on the list of adventure logs. By the way, Firefox is great for finding the names of the specific elements, while Chrome seems to be better for finding out the current CSS for the elements. May be my settings, but I use both to easily determine what I am working with :)
  • Savannah
    Savannah
    Posts: 188
    Well, it's not anywhere near done, so I'm not surprised that I have blank pages -- I prefer blank to the automatic text that comes with new campaigns. I'd rather not take out nav bar elements since I want to see how it will look when I'm finished (and I don't want the hassle of undoing my changes when I need them back). But that's a useful tip, if I end up deciding I never want a nav bar element...
  • Dragnmoon
    Dragnmoon
    Posts: 26
    This thread has been very helpful everyone thanks!

    I noticed a few posts about the Side Nav Bar and the Normal Nav Bar

    Currently I am using the code "found here":http://www.obsidianportal.com/campaign/age-of-legends/wikis/html-templates-for-age-of-legends Posted by Arsheesh

    I was able to get my Background Image universal on all my pages using CSS

    Has anyone found a way to Do the same with the Side Bar and Nav Bar with linked images?

    I would like to keep the same look as my "Home Page":http://www.obsidianportal.com/campaigns/pathfinder-society-san-antonio but on all the pages, which I currently can't do.

    Any help would be great, keep up the great work all.
  • tic
    tic
    Posts: 44
    You could make the styling universal by using the same classes, but you would need to call the classes and define the link urls on every page you want it to appear on.
  • Dragnmoon
    Dragnmoon
    Posts: 26
    Thanks to Langy and tic I was able to get graphics behind the Nav Bar on "my page":http://www.obsidianportal.com/campaigns/pathfinder-society-san-antonio.

    Here is the Code I am using so others can use it and adjust for their preferences.

    /* NAVIGATION BAR */

    div .tab-container {
    background-image:url(Url of Image here);
    width:728px;
    height:74px;
    Top: -10px;
    Position: relative;
    }

    .tabnav{ display:inline-block; width:auto; margin:1px auto 34px auto; border-style:none; background:none;
    }

    .tabnav a:link,.tabnav a:visited,.tabnav a:active,.tabnav a:hover{ background:none; border-style:none; color:#681819; font-family:Metal Mania; font-weight:normal; font-size:21pt; margin: 20px 14px 0px 14px; padding:0px 7px 0px 7px;
    }

    .tabnav a:hover{ color:Red;
    }

    .tabnav a.active:link,.tabnav a.active:visited,.tabnav a.active:active,.tabnav a.active:hover{ background:none; border-style:none; color:Red; margin: 20px 14px 0px 14px; padding:0px 7px 0px 7px;
    }
  • tic
    tic
    Posts: 44 edited August 2012
    This works great even with images - just use the following:

    .tab-container { position: relative; top: -10px; left: *as needed* px; background-image:url( *image url* ); width: *image width* px; height: *image height* px;}
    .tabnav {display: inline-block; background: none;}
    .tabnav a:link, .tabnav a:visited, .tabnav a:active, .tabnav a:hover {background: none; border: none; padding: 0;}
    .tabnav a:link.active, .tabnav a:visited.active {background: none; border: none; padding: 0;}

    And then code such as the following for each tab, to define the images used for the links:

    .tabnav li.home a {display: block; font-size: 0; width: *image width* px; height: *image height* px; background: url( *image url* );}
    .tabnav li.adventure-log a {display: block; font-size: 0; width: *image width* px; height: *image height* px; background: url( *image url* );}
    ... and so on and so fort for each link.

    The only problem, and the only reason NOT to use this technique instead of plastering your same headers on every page like we've been doing in the past, is __if your links lead to non-default pages.__ If you've created a wiki page called "Characters" and have the "Characters" link leading there, there is currently no way to do that with the existing navigation bar. Similarly, there is no way to add links that don't ordinarily exist on the current navigation bar.

    __Buuuuuuttt...__ if we could have an option to change where the navigation bar links lead in our Campaign Management (hi Micah ily), then we'd all be able to happily use the existing navigation, and would no longer need to a) stick a new position: relative DIV overtop of it and b) silently curse the pages we can't edit as the banes of our existence (such as the comments, characters, items, etc pages)
    Post edited by tic on
  • madartiste
    madartiste
    Posts: 328
    tic: Ah hah! I knew there had to be a way to make images work in the navbar! Thank you. That was extremely helpful, and I'm not sure I would've figured that out on my own. :)

    Thanks to all the pioneers who've been helping out the rest of us!

    My css skills are pretty darned rusty. I seem to be having trouble styling the text color in the #add-npc-sidebar spot in the #secondary-column on the characters page. The h4 colored fine, but the rest of the type remains stubbornly white. Anyone have a suggestion? I'm sure it's something simple I'm missing.
  • tic
    tic
    Posts: 44
    Have you tried !important?
  • madartiste
    madartiste
    Posts: 328
    tic, I actually hadn't, but it didn't seem to help. Thank you, though. I'm pretty sure I've just got my selectors wrong. I've tried #secondary-column #add-npc-sidebar and #content #add-npc-sidebar and also variants of #add-npc-sidebar .sidebar as well as just plain ol' #add-npc-sidebar. I've lost track of what logic I was using to try to suss out the right combination. :)

    I'm fairly certain this is one of those facepalm moments where I'm missing the obvious.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    "The only problem, and the only reason NOT to use this technique instead of plastering your same headers on every page like we’ve been doing in the past, is if your links lead to non-default pages. If you’ve created a wiki page called “Characters” and have the “Characters” link leading there, there is currently no way to do that with the existing navigation bar. Similarly, there is no way to add links that don’t ordinarily exist on the current navigation bar.

    Buuuuuuttt… if we could have an option to change where the navigation bar links lead in our Campaign Management (hi Micah), then we’d all be able to happily use the existing navigation, and would no longer need to a) stick a new position: relative DIV overtop of it and b) silently curse the pages we can’t edit as the banes of our existence (such as the comments, characters, items, etc pages)" Thanks Tic, and all else that have helped out us CSS newbs...
    I also beg Micah, Jerry, and Ryan to help us with this issue! I have way too big a site to move everything back to its "proper" spots (I put characters & items on wikis, so the tags were consistent).

    Thanks again for all the efforts! My players & I all appreciate it- the player log coding has become much easier!
    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.

  • Savannah
    Savannah
    Posts: 188
    Yes, being able to put in our own links for the nav bar would be _awesome_!
  • Kallak
    Kallak
    Posts: 1,090
    "Buuuuuuttt… if we could have an option to change where the navigation bar links lead in our Campaign Management (hi Micah ily), then we’d all be able to happily use the existing navigation, and would no longer need to a) stick a new position: relative DIV overtop of it and b) silently curse the pages we can’t edit as the banes of our existence (such as the comments, characters, items, etc pages)"

    You can definitely add a custom menu setup to comments BTW.
    All the best,
    - Kallak
  • Langy
    Langy
    Posts: 364
    So, I just fixed an issue with OP's textile rendering that's bugged me ever since I started gaming on it. Namely, the 'footnote' and the 'underline' tags. GURPS (the game I play) utilizes a brackets to denote character point costs, so making everything in brackets be a footnote really annoys me, and since this is an RPG site we use lots of +s, too. The following CSS changes fix these issues:

    ins {
    text-decoration:inherit;
    }

    .footnote a{
    text-decoration:inherit !important;
    color:inherit !important;
    cursor:text !important;
    }

    .footnote a:hover{
    text-decoration:inherit !important;
    color:inherit !important;
    cursor:text !important;
    }

    .footnote {
    line-height: inherit;
    vertical-align: inherit;
    font-size: inherit;
    }

    .footnote:before {
    content:'[';
    }

    .footnote:after {
    content:']';
    }

    The only lingering 'issue' is that the 'footnotes' are still links. I doubt I can get rid of that minor annoyance, but it isn't a big deal.
  • tic
    tic
    Posts: 44 edited August 2012
    Langy, if you surround something in two equal symbols it won't do any Textile stuff to it. I use it all the time for dem +'s.

    e.g.

    @==[1]==@
    Post edited by tic on
  • Langy
    Langy
    Posts: 364
    Yes, I know. But doing that is annoying. By using the CSS I posted, I no longer need to do that.
  • tic
    tic
    Posts: 44 edited August 2012
    Oh, okay. Yeah, it can be annoying to need to surround everything by more Textile styling just to avoid Textile styling.

    I would actually really like if we could add an option to format posts in plain old HTML, instead of Textile. I know it's not helpful for everyone around the site, and not necessarily for every post, but for some of us (or at least for me) it's a little annoying that I need to squeeze a bunch of DIV tags all onto one unreadable run-on-forever line to avoid undesired spaces inresting themselves between them.

    It would me much more readable if I could do, say,

    a bunch of content here, bla bla bla,

    more content, pretend this is really long, but I just don't want to stick all that Lorem Ipsum into this post?

    instead of,

    a bunch of content here, bla bla bla,more content, pretend this is really long, but I just don't want to stick all that Lorem Ipsum into this post?

    Because with the above, I need to hunt and peck around for where my divs end and begin, so I can edit the right content. Two divs with that little content inside them doesn't really illustrate the point, but it gets weird when you have 8 or 9 in a row, and some of them just contain numbers or single words, while others are lengthy paragraphs?
    Post edited by tic on
  • Kallak
    Kallak
    Posts: 1,090
    I definitely know what you mean there Tic. The worst is when you have it all set up nice, and you add something somewhere else on the page and suddenly you have to rearrange it because for whatever reason, the change to another UNRELATED part of the page has messed it up. God that is annoying.
    All the best,
    - Kallak
  • madartiste
    madartiste
    Posts: 328
    Oh, maybe someone can help me with this too:
    When I try to use a font through Google Web Fonts that has the word "script" in it's name, I get an error when I call it in the CSS. Whatever gets used to check the css for problems evidently detects that as potentially harmful script.
    Has anyone found a way around that?
  • gaaran
    gaaran
    Posts: 740
    So i've just begun playing around with this new feature, which is amazing, and I was wondering if there was a way to make three background images appear vertically, if the second one repeats. For example:

    #secondary-column .sidebar {
    border:none;
    background: none;
    background-image: url('http://i1246.photobucket.com/albums/gg610/dqotw/sidebarTop.png'), url('http://i1246.photobucket.com/albums/gg610/dqotw/sidebarCenter.jpg'), url('http://i1246.photobucket.com/albums/gg610/dqotw/sidebarBottom.jpg');
    background-position:center top, 0 14px, center bottom;
    background-repeat: no-repeat, repeat-y, no-repeat;
    }

    The first image appears fine, then the second one tiles vertically, until the bottom of the element its in. The third image never appears, which makes sense, looking at the code, but I was wondering if there was a way to fix that. Thanks guys, I'm looking forward to seeing what more people come up with with this powerful new editing feature!
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    I will admit that I am anxious to see what someone like gaaran, who we all have stolen so much from in the past, does with the new CSS...

    Just trying to help out.

  • madartiste
    madartiste
    Posts: 328
    Hi Gaaran. I've actually gotten this to work. I borrowed my code from Chainsaw's HRSE campaign: http://www.obsidianportal.com/campaigns/hrse

    The only difference I see is that I put the center portion of the image last in the list and set it's background position as center top.

    So:
    #secondary-column .sidebar {
    border:none;
    background: none;
    background-image: url('http://i1246.photobucket.com/albums/gg610/dqotw/sidebarTop.png'), url('http://i1246.photobucket.com/albums/gg610/dqotw/sidebarBottom.jpg'), url('http://i1246.photobucket.com/albums/gg610/dqotw/sidebarCenter.jpg');
    background-position:center top, center bottom, center top;
    background-repeat: no-repeat, no-repeat, repeat-y;
    }

    I didn't experiment with it much, honestly, so I'm not sure how much the order of the files plays into it.
    It definitely can work -- and looks really nice!
  • Langy
    Langy
    Posts: 364
    I'd like to request that tables created in Textile have each row automatically assigned specific classes. Specifically, I'd like the first row to get something like a 'table_header' class, the next row to get a 'row_even' class, the next to get 'row_odd', etc. The final row can get both the even/odd designation and a 'table_footer' class.

    At the very least, the even/odd designations would be very useful. You could utilize this to very quickly and easily zebra-stripe tables, for example, which can enhance readability.
  • gaaran
    gaaran
    Posts: 740
    Thanks Sara, I wouldn't have thought to use the designation "top" to put it at the bottom (probably because I'm learning how to do this as I go :). And Killer, thanks for that, so far I'm just playing around with this and learning how to use it, but Rase and I are working on an overhaul for our play by post game, I'll certainly put up a link when we're ready to unveil! :)
  • gaaran
    gaaran
    Posts: 740
    Okay everyone, here's what I've come up with over the past few day, learning the CSS and generally having a grand old time coming up with this redesign. I wasn't going to unveil it until it went live on our site, but that's going to be a little while, because we have a lot of work to do on content, and I was excited with what I've come up with, so here is the test page! (The iPhone design is already in use on our main page, I was just including it to have a little content stuff, to see what I could do using global css as opposed to in-line). I'm looking for feedback on any of the changes that were previously not viable (anything that's not in the content section pretty much). If there are things you particularly like or dislike, or if you have suggestions, I'd love to hear them.

    For those of you still working with the CSS, I've included my entire custom style sheet on one of the adventure logs (it's about 370 lines). Let me know what you think!

    "The Test":http://www.obsidianportal.com/campaigns/melekar-test
  • tic
    tic
    Posts: 44 edited August 2012
    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.":http://www.obsidianportal.com/campaigns/safira
    Post edited by tic on
Sign In or Register to comment.

March 2024
Wrath of the Highborn

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