I've set the testing site to 'public' for the time being so you can watch and follow along if you like and (ideally) give input or suggestions.  I'm going to share the code I've used thus far (and will ideally update this post as I continue fiddling.)  I'm by no means a pro at this.  I'm self-taught and so I caution anyone who uses this to please know it comes with no guarantees of being 'solid.'  There may be better/more efficient ways to accomplish what I'm doing so... yeah.  Don't be shocked if there are some things that are redundant or maybe not super effective.

PS:  Also drop me a message if you'd like an invite to a WOD-Vampire PbP game when I'm ready to launch!

The Testing Grounds:  https://csstestinggrounds.obsidianportal.com/

The Code So Far:

/* removing title on front page */

.campaign-public-layout #campaign-summary-row .campaign-public-title-container {

    height: 0px;

    position: relative;

}

/* removing dragon from header */

.campaign-title,.flame-dragon{
display:none!important;
}


/*Remove Top Color Bar*/
#banner-container .highlight-container {

  display: none;

}


/* Header work */

h1 {
  font: 26px Metamorphous;
}

h2 {
  font: 24px Metamorphous;
}

h3 {
  font: 18px Metamorphous;
}

h4 {
  font: 16px Metamorphous;
}

h5 {
  font: 14px Metamorphous;
}

h6 {
  font: 12px Metamorphous;
}

/* blockquote work */
blockquote {
  font: 18px Shadows Into Light;
  color: #2b3856;
  text-align: center;
}


/*remove players block in sidebar*/

.sidebar-party-members.module {
    display: none;
}



/*right sidebar graphics background*/
#sidebar .sidebar-party-members, .sidebar-last-updated, #sidebar .sidebar-quick-stats, 
#sidebar fan-counter-container, #sidebar .stream-module-container, #sidebar .sidebar-table-of-contents,
#sidebar .adventure-log-index-filter{
  background-image: linear-gradient(to bottom, #181818 , #002A50);
  width: 226px;
  border: 3px solid #489ebe;
  padding: 10px;
  margin: 20px;
  border-radius: 10px;
}


/*left sidebar graphics background*/
.campaign-public-layout #campaign-nav {background-image: linear-gradient(to bottom, #181818 , #002A50); border: 3px solid #489ebe; border-radius: 10px;}


/*character page*/
.character-list-item { background: linear-gradient(23deg, #002A50 0%, #181818 100%);     border: 2px solid #a9a9a9; box-shadow: 0 0 0 2px #000000;}
.character-info h4.character-name.title a {color:white;}
.character-info h4.character-name.title a:hover {color:#489ebe; }
.right-side-fade-out {display:none;}
.character-quick-search {background-image: linear-gradient(to bottom, #181818 , #002A50);}
.filter-options { background-image: linear-gradient(to bottom, #181818 , #002A50); color: #ffffff; }


/*Forum Post Background Color*/
.campaign-forum-index .forum-page-content {background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/263806/assets/1178691/metal-back.jpg?1622998758); width: 100%;} 

/*Forum Page Header*/
.campaign-forum-index .forum-page-header{background-image: linear-gradient(to bottom, #555651 , #000000); }

/*Behind Forum Navigation*/
.campaign-forum-index .topics-section{background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/263806/assets/1178691/metal-back.jpg?1622998758); }

/*Active Forum or Topic*/
.campaign-forum-index .subforums-and-topics .active.topic .background {background: #002A50; color:#E8E8E8;}

/*Inactive Forum or Topic*/
.campaign-forum-index .subforums-and-topics .subforum .background {background: #2A2A2A; color:#E8E8E8;}

/*Forum Post - User Information Section*/
.forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata {background-image: linear-gradient(to bottom, #181818 , #002A50);}

/*Forum Post - Actual Text Section*/
.forum-page-content .posts-section .post-section-wrapper .posts .post {background: #181818;  border: 3px solid #489ebe; border-radius: 5px;}

/*Forum Avatar Size*/
.forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata .user-avatar.large-1.small-2.columns{width: 75px; display: block;}

/*Forum Breadcrumb Links*/
.row.forum-page-header .small-11.columns h2.name {font-size: 10px;}

/*Forum Post - Reply Section*/
.forum-page-content .posts-section .post-section-wrapper .row .reply-controls.small-12.colums{background: #E8E8E8;   border-style: dotted; border-color: #489ebe; border-width: thick; padding: 10px;}

/*Forum Top of Post Title Size*/
.campaign-forum-index .posts-section .title, .campaign-forum-manage .posts-section .title, .campaign-forum-edit .posts-section .title {font-size: 14px; color: #ffffff;}

/*Dashboard Top Background Where Campaign Banner Is*/
.row.title-row{background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/263806/assets/1178691/metal-back.jpg?1622998758);}

/*Dashboard Top Banner*/
.row.title-row{height: 0px;}

/*Dashboard Nav Menu Make Smaller*/
.campaign-dashboard-layout #dashboard-main-nav{ width: 75px; }
.campaign-dashboard-layout #dashboard-main-nav ul li .nav-icon { width: 100%; font-size: 15px; }
.campaign-dashboard-layout #dashboard-main-nav ul li .nav-text { display: none; }
.campaign-dashboard-layout .main-content { padding-left: 75px; }

/*Subforum and Topic Names Color*/
.campaign-forum-index li.topic a, .campaign-forum-index li.subforum a, .campaign-forum-manage li.topic a, .campaign-forum-manage li.subforum a, .campaign-forum-edit li.topic a, .campaign-forum-edit li.subforum a{color: #ffffff; font-size: 12px;}

(Post is too long to post so TBC in next post.)

/*right sidebar boxes gradient background*/
#sidebar .sidebar-party-members, .sidebar-last-updated, #sidebar .sidebar-quick-stats, 
#sidebar fan-counter-container, #sidebar .stream-module-container, #sidebar .sidebar-table-of-contents,
#sidebar .adventure-log-index-filter{
  background-image: linear-gradient(to bottom, #181818 , #002A50);
  width: 226px;
  border: 3px solid #489ebe;
  padding: 10px;
  margin: 20px;
  border-radius: 10px;
}


/*left sidebar boxes gradient background*/
.campaign-public-layout #campaign-nav {background-image: linear-gradient(to bottom, #181818 , #002A50); border: 3px solid #489ebe; border-radius: 10px;}

If you put this into your custom css box on your advanced tab you'll see that the #489ebe is a robin's egg blue color and the #181818 is a dark gray almost black which is the top color fading down into #002A50 at the bottom which is a dark hue of blue that white text looks pretty nice on.  I used these with the "Metal Grunge" style to a nice effect.

Hope you guys find this helpful.  

-Dee

There are 2 parts to each map marker.  There's the image that shows by default, and there's a transparent div that sits on top of the image and enables the clicking and dragging and showing of the popups.

The trick is to hide the default image, and then add your custom image as a background image to the transparent div based on the map marker's Title.

The custom map marker image needs to be width 40px and height 50px.  The default images have the "pointer triangle" on the bottom of them, so the actual image is 40x40 with a 10px pointer on the bottom, but you don't have to include the pointer if you want a different look.

Here's some sample CSS.  This will hide only the "black square" default map markers.  Then you'll replace the backround-image url with the url to your custom image.  You can upload the custom image to your Media Library and use the url from there.  You'll need to add a background-image for each map marker Title that uses the "black square" map marker, otherwise the missing ones will be invisible.

/* Hide the default map marker images */
div img[src^='/map_marker_icons/8/000000.png'] {
  display: none;
}

/* Set the image of a map marker based on the map marker's Title */
div[title='Test'] {
  background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/216494/assets/1174607/blue_arrow.png?1621730624');
}

Enjoy!

EDIT

@NimrodYanai found a much cleaner way to do this.

You don't need to mess with the second block of CSS or the Title.  Just replace the content url on the first block.  Note also that the url is built from the color chosen.  So you can have a nearly limitless number of different custom map markers.

img[src^='/map_marker_icons/8/000000.png'] {
  content: url('https://db4sgowjqfwig.cloudfront.net/campaigns/216494/assets/1174607/blue_arrow.png?1621730624');
}

The details of the discussion happened here:

https://forums.obsidianportal.com/discussion/5901/limiter-functionalities-for-the-maps

Right now mine looking ok...

https://xcomresistance.obsidianportal.com/characters

It would appear that playing with CSS is definitely not among my talents. In fact, trial and error would appear to demonstrate that I am just plain awful at it. Ha ha!

The content on my campaigns is good but I am the first to admit that my games need something of a facelift. With that in mind, could one of the helpful folks in the brains trust here please help me?

I would very much like to make the background behind all the writing in my games look like old parchment or a scroll or something to that effect. Could somebody here please throw me a bone?

Concord of Ashes is my game.

Thanks!

I've tried going back and I can't get it back. How do I fix this!? Please help!

So first I can't figure out how get my text boxes to be transparent so the background image is seen behind my writing. and second how do I get the images to upload into my little boxes that I created following the tutorial.  I followed the code in the FAQ section but it didn't work. 

And my final question is how can I get a game system added to the list in the hope for a Dynamic Character Sheet Template to be made for it? I'm running my game using the Esper Gensis rules with is a port of the 5th Edition D&D rules. Thanks for any help. 



https://thedarkstarchronicles.obsidianportal.com/wikis/main-page

I have been out of the CSS formatting game for my Obsidian portal page and so my knowledge slipped away. I am wanting to create subgroups of characters based on tags and wasn't sure how to go about doing this.

I have a lot of cluttered characters from former storyarcs that are worth keeping around but I want to shift to not be in the primary mix as they may or may not be coming back.

Thanks for any info you can offer!

Link to my character page for reference

https://greyhawk-21.obsidianportal.com/characters

I am still banging away on our Star Trek campaign, specifically the Adventure Log Post.  I want to use the header images I am creating for each Log as the main Clickable item on the Posts page.  I want to show the whole image below the Title of the Log and the Date.  Is there some way to simply have more of the post show up perhaps?  Thanks for any help in advance!    

Here is an example https://the-irregulars-savage-rifts.obsidianportal.com/adventure-log/betrayal

The floating badge alone would be sweet, and would reclaim some real estate on the main wiki. 

Thanks! 

I know where to get the code for the widget, that's easy enough. The difficulty is getting it on the frontpage. I tried using HTML with the absolute positioning tag but that appears to only be within the edittable area. I assume this means I have to add the CSS in the main area in the settings menu. The problem is I'm not sure exactly what code I need to implement to get the widget placed. Obviously the positioning I can tweak to my liking but it's the main code I need to put in the CSS area to put the widget on the main page, outside the editable area.

Anyone able to help me with this?