Any plans for Internal CSS for Ascendant users?

gastoff
gastoff

As I continue to educate myself on CSS, I have realized that the current "Custom CSS" option in the Advanced Settings is "external CSS": it applies changes to similar elements across the entire campaign site. This behaves much like a generalized template to make quick updates to the look and feel of an entire site. This is an awesome feature, but I feel like it needs to be broadened to allow for Internal CSS as well. To make any changes to a single page that differ from the external CSS would require "internal CSS", dictating the behavior of elements at the individual URL level.

I envision a option where each page's edit screen has a new section below the "GM Only" area that could house internal CSS for that page. This would allow premium users the ability to create custom effects on specific pages that are not constrained to the text field via inline CSS. Each Character or NPC can have their own unique background, font, color scheme...specific Adventure Posts can be edited to reflect a different mood depending on where that post took place...subsets of wiki pages can be tailored to allow for different navigation bars, etc

OP offers "Inline CSS" within the text field of various pages and "External CSS" via the Custom CSS option, does not offer any option for "Internal CSS".

Is this feature something that has been considered before and rejected due to difficulty of implementing?

image

Comments

  • Kallak
    Kallak
    Posts: 1,090

    One thing to keep in mind with the custom CSS is: since it is campaign site wide, it can also be used for more specific things just as easily as broad things. If you were to say reserve certain class names for certain elements on particular pages or page-types, then you could use comments to separate out your CSS based on what is being manipulated ("site wide styling, XX page styling, etc..). With your per-page input idea, unless there was a mechanism in place to add the inserted material to the overall custom CSS field, a per-page input area would (in my opinion anyway) end up being an extension of the same issue you run into with inline CSS. Rather than having a master location where you set styling, you have to visit multiple pages and do edits.

    That said, there isn't a specific per-page identifier for targeting CSS on particular pages only. I have seen things in the past where users wanted to style the background of a particular page differently or the like, and I don't think there's a solid way to do that at present. I'd have to get with dev side to make sure, but we might be able to configure the site to add the current page's page slug as a class to the body tag. If we can do that, it would allow users to target things based on specific page (I'll bring this up and see what I can get out of them).

    All the best,
    - Kallak
  • gastoff
    gastoff
    Posts: 136

    Thanks for the rapid reply Kallak! As an example of what I was hoping to accomplish with the page specific CSS:

    In my campaign, adventure logs are used as journal entries, written from the perspective of each PC. My DM posts will sometimes be generic recaps of the night's events, but other times they are journal-like entries from the point of view of various key NPCs. With inline CSS, I am easily able to control the font type, size, color, etc to give post a unique "feel", but I am forced to use the same parchment border that I set up for the sitewide text boxes and the same background, etc.

    A second example is that the campaign involves Lovecraftian themes and has many elements that are hidden from the players unless they do heavy digging into the esoteric "Elder Gods". I would love to be able to incorporate specific CSS effects (hidden buttons/links, fade and opacity animations, shifting images, etc) into a variety of pages so that the players (and visitors) are immersed into the "weirdness" of the campaign even through the site navigation. Trying to go to wiki page about Hastur without having discovered the proper information about The Yellow Sign? The text field, comments, navigation bar, etc begin fading out of view. Jump over to any of the NPCs from Port City X? Each of their backgrounds, color schemes, and backgrounds are different than the rest of the site.

    I don't see a way to accomplish this with the existing Custom CSS or inline CSS options. I suppose I could create entirely new campaigns that house only a single wiki page or character page, format it the way I want using the Custom CSS, and then link to that page...which is probably what I will be looking at doing as a work around.

    Again, I love OP and all the work you guys have done to make it so awesome! Keep up the good work.

    image

  • Kallak
    Kallak
    Posts: 1,090

    I like the idea of the adventure log looking different based on "author", very immersive idea. It would require some boilerplate per page, but you could set all of the page background material as transparent, and then create your own div element structure to house your content in and have that inside your text/edit window. Then you'd have these with class names, and have a few different ones depending on how many you need (with the rules for each outlined in the custom CSS field).

    Having said all of that, I talked to dev side today as promised, and it sounds like getting the current page's page slug added as a class to the page's body tag by the server shouldn't be a very big update, so I think I can fight that one up the list - which would simplify per-page styling for concepts like yours.

    All the best,
    - Kallak
  • gastoff
    gastoff
    Posts: 136

    That's great new Kallak! If it gets implemented, I will have to learn how to utilize the page-slug in the custom CSS field when/if it rolls out. I'm excited for the new possibilties.

    image

  • Kallak
    Kallak
    Posts: 1,090

    Hey, so a class corresponding to the page slug has been added for wiki pages. Assuming things go well and there's some user interest, I can push for adventure logs and so forth to get a similar or the same treatment. This is live, so please experiment and let me know how it goes.

    The format is "page-slug-[page's slug]", so for instance the Main Page gets a class of "page-slug-main-page" in the body tag of the page. If in doubt, check it out with Inspect Element or the like (depending on browser).

    All the best,
    - Kallak
  • gastoff
    gastoff
    Posts: 136

    Thanks for working your magic Kallak. I'll play around with it on my CSS tester campaign when I get some free time.

    image

  • cgregory
    cgregory
    Posts: 780

    Seems to work nicely.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Kallak
    Kallak
    Posts: 1,090

    Update on this: dev side has gone ahead and rolled this out to the other page types. This is the new format for the per-page class names:

    adventure-log-slug-[page-slug]

    character-slug-[page-slug]

    item-slug-[page-slug]

    wiki-page-slug-[page-slug]

    All the best,
    - Kallak
  • jodie
    jodie
    Posts: 82

    oh my gosh are these useful tidbits documented anywhere? This and the logged in player specific css are so cool.

  • thaen
    thaen
    Posts: 1,064

    Those two (player specific css and page slug classes) are only "documented" here on the forums as far as I know.

    There is a help article that goes over the details for Custom Navigation, which has a few of these kinds of things as well. 

    And you could always do a "View Source" on a given page, and do a find on "body" and look at the classes there to get a feel for what kinds of classes are being added to each page.  That's where the "high level" classes would be applied.

    Obsidian Portal Developer

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