Comments

• 

  gastoff

  Posts: 136 January 2021

  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 January 2021

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

  

  

  
• 

  gastoff

  Posts: 136 January 2021

  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: 420 May 2021

  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