CSS Tidbits Compilation

Kallak
Kallak
edited April 2013 in Campaign Portal Building
Greetings all,

I'm starting this thread with the intent of having it act as sort of a repository for useful, handy or interesting snippets of CSS code. I've seen more than a few code bits in this forum post or that, and I assume that I can't be the only one who wishes they were all in one place. With that said, I release this into the wilds of OP, and hope that it grows and thrives.

Please Number entries so that any discussion that may occur can be more easily followed.
All the best,
- Kallak

Comments

  • Kallak
    Kallak
    Posts: 1,090 edited May 2013
    *Item 1: Scrolling Sidebar Filters*
    Credit: "Kallak":http://www.obsidianportal.com/profile/Kallak

    Ever had your "sort by filter" sidebar element make the secondary column of your campaign three times as long as your actual content? Sick of it? Me too. Here's a snippet of code to cut that bad boy down to size, with a scroll for the filter list.

    +For the Wiki:+
    @#wiki-filter-by-tag-sidebar ul { max-height:110px;overflow:auto; }@

    +For the Character Page:+
    @ul.npc-tag-list { max-height:110px;overflow:auto; }@

    *Notes:* It should be noted that the scroll bar does not appear on tablets, I'm assuming this is due to the lack of a mouse interface. The scrolling still works, just isn't immediately apparent to tablet users.
    Post edited by Kallak on
    All the best,
    - Kallak
  • madartiste
    madartiste
    Posts: 328
    Kallack, those are awesome! I may have to nab that filter one. It never occurred to me to try that. Great work!
  • Kallak
    Kallak
    Posts: 1,090 edited June 2013
    *Item 2: Scrolling Fan Box*
    _See Item 8 for alternate method_
    Credit: "Kallak":http://www.obsidianportal.com/profile/Kallak

    Similar to Item 1 in concept, this tidbit enables you to cut down the overall length of your secondary column by setting a "max-height" to your fan sidebar box and having it scroll through your campaign's fans. *you will want to read the notes on this entry carefully*

    +Code:+
    @#campaign-fans-sidebar.sidebar { max-height:130px;overflow:auto;padding-top:79px; }
    #campaign-fans-sidebar.sidebar h4 { position:absolute;width:185px;background-color:#202020;padding-top:10px;margin-top:-79px; }
    #favorite-link-XXXXX.favorite-link { width:185px;position:absolute;margin-top:-42px;padding-top:4px;background-color:#202020; }
    #favorite-link-XXXXX.favorite-link span { padding-top:1px; }@

    *Notes:*
    [1] Because the fan avatars in the OP Fan Sidebar Box are not set up as an unordered list, this tidbit is a bit more "cobbled together" so to speak. In order to achieve the scroll, the position of the header and fan count had to be set to absolute, with the background set to match that of the box. The fan avatars then simply scroll behind them. This requires certain aspects (such as _background-color_ in this case) to be hard-coded into the CSS. If your campaign uses (or intends to use) an image file as the background for your sidebar boxes, you may (unfortunately) need to line up multiple background images to get the look to be seamless with this code setup - *I recommend using Item 8 as an alternative in such cases*. This hard-coding also has the _width_ of the header set, so on campaigns with few or no fans, it will leave a gap where the scroll bar would be. I recommend only using this tidbit if your fan count is in the 20+ range.

    [2] You will need to replace "XXXXX" (in the 3rd and 4th lines of this code) with the 5 digit number of your campaign. You can get this number by using "Inspect Element", "View Source" or the like. Methods may vary based on your browser of choice.
    Post edited by Kallak on
    All the best,
    - Kallak
  • Bookscorpion
    Bookscorpion
    Posts: 58
    Thank you for the scrolling sidebar filter! For someone who goes a bit crazy with tags, that is incredibly useful.

    Shadowrun: The Rat's Nest - COTM  November 2014

  • nellshini
    nellshini
    Posts: 18
    I second that! I'm just getting started on my wiki but that one line of css saved a ton of sidebar space.
  • Kallak
    Kallak
    Posts: 1,090 edited May 2013
    *Item 3: Renamed Nav Tabs*
    Credit: "madartiste":http://www.obsidianportal.com/profile/madartiste/ (with minor modifcation by "me":http://www.obsidianportal.com/profile/Kallak)

    Would you rather the "Characters" tab text say "Cast" or the "Adventure Log" say "Session Recaps!" - well here's how to do it.

    This sample shows the Adventure Log tab being renamed to "Journals"

    @.tabnav li.adventure-log a, .tabnav li.adventure-log a.active {font-size:0pt;max-height:14px;}
    .adventure-log a:before {content: "Journals";font-size:10px;}@

    *Notes:*
    [1] Minor tweaks to this code may be necessary if you make other style alterations to the nav tabs.

    [2] This code does not change the LINK associated with the tab(s) in question, only the text seen on the screen.
    Post edited by Kallak on
    All the best,
    - Kallak
  • wolfhound
    wolfhound
    Posts: 354 edited May 2013
    ^^^ Brilliant! Another great tidbit Kallak
    Post edited by wolfhound on
  • Kallak
    Kallak
    Posts: 1,090
    Well, can't take too much credit for that one. madartiste beat me to the punch. I was originally playing with the :before and max-width trying to hide the normal tab text. Was having issues with the width on different screen resolutions. Changing the font size to zero proved to work out nicely. My previous work just let me tweak her code slightly to fix the sizing error on the tabs themselves. Still awesome though.
    All the best,
    - Kallak
  • nellshini
    nellshini
    Posts: 18
    That's exactly what I was looking for in my other post. Much much easier than removing the navbar completely and replacing it. I haven't tried it yet on my campaign but I doubt it'll need a lot of tweaking to work right.

    Thanks!
  • madartiste
    madartiste
    Posts: 328
    Nellshini, it's not hard at all. I've tried it on a couple of our campaigns that have different looking navbars and it doesn't require much work at all. :)
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Kallak- I cannot thank you enough- definitely going to incorporate these- thanks for your awesome help as well madartiste!

    Just trying to help out.

  • madartiste
    madartiste
    Posts: 328
    No problem killervp! I've borrowed enough code around here myself.
    Plus, it's really fun to figure out these CSS puzzles. :)
  • Kallak
    Kallak
    Posts: 1,090 edited May 2013
    *Item 4: Left-aligned Secondary Column*
    Credit: "Kallak":http://www.obsidianportal.com/profile/Kallak

    As the name indicates, this tidbit puts your secondary column on the left hand side of your campaign page instead of the right. Maybe you are left handed, or maybe it's a left brain versus right brain thing. Whatever the case, you can use this snippet of code to to switch things up a bit.

    @#secondary-column {float:left;}
    #main-column {padding:10px 10px 10px 246px;}
    #main-column fieldset {border:0px;}
    #campaign-map-list, #campaign-comments {float:right;width:732px;}@

    EDIT: Comment and Map List issues resolved
    Post edited by Kallak on
    All the best,
    - Kallak
  • Kallak
    Kallak
    Posts: 1,090 edited May 2013
    *Item 5: Transparent OP Logo*
    Credit: "ChainsawXIV":http://www.obsidianportal.com/profile/ChainsawXIV and "Langy":http://www.obsidianportal.com/profile/Langy
    * _Chainsaw originally noted that the OP logo should be converted to transparent and provided a link to the image_
    * _Langy is the first person I could find that posted the appropriate code to swap to the transparent image_

    _There have definitely been other threads including this tidbit, but for completeness' sake, and so it doesn't get lost somewhere.._

    This code snippet makes the OP logo at the top of the screen transparent so it doesn't mess up your campaign background.

    @#logo h1 a { background-image: url("http://www.obsidianportal.com/assets/logo_transparent.png");}@

    *Notes:*
    The above code links to a version of the transparent OP logo that is housed on "obsidianportal":http://www.obsidianportal.com itself. I'm unsure as to why, but the graphic is slightly smaller for whatever reason. The address to the transparent logo originally posted by "ChainsawXIV":http://www.obsidianportal.com/profile/ChainsawXIV is below. That logo is a more accurate representation of the original logo in terms of size, and thus may be preferable to some users. Either is acceptable obviously, but I leave the choice up to the users.

    "http://omnichron.net/external/op/src/logo.png":http://omnichron.net/external/op/src/logo.png
    Post edited by Kallak on
    All the best,
    - Kallak
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    *Item 6: Scrolling Versions*
    Credit: Using Kallak's "scrolling"

    Trying to trim down your second column sidebar some more?

    #model-versions-sidebar { overflow: auto; max-height: 150px;}

    Heroes Unchained: CotM 2013

  • Kallak
    Kallak
    Posts: 1,090 edited June 2013
    If I can offer an improved version of Item 6 for you there Ninja, I'd say it would be better to have:

    @#model-versions-sidebar ul.previous-version-list { max-height:150px;overflow:auto; }@

    This allows you to have only the check boxes and associated links scroll. The sidebar box heading and compare functionality at the bottom end stays stationary with this setup, whereas with yours, the entire thing would scroll.

    Notes:
    [1] If you add @ at either end of your code instead of , it works as you are intending.

    [2] Don't be shy about putting yourself on that credit tag, it was your post, and I certainly don't own the concept of scrolling :) - now I *will* happily take a "modified by" credit.
    Post edited by Kallak on
    All the best,
    - Kallak
  • Basileus
    Basileus
    Posts: 585
    *Transparent Frames*

    An extremely simple tweak that I have found useful for making certain frames disappear. Essentially, you can use "transparent" as a color when setting border and background-color properties:

    @{border:1px solid transparent; background-color:transparent;}@

    For example, if you have a really nice background you would like to let shine through between your foreground windows, this will make the background window disappear (leaving only the background image behind it:

    @#content {border:1px solid transparent; background-color:transparent;}@

    Similarly, you can make a frame _and all its contents_ transparent or semi-transparent by using the opacity property, valued from 0.0 (completely transparent) to 1.0 (completely opaque):

    @opacity:0.8@

    Be careful though, as this affects all child objects, and can make text hard to read. For example, this will set foreground windows and content to be slightly transparent, so that you can see the background through it:

    @ #campaign-content {opacity:0.8}@
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Holy Crap, Basileus- I owe you for the shine through code! That is awesome!
    killervp
    "A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

    Just trying to help out.

  • Kallak
    Kallak
    Posts: 1,090 edited June 2013
    *Item 8: Expanding Fans Sidebar Box*
    _See Item 2 for alternate method_
    Credit: "robertkety":http://www.obsidianportal.com/profile/robertkety (addition of :after message by "me":http://www.obsidianportal.com/profile/Kallak)

    Another method for cutting down the overall height of your secondary column by hiding the avatars of your fans sidebar box. With this item, the avatars are hidden until the box is moused over by the user.

    @#campaign-fans-sidebar {height:84px;overflow:hidden;}
    #campaign-fans-sidebar:hover {height:auto;}
    #campaign-fans-sidebar #favorite-link-XXXXX.favorite-link:after {
    content: "Avatars on Mouseover";text-decoration:underline;color: rgb(79, 166, 206); }@

    +Notes:+
    [1] This tidbit is cleaner than Item 2 in execution as there are no fixed position elements or set widths, making it vastly more user friendly for people who use or intend to use an image as the background for their secondary column boxes. The tradeoff is that tablet users (lacking a mouse interface) may have difficulty with this one.

    [2] As with Item 2, you'll want to replace XXXXX with the correct number for your campaign. Simply "Inspect Element" or "View Source" to get this number.
    Post edited by Kallak on
    All the best,
    - Kallak
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Thanks Kallak and Robert Kety!

    Just trying to help out.

  • Basileus
    Basileus
    Posts: 585 edited June 2013
    Ah!, I was fiddling with doing something like that all yesterday and getting quite frustrated.

    The overflow statement was exactly what I needed.

    Doing something similar for all the sidebars.

    Thank you!
    Post edited by Basileus 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