Custom CSS Beta Discussion

1171820222325

Comments

  • Thorvaldr
    Thorvaldr
    Posts: 141
    @Wildhunt78: I assume you mean dividing headers, as in organizing/moving the characters spacialy? There doesn't seem to be a good way to do this.

    The really hack way that I can think of can organize your characters into 3 groups. For the first group (Lets say PC's), put a space in front of their names. This will put them in order at the beginning of the list. Don't do anything special for the second group. For the last group, use Alt-255 at the beginning of their name. This will look like a space, but alphabetically, comes after all of the other letters. (Literally, just hold down the [Alt] key, hit [2] [5] [5], and release the [Alt] key.) And now your characters will be somewhat organized...ish!

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • Wildhunt78
    Wildhunt78
    Posts: 17
    Thank you Thorvaldr, it will do for now. It was your page I have been checking out today along with your tutorials but I was hoping to keep it simple.
    Beautiful site by the way.
  • Torg_Smith
    Torg_Smith
    Posts: 10
    Is there a way to use the colors as defined on the Style tab of the Settings page in CSS? For example I want the headers to use the campaign_color1. When I inspect the settings page, it looks like that is what the name is. I am trying to create reusable code for my campaigns.

    Something like this.
    h1, h2, h3, h4, h5, h6{ color: #campaign_color1; }
  • Meagoinc
    Meagoinc
    Posts: 26
    @ Pils: I *_love_* the way that looks. So clean! So composed! So colorful! (No lines through the middle of the entry!) I love that the border even applies to the adventure log links on the side. Would you mind sharing your CSS?

    @ Kallak: Ooo, that looks really useful! I'm going to have to think of how I could make a more manuscript-looking version...

    @twiggyleaf: Everyone has their preferences! I think I would like the new adventure logs if I were going space age, or didn't have such an obsession with consistency, or such an obsession with parchment... but the sans-serif everywhere makes me weep, the scrolling with the calendar "telling" you where you are is massively inconvenient to me (I'd rather know things are on page two and click there or use the calendar as a navigating device where I can go to my entries from April by clicking on April. It's so unintuitive now! I am embarrassed to convey how much time I spent clicking on the months trying to get to my entries...), and I loathe these carat shaped arrows and lines and dots and everything trying to look like Windows 8 or the new Gmail-- and I can't customize it yet with my limited knowledge, and there's all of a sudden so much more to customize/ erase (I have a lot of CSS learning to do). I'm trying to use my limited knowledge of the Middle Ages to make an immersive site, I don't want it to look like my flipping 2013 email client! That was what was so beautiful about the simplicity of the pre-Reforge site, honestly; its simplicity made it flexible. This new format drives me a bit up the wall...
    ...but I like what you've done with your adventure logs, it's got nice texture in the background, and is much better than having abortive text, as I've got! Do you just put in a picture and a couple of breaks, and just click through to the whole thing from the title then?

    The adventure logs are the last BIG thing we've had to face in the reforge, and we just haven't addressed it because there's so much new coding to do, and so much of it just doesn't look _right_ anymore. I see that coding in the "container" and pushing the text so it doesn't appear in the preview and then linking to it is definitely the way to go, thanks folk! Now I just have to figure out how to do it! (All advice appreciated! :p )
  • Pils
    Pils
    Posts: 149 edited December 2013
    I made this pages thanks with the help of the OP community, thanks folk!

    Here the full "CSS of al-Qadim / Golden Voyages campaign":https://aq-golden-voyages.obsidianportal.com/wiki_pages/css
    (the Content Max Width I use is 1165px in the advanced setting)

    If you have difficulties to dissect it, feel free to contact me!

    -Pils
    "Dark Sun / La Décade des Héros":https://dark-sun-a-trova.obsidianportal.com/: Face the Fire of the Dark Sun... a World ravaged by Sorcery!
    "Al-Qadim / Golden Voyages":https://aq-golden-voyages.obsidianportal.com/: Who among you dares to challenge the high seas?
    Post edited by Pils on

    -Pils

    Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)

    Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!

    (And I'm so soooorry for my poor english...)

  • NinjaFlashX
    NinjaFlashX
    Posts: 94 edited December 2013
    Hmm....anyone know how to display the entire contents of an adventure log post? Actually, I'm really kewl with the new default of partially displaying/fade out posts. But I personally enjoy when going to someone's adventure logs if there is an "index" of all of the adventure logs with which to read them in the correct order. As our group will sometimes go back and write a dated log for some interesting future setup within the game.

    So the first log, titled "The Unchained":https://heroesunchained.obsidianportal.com/adventure-log (go figure ;-), will always be the newest with an index of the previous adventures in order.

    Any ideas/help would be greatly appreciated. I've tried a couple of different CSS tricks with no luck. Thanks.

    Flash
    "Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _From Slaves To Legends_
    Post edited by NinjaFlashX on

    Heroes Unchained: CotM 2013

  • madartiste
    madartiste
    Posts: 328 edited December 2013
    Dawnhawk figured out how to prevent the log teasers from auto-collapsing: @.adventure-log-index .post-content{height:auto;}
    .adventure-log-teasers .row .post-column {height:auto;}
    .adventure-log-teasers .adventure-log-post {height: auto;}@

    I did some tinkering with it and figured out that if you change the year on an "index" entry to something far enough in the future (at least to a year where you won't be still posting new logs), you can target JUST that entry and expand it: @/*Expand Index entry to full size*/
    .adventure-log-index .adventure-log-post-container[data-yearnum^="2099"] .post-content {height:auto;width:730px;margin-left:-32px;}
    .adventure-log-index .adventure-log-post-container[data-yearnum^="2099"] .post-content .overflow-fade-out {display:none;}
    .adventure-log-teasers .adventure-log-post-container[data-yearnum^="2099"] .row .post-column {height:auto;width:730px;}
    .adventure-log-teasers .adventure-log-post-container[data-yearnum^="2099"] .adventure-log-post {height: auto;width:735px;margin-left:-36px;}
    .adventure-log-teasers .adventure-log-post-container[data-yearnum^="2099"] .adventure-log-post .post-view-link {display:none;}
    .adventure-log-teasers .adventure-log-post-container[data-yearnum^="2099"] .adventure-log-post .date-column {display:none;}@

    Obviously, you'd need to change the 2099 to whatever year you set your index entry to. You might not need the width expanded to 730px or changing the margin-left, but it worked with my particular styling. The last two lines were to get ride of the date on the right side of the log teaser.
    Post edited by madartiste on
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    Awesome! Thank you sweetie! That's exactly what I was looking for.

    Flash
    "Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _From Slaves To Legends_

    Heroes Unchained: CotM 2013

  • madartiste
    madartiste
    Posts: 328
    Yay! Glad it was what you were looking for, NinjaFlashX. :)
  • bluesguy
    bluesguy
    Posts: 127
    @Pils: Thank you for posting your CSS work. I was able to take what you have done for the Left Navigation and use something like that for my new adventure. Sweet!
  • bluesguy
    bluesguy
    Posts: 127
    @Kallak : Would you consider posting the CSS & HTML needed to do the Character area? That is very nicely done!
  • Kallak
    Kallak
    Posts: 1,090 edited December 2013
    @bluesguy, Have a look at my "Alternate Character Listing":http://forums.obsidianportal.com/comments.php?DiscussionID=2951&page=1 thread, all of the basics to plug and play are included, and you can tweak to match your theme from there. If you need any additional assistance, feel free to drop me a PM or post in that thread.

    EDIT:
    @NinjaFlashX, I have done pretty much exactly what you're talking about on my own "Adventure Log":https://dangerous-kalamar-4.obsidianportal.com/adventure-log , take a look and let me know if it's what you want, I can help you out if needed.
    Post edited by Kallak on
    All the best,
    - Kallak
  • bluesguy
    bluesguy
    Posts: 127
    Thank you.
  • Odhinn_AllFather
    Odhinn_AllFather
    Posts: 6
    I may have missed this but my custom CSS I used for my campaign based on one of Wolfhound's templates was wiped out in the reforge. Anyway to get it back or is all the pre-forge stuff gone to the realms of the non-existent?
  • Basileus
    Basileus
    Posts: 589
    Unfortunately the references that existed in Preforge have largely changed, so while some of it can be adapted with a bit of exploration, there isn't an easy way to restore it.

    I saw someone who did a fantastic job of essentially recreating the look of their Preforge campaign, so its possible to restore the appearance (if that is your goal), but the CSS coding will be very different.

    Best thing to do is open a thread requesting Vanguard assistance - Vanguards are community members with excellent CSS knowledge who have volunteered to help people fix their sites.
  • twiggyleaf
    twiggyleaf
    Posts: 1,955
    Odhinn_AllFather

    I can second the advice of Basileus. I went down this route and with the help of the Vanguard system, was able to restore and/or improve most sections. I have left out the FORUMS for now for two reasons: 1. It seems there are still issues and more REFORGE changes may still occur, and 2. The FORUMS seem different to me so for the moment I am toying with keeping it as a slightly different aesthetic.

    In any case, like you, I had originally used one of Wolfhound's templates for my original design and it turned out that Wolfhound was my Vanguard Mentor and sorted most things out quite quickly. Savannah and Dawnhawk were also very helpful in tweaking extra stuff. I highly recommend the VANGUARD route!

    twiggyleaf
    CURRENT CAMPAIGN: "Mysteria":http://www.obsidianportal.com/campaigns/mysteria - set in Wolfgang Baur’s MIDGARD.
    Previous CotM Aug 2012: "Shimring":http://www.obsidianportal.com/campaigns/shimring

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • Odhinn_AllFather
    Odhinn_AllFather
    Posts: 6
    Thank you Basileus and Twiggyleaf. Now, how does one seek out Vanguard support?
  • twiggyleaf
    twiggyleaf
    Posts: 1,955
    OA

    Click the CATEGORIES tab at the top. Choose VANGUARD ASSISTANCE and then set up your Request Thread. You can use DreadGazebo's example thread "On the Eyes of Midnight" if you wish, but any straightforward request with a link to your site should get a reply.

    twigs

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • Keryth987
    Keryth987
    Posts: 1,018
    OK, I remmeber seeing it in here SOMEWHERE, but do not have the time to go searcghing through the entire discussion.

    Simple question: How do I remove the bar beneath my banner?

    Thanks


    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "Campaign of the Month - July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • madartiste
    madartiste
    Posts: 328
    Keryth, do you mean the colored bar *above* the banner? Try @.banner-container .highlight-container {display:none;}@ I think that should work. Or do you mean some other element?
  • Keryth987
    Keryth987
    Posts: 1,018
    If you look "HERE":https://shadows-over-new-york.obsidianportal.com/wikis/sessions you can see a Red Bar coming from behind my Nav Buttons. THAT is what I need to get rid of

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "Campaign of the Month - July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • madartiste
    madartiste
    Posts: 328
    Aaah, okay. That one should be @.main-content .highlight-container {display:none;}@

    If you want to get rid of BOTH red bars, just use @.highlight-container {display:none;}@
  • Keryth987
    Keryth987
    Posts: 1,018
    Thanks Madartiste. You're a lifesaver.

    Now to go back and finish removing the Comments button from EVERY SINGLE PAGE on my site :)

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "Campaign of the Month - July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • madartiste
    madartiste
    Posts: 328
    Ouch. Wish I had a quick fix for that, Keryth. :(
  • Keryth987
    Keryth987
    Posts: 1,018
    Yea, wish there was.

    Oh well, just doing it a bit at a time

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "Campaign of the Month - July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • PhoenixMark
    PhoenixMark
    Posts: 90
    @Keryth

    I feel your pain. My custom nav bar, after the reforge, blocks the text on every page. Very long process to fix. But in the end, I am liking the new look for my campaign.

    "PhoenixMark":http://www.obsidianportal.com/profile/PhoenixMark

    "CRIMSON SKIES":http://www.obsidianportal.com/campaigns/crimson-skies
    "COTM June 2012":http://blog.obsidianportal.com/crimson-skies-junes-campaign-of-the-month/

    Also "Sactown Blues":http://www.obsidianportal.com/campaigns/sactown-blues and "Shimmering Kingdoms":http://www.obsidianportal.com/campaigns/shimmering-kingdoms
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,978
    With the "new" comments, I have to take comments off of 1000 pages of Rebuilt- and figure out how to make a modern comment section look like it belongs in my fantasy section.... so I really, truly feel your pain Keryth.

    Just trying to help out.

  • Keryth987
    Keryth987
    Posts: 1,018
    I've just learned to roll with the punches is all. Slowly but surely, I'll modify every page. What else you gonna do?


    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "Campaign of the Month - July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • Savannah
    Savannah
    Posts: 188 edited February 2014
    I know how to turn off the text for the left sidebar navigation menu, leaving just little icons (via the convenient "collapse front page menu" button). I want to do the opposite, so that I have just the word and no icon. I've tried "display:none;" on every name/description for those icons (both collectively and as individual icons) I could come up with. No dice. Anyone know the secret?

    Edit: Figures. I get it 15 minutes after posting for help. The (or at least an) answer is .nav-icon {display:none !important;}, should anyone be wondering. I hate having to use !important, so I rarely remember to try it...
    Post edited by Savannah on
  • PhoenixMark
    PhoenixMark
    Posts: 90
    This regards my "Crimson Skies Adventure Log":https://crimson-skies.obsidianportal.com/adventure-log preview boxes.

    I would like some CSS help with the size of the Adventure Log preview boxes. I typically use an image at the top of every Adventure Log. On the Dashboard, the preview box is large enough to show the entire 200px x 200px image box, but on the Adventure Log page, the preview box is not deep enough, and the image box becomes truncated.

    What CSS code can I use to give the Adventure Log previews more depth, like they are on the Dashboard?

    I realize that if you are not a member of my campaign, you won't have access to view the Dashboard. What I need is to make my Adventure Log previews about 20% deeper (not wider), or expand them to say… 300 pixels.

    Thanks a ton,

    "PhoenixMark":http://www.obsidianportal.com/profile/PhoenixMark

    "CRIMSON SKIES":http://www.obsidianportal.com/campaigns/crimson-skies
    "COTM June 2012":http://blog.obsidianportal.com/crimson-skies-junes-campaign-of-the-month/
Sign In or Register to comment.

February 2023
The Domain of Dread Council Meeting

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