Image background for Wiki pages

Hexenhammer
Hexenhammer
in Campaign Portal Building

Hi guys,

 

I have had a campaign here for a few years, but I am completely new to CSS.

 

I would love to make a cool background for my wiki pages, akin to this:

https://a-tale-of-blood-and-honour.obsidianportal.com/wiki_pages/boy-king-period

 

Su I tried using this form, which 


ikabodo




ikabodo

posted here: http://forum.obsidianportal.com/discussion/3878/parchment-questions

 

@/* THIS SETS THE BASIC BACKGROUND FOR THE PAGES AND ADJUSTS THE WIDTH */

.wiki-page, .wiki-edit, .post-main, .character-show .main-content section, .item-show .main-content section{

background-color : transparent;

background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/70625/assets/785771/parch_3.png?1507120999);

background-position:center;

background-size:100%;

position:relative;

}@

@/* THIS SETS THE BASE SETTINGS FOR THE BEFORE AND AFTER TAGS */

.wiki-page:after, .wiki-page:before, .character-show .main-content section:after, .character-show .main-content section:before, .item-show .main-content section:after, .item-show .main-content section:before{

background-color : transparent;

background-size:100%;

position:absolute;

background-repeat:no-repeat;

background-width:100%;

left:-2px;

width:100%;

height:34px;

content:"";

background-position: center center;

z-index:10;

}@

@/* THIS SETS ADDS THE PICTURE AND ADJUSTMENT FOR THE TOP PARCHMENT */

.wiki-page:before, .character-show .main-content section:before, .item-show .main-content section:before{

background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/70625/assets/785771/parch_3.png?1507120999);

top:-14px;

}@

@/* THIS SETS ADDS THE PICTURE AND ADJUSTMENT FOR THE BOTTOM PARCHMENT */

.wiki-page:after, .character-show .main-content section:after, .item-show .main-content section:after{

background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/70625/assets/785771/parch_3.png?1507120999);

bottom:-14px;

}@

 

 

So what the heck am i doing wrong?

Comments

  • Bortas
    Bortas
    Posts: 645

    show us your link, so we can see in what way it's broken?

    I'm working on mine as well, still just in build phase: https://morwindl-2.obsidianportal.com/wikis/main-page


    /* BEGIN - CSS only parchment background on content */
    /* 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://db4sgowjqfwig.cloudfront.net/campaigns/154555/assets/712393/BG-Content-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:-33px; height:46px;
    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/154555/assets/712453/BG-Content-Top.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:106px;
    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/154555/assets/712412/BG-Content-Bottom.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 */
    .adventure-log-post-container.full .post-comments.post-section, .character-show .main-content section, .item-show .main-content section{ padding-left: 6.5%; }
    .wiki-page { padding-left: 1.5%; }
    /* END - CSS only parchment background on content */

    GL to you,

    -bort

    Morwindl - Rising Tide

    Campaign of the Year - 2018

  • Hexenhammer
    Hexenhammer
    Posts: 3

    Okay, here is the link to the main wiki page

    http://campaign-70625.obsidianportal.com/wikis/main-page

  • Hexenhammer
    Hexenhammer
    Posts: 3

    Wow, Bortas. I used your formula, and it looks awesome.

     

    Can I use it for my campaign? I'll credit you of course :)

  • Bortas
    Bortas
    Posts: 645

    Certainly - I'm not the most proficient of graphic artists, so it is full of issues, but it gets the job done. Go right ahead.

    -bort

    Morwindl - Rising Tide

    Campaign of the Year - 2018

Sign In or Register to comment.

April 2024
Season of Strife

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

Categories