Border for Character Page


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

Right now mine looking ok...



  • 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. 


  • Keryth987
    Posts: 1,047

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

  • 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...


  • Abersade
    Posts: 419

    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;}


    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

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!