Parchment/scroll effect

Grand_DM
Grand_DM

Does anyone have a simple .css template for parchment? I have seen multiple pages with how-tos or similar effects, but they always include a ton of other stuff.

Thanks!

Comments

  • Bortas
    Bortas
    Posts: 645

    There are a bunch, and honestly, mine was inspired by Thorvaldr's Tyellador. You are welcome to steal my code and modify as you wish, but if you also want to steal my graphics, perhaps something nice in your acknowledgements? ;-)  I think I'm only proud of them because I really struggle with graphics.

    -bort


    /* 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 */

     

  • Grand_DM
    Grand_DM
    Posts: 3

    That is great! Shame it does not also include the left and right menus also. The transparency there makes it hard to read things depending on the background image used. Thank you very much!

  • Johnprime
    Johnprime
    Posts: 252

    I might steal that CSS at some point Bortas, thanks for posting!

    Need to check out your site a little more, but at a quick glance, it looks good!

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • Bortas
    Bortas
    Posts: 645

    Thank you, John.

    The rest of my site has those, but... I was not going for a simple look like I was with the main content, thus, the code for that gets real complicated, with a ton of extra stuff that you weren't wanting.

    -bort

Sign In or Register to comment.

August 2022
In Over Their Heads

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