Backend CSS classes

thaen
thaen

Split out from here: https://forums.obsidianportal.com/discussion/comment/48670/#Comment_48670

One other thing that would be nice (and was recently brought up on the Discord chat) is if the classes used on the backend (like the dashboard page and settings, etc.) were cleaned up to match the same sort of format that the frontend of the site uses so that CSS changes can be applied much more easily to the dashboard and forums.

 

Obsidian Portal Developer

Comments

  • thaen
    thaen
    Posts: 1,092

    @Abersade,

    Can you give me a couple specific examples?

    For CSS classes, we have to be careful that we don't mess up existing designs that GMs have created. For example, if we made the backend classes the same as the frontend classes, and a GM has styled the frontend, but didn't want the backend styled, then we would be forcing that styling to happen after the fact, when the GM hadn't intended that at the time they wrote their CSS.

    Btw, anything that y'all think the OP team needs to know about that is mentioned on the Discord chat, please go ahead and post it here in the Community Forums ... otherwise we probably won't see it. I don't go on Discord at all. And I think our Support team only regularly checks a limited number of specific topics.

    Obsidian Portal Developer

  • Abersade
    Abersade
    Posts: 436 edited August 2023

    Yeah, that's why I said to use the same sort of format, not the exact same classes. Also pertinent: almost no one styles the dashboard side of the site so CSS changes there now aren't likely to impact many users, I'd wager that less than 1% of the sites Ascendant members currently do it due to how messy the classes are.

    Example CSS that would be covered with two lines on the frontend:

    #content > main {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}
    #content > main > div.row.forum-page-header {background: linear-gradient(23deg, #051c01 0%, #3e0557 40%);}
    #content > main > div.forum-page-content > div.topics-section > ul {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}
    #content > main > div.forum-page-content > div.topics-section {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}
    .campaign-dashboard-layout #main-footer {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}
    body {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}
    .campaign-settings {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}
    #advanced-settings > div.row.dark-section {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}
    .campaign-dashboard-layout .content-row {border-image: url("https://db4sgowjqfwig.cloudfront.net/campaigns/191667/assets/896244/FE-Wiki_Backgroundv5.png?1535813466") 1 fill; padding: 35px;}
    .campaign-dashboard-layout .forum-module-container, .campaign-dashboard-layout .stream-module-container {background-color: transparent;}
    .campaign-dashboard-layout .calendar-module-container {background-color: transparent;}
    Post edited by Abersade on

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 436

    All that does is set a background image and a gradient color to the areas not covered by the image. That's just the example changes I tried due to the discussion on Discord.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • thaen
    thaen
    Posts: 1,092

    Ah, I think I'm getting clearer on what you're wanting.

    Can you also post the matching "two lines on the frontend", so I can see the difference?

    Obsidian Portal Developer

  • vadercomplex
    vadercomplex
    Posts: 93

    Hello! I'm bumping the thread, just in case the notifications weren't received! @Abersade 

    Obsidian Portal Support Druid | [email protected]

  • Abersade
    Abersade
    Posts: 436

    This isn't always going to be a strict apples-to-apples comparison but here you go:

    Example using the Front Page:

    .campaign-public-layout .page-background {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}

    .campaign-landing-show .campaign-landing-page-container {border-image: url("https://db4sgowjqfwig.cloudfront.net/campaigns/191667/assets/896244/FE-Wiki_Backgroundv5.png?1535813466") 1 fill; padding: 35px;}

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 436

    Those two changes make the Front Page of my testbed site look like this:

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 436

    Compare that to this screenshot from the back end of my Forbidden Empire site (which uses the first codeblock I mentioned):

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • thaen
    thaen
    Posts: 1,092 edited September 2023

    Let me know if I'm getting closer.

    Sticking to just the Dashboard vs the Landing Page.

    To style the landing page you used:

    .campaign-public-layout .page-background {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}

    .campaign-landing-show .campaign-landing-page-container {border-image: url("https://db4sgowjqfwig.cloudfront.net/campaigns/191667/assets/896244/FE-Wiki_Backgroundv5.png?1535813466") 1 fill; padding: 35px;}

    And to style just the Dashboard (clipping out the parts that style other sections of the backend):

    .campaign-dashboard-layout #main-footer {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}

    body {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}

    .campaign-dashboard-layout .content-row {border-image: url("https://db4sgowjqfwig.cloudfront.net/campaigns/191667/assets/896244/FE-Wiki_Backgroundv5.png?1535813466") 1 fill; padding: 35px;}

    .campaign-dashboard-layout .forum-module-container, .campaign-dashboard-layout .stream-module-container {background-color: transparent;}
    .campaign-dashboard-layout .calendar-module-container {background-color: transparent;}

    The body and the footer seem like separate parts of the design to me, so although they are being styled the same here, it makes sense that they would need separate styling, as they are already styled separately in the default design.

    I could see adding a general "module-container" class to the forum-module-container, stream-module-container, and calendar-module-container, so that all of those could be set transparent with one class.

    Is that the kind of thing you're looking for with this?

    Post edited by thaen on

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 1,092

    @Abersade

    I added a "campaign-dashboard" class on the body of the Campaign Dashboard, so you can style just the Dashboard. And I added the "module-container" class to the stream-module-container ... that was the only one that didn't already have the "module-container" class.

    So now the CSS to style just the Dashboard to look similar to the Landing Page would be:

    .campaign-dashboard .main-content, .campaign-dashboard #main-footer {background: linear-gradient(23deg, #051c01 0%, #3e0557 10%);}

    .campaign-dashboard .content-row {border-image: url("https://db4sgowjqfwig.cloudfront.net/campaigns/191667/assets/896244/FE-Wiki_Backgroundv5.png?1535813466";) 1 fill; padding: 35px;}

    .campaign-dashboard .module-container {background-color: transparent;}

     

    Is that what you were aiming for as far as cleaned up classes?

    Obsidian Portal Developer

  • Abersade
    Abersade
    Posts: 436

    Any improvement is welcomed. Thanks!

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • thaen
    thaen
    Posts: 1,092

    Cool! To make changes like these, we need the detailed scenarios of what a member is trying to accomplish (like the CSS and screenshots given here). There's not a way I can think of to just go through and clean everything up because I don't really know the desired end result. So, if there are other specific styling scenarios that anyone wants addressed, feel free to bring them up, and I'm happy to hash it out and see what we can do.

    Obsidian Portal Developer

  • ElMuggs
    ElMuggs
    Posts: 61

    If it helps this is a example of how my Dashboard looks:

    - it's inherited CSS code from ALL over the place - and trying to get each panel to play nicely together is such a headache that I gave up.

    Instead it would be really nice if the Dashboard 'style' pages either had totally separate CSS or was cleaned up so that the Dashboard, Forum, Calender and side panel use the same code vs inheriting some values from the main page/adventure log but using the same CSS in other parts of the Dashboard layout - eg. "large-8 columns" - controls both the 'background' of the left panels, and the background on the Stream list of updates.

    I also think it would be a very good idea to make sure that the Settings panel CSS is set up to ensure it doesn't inherit any changes to avoid a risk of someone messing up their OP portal to the point that they can't access the tools to undo it?

     

     

    DM of The Domains of Dread Council Meeting (...a Comedic Misadventure though the mists of a re-imagined Ravenloft! ) - COTM Feb 2023! 

  • thaen
    thaen
    Posts: 1,092

    I also think it would be a very good idea to make sure that the Settings panel CSS is set up to ensure it doesn't inherit any changes to avoid a risk of someone messing up their OP portal to the point that they can't access the tools to undo it?

    The few times that's happened, they email support, and we just remove all the CSS from the Campaign (and send it to them so it's not lost).

    Obsidian Portal Developer

  • ElMuggs
    ElMuggs
    Posts: 61

    Ah but the main rule of great IT support is to make sure it's not possible to 'break something' in the first place ;)

    DM of The Domains of Dread Council Meeting (...a Comedic Misadventure though the mists of a re-imagined Ravenloft! ) - COTM Feb 2023! 

  • thaen
    thaen
    Posts: 1,092

    Haha! I'd love to be able to get to the point where it's impossible for a member to break anything, or impossible for a member to run into any bugs, but if a problem doesn't come up very often, and we have a workaround to fix it, then spending time fixing that problem means we're taking time away from fixing other problems that affect more members, or taking time away from adding features that many more members would appreciate. So, in this case, I think we've needed to clear out someone's CSS for them maybe 3 times in the last 5 years. So the members' behavior is telling us this is not where we should be spending our time.

    Obsidian Portal Developer

Sign In or Register to comment.

June 2024
The Planewalker’s Guild

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