Home › Discussions › Campaign Portal Building › CSS Tidbits Compilation - Campaign Portal Building Discussions on Obsidian Portal Community Forums
CSS Tidbits Compilation
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.
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.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
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.
- Kallak
_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.
- Kallak
Shadowrun: The Rat's Nest - COTM November 2014
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.
- Kallak
- Kallak
Thanks!
Just trying to help out.
Plus, it's really fun to figure out these CSS puzzles. :)
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
- Kallak
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
- Kallak
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
@#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.
- Kallak
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:[email protected]
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}@
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.
_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.
- Kallak
Just trying to help out.
The overflow statement was exactly what I needed.
Doing something similar for all the sidebars.
Thank you!