CSS

Here is where I am storing my code that is in current use on this, my playground. I will also use it to make notes of important things to know and remember even if not used here. I’m not starting this as a tutorial as Wolfhound did back when, but I learned much from that body of work and wish to be such to others to come.

/* REMOVE CAMPAIGN TITLE TEXT AND DEFAULT BANNER */
.campaign-public-layout .campaign-title,
 .campaign-public-layout #banner-container 
{display:none;}

/* ADD BANNER IMAGE BESIDE OP DRAGON LOGO */
.campaign-public-layout .campaign-public-title-container
 {
 background-image: url("urlofimagefile");
 background-size: contain;
 background-repeat: no-repeat;
}

/* REMOVE DRAGON FROM .PUBLIC */
.campaign-title,
.flame-dragon{ display:none!important;}


/* Auto-scale the image to its container */
.campaign-banner-image
{
    background-size: 100%;
    background-repeat: no-repeat;
}

/* Set smaller size and position on banner image -
 Set Width proportional to your own banner at 110px height */
.campaign-public-layout #banner-container .campaign-banner-image {
    position: absolute;
    height: 110px;
    width: 500px;
    bottom: 32px;
    right: 8px;
    padding-bottom:0px;
}

/* Hide the campaign's title text when banner present */
.campaign-public-layout #campaign-summary-row .campaign-title {
    display:none;
}


/*Change Link Colors OLD METHOD
a:link, 
a:visited, 
#secondary-colum a:link, 
span.comment-author a:link, 
span.comment-author a:visited  
{color:white;font-weight:bold;}

 a.character:visited, 
a.character:link 
{color:darkRed;}

a.item:visited, 
a.item:link 
{color:green;} */

/* Color changes to links with <insert> in the address */
/* Colors all links to an address with /characters/ in the address Yellow */
a:visited[href*=\/characters\/]{color:yellow;}
/* Colors all links to an address with /items/ in the address Blue */
a:visited[href*=\/items\/]{color:#00CCFF;}
/* Colors all links to an address with /wkis/ in the address Green */
a:visited[href*=\/wikis\/]{color:green;}}


.main-content a.wiki-content-link:visited, 
.wiki-content-link, 
.main-content a.create-wiki-page-link,
{color:blue !important;}

h3 a:link, div.comment-count a:link {color:black; text-decoration:none;}
h3 a:visited, div.comment-count a:visited {color:black; text-decoration:none;}
a img { max-width:none;}

.campaign-settings #settings-nav {border-collapse: separate;}
td {border: 1px double Black; margin: 1px;}

a:link,
a:visited {text-decoration: underline;}

/*Make boxes Dark*/
.campaign-public-layout .wiki-page,
 .character-index.campaign-public-layout .character-list-item,
 .campaign-public-layout #character-details,
 .campaign-public-layout .adventure-log-post,
/* .campaign-landing-show .campaign-landing-page-container,*/
 .campaign-public-layout .section,
 .campaign-public-layout .post-main,
 body.campaign-public-layout .post-main.post-section,
 .campaign-public-layout .post-section.post-main
 {background-color: transparent;}

 main.main-content,
 .reveal-modal.reveal-small,
 .wiki-page-quick-select .wiki-results,
 td,
 tr, 
 .preview-content {background-color:black;}

/* LIGHT ON DARK TEXT BOXES */
 textarea,
 .post-gm-only input[type='text'],
 .post-gm-only input[type='email'],
 .post-gm-only input[type='password'],
 .post-gm-only input[type='tel'],
 .post-gm-only textarea,
 #gm-secrets input[type='text'],
 #gm-secrets input[type='email'],
 #gm-secrets input[type='password'],
 #gm-secrets input[type='tel'],
 #gm-secrets textarea,
 .secret-section input[type='text'],
 .secret-section input[type='email'],
 .secret-section input[type='password'],
 .secret-section input[type='tel'],
 .secret-section textarea,
 .campaign-settings #advanced-settings
 .flat-field {background-color: black !important; color: seashell;}

 textarea:focus,
 .post-gm-only input[type='text']:focus,
 .post-gm-only input[type='email']:focus,
 .post-gm-only input[type='password']:focus,
 .post-gm-only input[type='tel']:focus,
 .post-gm-only textarea:focus,
 #gm-secrets input[type='text']:focus,
 #gm-secrets input[type='email']:focus,
 #gm-secrets input[type='password']:focus,
 #gm-secrets input[type='tel']:focus,
 #gm-secrets textarea:focus,
 .secret-section input[type='text']:focus,
 .secret-section input[type='email']:focus,
 .secret-section input[type='password']:focus,
 .secret-section input[type='tel']:focus,
 .secret-section textarea:focus,
 .campaign-settings #advanced-settings .flat-field:focus {background-color: darkblue !important; color: white;}

/*Regular text Seashell*/
p,
 body,
 li {color:seashell;}

td,
 th{color:seashell  !important;}

/*Headers*/
.campaign-link,h1,h2,h3,h4,h5,h6
{color:red !important;}

 .campaign-landing-show .campaign-landing-page-container{background-color: blue;}

/* CHAINSAWXIV's Horizontal Menu */
/* Set parent positioning to position and size nav bar in its container */
div.collapsable-nav-row.row{
    position:relative;
}

/* Reposition the nav section at the top and set same width as content */
.campaign-public-layout .collapsable-nav-row .front-nav-container{
	position:absolute;
	width:75%;
	left:0px;
}

/* Clear the nav section background and center the list in it */
.campaign-public-layout #campaign-nav{
	background-color:transparent;
	text-align:center;
}

/* Switch the list to inline and align with top dividing line */
.campaign-public-layout #campaign-nav .nav-links{
	display:inline-block;
	position:relative;
	top:-42px;
	text-align:center;
}

/* Show list items inline rather than stacked vertically */
.campaign-public-layout #campaign-nav li{
	display:inline-block;
	padding-right:7px;
}

/* Hide the icons to allow enough horizontal space in the layout */
.campaign-public-layout #campaign-nav .icon{
	display:none;
}

/* Hide the triangular indicator arrow on selected section */
.campaign-public-layout #campaign-nav .nav-links li.active:after,
.campaign-public-layout #campaign-nav .nav-links li.active:hover:after{
	border-left-color:transparent;
}

/* Lock in vertical space for nav row where it would normally shrink */
.campaign-public-layout #banner-container{
	margin-bottom:48px;
}
@media only screen and (max-width:940px){
	.campaign-public-layout #banner-container{
		margin-bottom:48px;
	}
}
@media only screen and (max-width:970px){
	.campaign-public-layout #banner-container{
		margin-bottom:15px;
	}
}

/* Reset main page content width to use the extra horizontal space */
@media only screen and (min-width:770px){
	.campaign-public-layout .collapsable-nav-row .main-content-container{
		width:75%;
	}
}

/* Hide the nav bar sooner since it hasn't got as much room */
@media only screen and (max-width: 970px){
	.hide-for-small {
		display: none !important;
	}
}

/* Basileous - Remove Change Img button */
.character-show .character-avatar .frame a,
 .item-show .character-avatar .frame a {display: none;}

/* Bortas color Characters borders */
.game-content-image[title="EXACT CHARACTER NAME"] + .character-info {
border-color: blue; /* what color border should be */
border:4px solid; /* how bold border should be */
}


/* CUSTOM CURSOR - Basileus*/
.campaign-public-layout {cursor: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/545551/cursor.png?1452568475'), default;}
.campaign-public-layout a:hover {cursor: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/545551/cursor.png?1452568475'), pointer;}
Image Filters

Some automatic filters applied to all images in the campaign to help them all blend together and into the parchment background. Note images that are links will become fully vivid if you hover on them.

/* IMAGE STYLING - Basileus*/
.main-content img {filter: sepia(15%) opacity(85%); transition: all 0.3s ease-in-out;}
.main-content a img:hover {filter: sepia(0%) opacity(100%); transition: all 0.3s ease-in-out;}
Combined Background and Border Images

If you’ve got a partially transparent border image, you can combine that with a normal background image to make some cool overlapping effects.

/* PARCHMENT BACKGROUND WITH STYLED BORDERS - Basileus*/
.campaign-public-layout .main-content {background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/360428/parchment-background-03.jpg?1408555806'); background-repeat: repeat-y; background-size: 100%; box-shadow: 0em 0em 1em 0em black; border-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/545582/page_border.png?1452575364') 146 143 135 123 round; border-image-width: auto; border-image-outset: 22px;}

Ikabodo - 
/* 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(http://my.page.com/parch_3.png);
  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(http://my.page.com/parch_3_top.png);
  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(http://my.page.com/parch_3_bottom.png);
  bottom:-14px;
}



CSS

Teaching Myself CSS weasel0