Font placement on custom backgrounds

Boni
Boni

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

Comments

Sign In or Register to comment.

May 2022
Revenge on the Kraken's Bane

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