Backend CSS classes

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.

 

thaen

@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.

Abersade

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;}

Abersade

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.

thaen

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?

vadercomplex

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

Abersade

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;}

Abersade

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

Abersade

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

thaen

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?

thaen

@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?

Abersade

Any improvement is welcomed. Thanks!

thaen

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.

ElMuggs

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?

 

 

thaen

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).