Border for Character Page

Keryth987
Keryth987

So...anyone know a CSS trick to place a border around the Character Page?

Right now mine looking ok...

https://xcomresistance.obsidianportal.com/characters

 

Comments

  • gastoff
    gastoff
    Posts: 136

    Are you wanting to put a border around the entire page or just the character sections?

    If you are wanting a border around the whole page, you could layer two background images to create the desired effect:


    .campaign-public-layout .page-background {
    background-image: url(border image), url(current background);
    }

    Each image can be formatted independently to get the desired effect:


    .campaign-public-layout .page-background {
    background-image: url(first image), url(second image);
    background-position: left top, center center;
    background-repeat: repeat, no-repeat;
    }

    In the example above, the "left top" and "repeat" will be applied to the first image, while the "center center" and "no-repeat" would be applied to the second image that is underneath the first one.

    This would allow for things like having a background that looks like aged paper that is stretched across the screen and place a second image of a watermark on top of that image and position it wherever you want, while still having both images be part of the background. 

    image

  • Keryth987
    Keryth987
    Posts: 940

    Background and Border around the PLAYER CHARACTER and NON-PLAYER CHARACTER Sections, as well as both actually

  • gastoff
    gastoff
    Posts: 136

    A border around both the PC and NPC sections can be done buy changing the background-image of the character-list div:


    .character-list {
    background-image: url();
    }

    That should solve the first step, unless you wanted a different border for each section. As for getting a border around them both, I'm not sure what div element houses the character lists. The closest thing I can find through inspecting the code is the .main-content div, but that also houses the search bar...

    image

  • Abersade
    Abersade
    Posts: 204

    Here's what I found to work on my Testbed site to add a specific background to each section, the selectors for a border should be the same:


    div.character-list:nth-child(4) {border-image: url(YOUR_URL_HERE) 25 fill repeat;}

    div.character-list:nth-child(6) {border-image: url(YOUR_URL_HERE) 25 fill repeat;}

     

Sign In or Register to comment.

Campaign of the Month
October 2021

Hogwarts and the Magic of the Founders


Read the feature post on the blog!
Or 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