I created a new campaign and have been playing around with it the last weeks. As I'm fairly new to CSS, I have run into a problem I cannot solve.
Here's the campaign page: https://adastra-2.obsidianportal.com/
I'm trying to implement a Star Trek-y feel. The page background works quite well (I stole the correct code ), but I need the text start further to the right, so that its clear of the borders. The same goes for the page headings, they vanish under the borders, too.
Here's the code I've got so far:
/* BEGIN - CSS Hintergrund in den Content-Bereichen */
/* Transparent backgrounds so parchment shows */
.post-player-secret.post-section.player-secret,
.campaign-landing-page-container,
.wiki-page .post-section.post-main,
.wiki-page .post-gm-only.post-section
{ background-color: transparent!important; }
/* Parchment body */
.adventure-log-post-container.full .post-comments.post-section,
.adventure-log-post-container.full .post-gm-only.post-section,
.adventure-log-post-container.full .post-player-secret.post-section,
.adventure-log-show .post-main,
.campaign-public-layout #character-details,
.character-show .post-player-secret.post-section.player-secret,
.wiki-page,
.character-show .main-content section,
.item-show .main-content section {
background-image: url('https://familia-seevenborni.de/wp-content/uploads/2022/04/computer-center.png');
background-position:center; background-size:100%; background-color : transparent!important;
position:relative; margin-top: 30px; margin-bottom: 100px!important;
}
/* Parchment header */
.adventure-log-post-container.full .post-comments.post-section:before,
.adventure-log-post-container.full .post-gm-only.post-section:before,
.adventure-log-post-container.full .post-player-secret.post-section:before,
.character-show .post-player-secret.post-section.player-secret:before,
.adventure-log-show .post-main:before,
.wiki-page:before,
.character-show .main-content section:before,
.item-show .main-content section:before { top:-15px; height:75px;
background-image: url('https://familia-seevenborni.de/wp-content/uploads/2022/04/computer-border-oben.png');
background-color : transparent; background-repeat:no-repeat; background-position: center center; background-size:100%;
position:absolute; z-index:1; width:100%; left:-4px; content:"";
}
/* Parchment footer */
.adventure-log-post-container.full .post-comments.post-section:after,
.adventure-log-post-container.full .post-gm-only.post-section:after,
.adventure-log-post-container.full .post-player-secret.post-section:after,
.adventure-log-show .post-main:after,
.post-player-secret.post-section.player-secret:after,
.wiki-page:after,
.character-show .main-content section:after,
.item-show .main-content section:after { bottom:-75px; height:155px;
background-image: url('https://familia-seevenborni.de/wp-content/uploads/2022/04/computer-border-unten.png');
background-color : transparent; background-repeat:no-repeat; background-position: center center; background-size:100%;
position:absolute; z-index:1; width:100%; left:-5px; content:"";
}
/* Positioning content on parchment */
.wiki-page:after .adventure-log-post-container.full .post-comments.post-section, .character-show .main-content section, .item-show .main-content section{ padding-left: 16.5%; }
.wiki-page { padding-left: 10.5%; }
/* END - CSS only parchment background on content */
My guess is that the issue is somewhere in the last part /* Positioning content on parchment */, but I can't find it for the life of me. Any help wold be appreciated.
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
You are correct in thinking that the code under /* Position Content On Parchment */ is related, it's not actually being applied though. I tried forcing it to apply by turning off the padding: 25px rule that is present in the default OP CSS, the result was that yes the content shifted to the right as expected but was being cut off at the top and bottom due to a lack of padding there.
So, instead of mucking about with that please try the following:
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
If that works for you the following line can just be deleted as it isn't doing anything at all currently:
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
Thanks, Abersade. Works like a charm.