When I place the image on the page, the images do NOT work. I have about exhausted Google so reaching out here for help.

This is the link directly from the Medi File:

https://db4sgowjqfwig.cloudfront.net/campaigns/334759/assets/1509738/Locations-Menu-SVG.svg?1754541938

And here is the page in question:

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

The image is there, but again, the links do not work.

One Google suggestion was to just paste the svg file directly into page. I tried that and ended up with a wall of text about 1000 lines long :(

So I am obviously doing something wrong. Or do SVG files not work in Portal? Help please :)

I don't have any custom CSS for it on my advanced settings page, and the color scheme I chose doesn't seem to apply to it for some reason. I copied it from another campaign and then made changes, but I can't see why it stays with that color scheme from the previous campaign:

Exalted | Obsidian Portal

For the record, I know very little about HTML other than the basics but beyond that, I think I've created my pages with a lot of luck and some prayer.

I am trying to create an LCARS style menu for my page's WIKI.

How it should appear is like this image:

https://db4sgowjqfwig.cloudfront.net/campaigns/353736/assets/1572646/Main_Page.png

How it's appearing on my page can be found here:

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

As you can see, its a bit of a mess.

Can anyone offer some better solutions? ChatGPT suggested using SVG and then hot spotting the image but I found that even when I asked for a step by step, it made little to no sense. Even the step by step on how to create the SVG in the first place using Illustrator left me scratching my head.

I am trying to work out how to have a group of characters appear as they do under the character link:

https://startrekexcalibur.obsidianportal.com/characters

But to appear on this page:

https://startrekexcalibur.obsidianportal.com/adventure-log/-adventure-1-signals

I've given tags for each episode of the campaign and applied them to each NPC/PC.

Any suggestions because I'm stumped.

https://startrekexcalibur.obsidianportal.com/characters (Characters)

https://startrekexcalibur.obsidianportal.com/characters/ens-illi-thid (Specific Character)

The text appears next to some of the characters with [D[. This indicates that the character/NPC has died. I am wanting to replace it with this:

I found the symbol in a Google Font found here:

https://fonts.google.com/icons

Any assistance would be appreciated.

Ian

https://abersade-testbed.obsidianportal.com/wikis/css-viewing-the-css-of-other-sites

https://abersade-testbed.obsidianportal.com/wikis/css-specifics-character-at-a-glance-table

Hope it helps!

https://abersade-testbed.obsidianportal.com/wikis/css-specifics-vertical-timeline

So I have a game with Pathfinder, D&D, AD&D, and no system for example.

The link for pathfinder character page:

    <li class='characters active-target'>

      <a href='/characters?filters=tag_pathfinder&expand_filters=false'>

        <span class='nav-icon icon op-icon-characters'></span><span class='nav-text'>&nbsp;Pathfinder Characters</span>

      </a>

    </li>

So now I want the default character page to show the no system, D&D and AD&D but NOT the Pathfinder. So a version of the above that essentially show everything BUT the Pathfinder. So the page would see the Pathfinder tag and NOT show those characters.

    <li class='characters active-target'>

      <a href='/characters?filters=tag_pathfinder&expand_filters=false' BUT INSTEAD FILTERS OUT THE PATHFINDER ONLY>

        <span class='nav-icon icon op-icon-characters'></span><span class='nav-text'>&nbsp;Pathfinder Characters</span>

      </a>

    </li>

I hope I am making sense, is it getting late in the evening for this old grognard.

I searched for custom CSS that would change colors.  I found a git repository with several examples. But none of them change the menu colors. So, as nice as some of them are, they don't address my problem.

I don't know how to use CSS and it's not something I would be interested in learning.

Does anyone have examples of CSS that would change the menu colors?

Thank you

https://thestarsdontcare.obsidianportal.com/adventure-log

You can check out the logs and see the affect. Not working on the overflow. Here is the code that works for everything:

.adventure-log-index .adventure-log-post .columns:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) {
background-color:#000 !important;
}

.adventure-log-index .adventure-log-post .columns:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) + .small-3.columns {
background:#000 !important;
}

.post-header-container:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) {background-color:#000 !important;
}

.post-header-container:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) + .row > .small-12.columns > * {
background:#000 !important;
}

Now here are two versions I tried for the overflow that haven't worked:

.adventure-log-index .adventure-log-post .columns:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) + div.post-content > div.overflow-fade-out {
background:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1)) !important;
}

.adventure-log-index .adventure-log-post .columns:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) + .adventure-log-index .post-content > .adventure-log-index .overflow-fade-out {
background:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1)) !important;
}

So the parent-child thing and linkage path are stuff I have rarely used so figuring I am just not quite getting the pathing correct. Hopefully one of the smarter people here can fix me up :)

#campaign-nav .front-page a:after {content:" Home";}

You can see what I am talking about here:

https://alien-4.obsidianportal.com/

I see the new menu option on left just fine, but the actually filtering is not working. Regardless of which you select, ALL of the items show up in the list. If you look up in the URL, it reflects the proper Filters. But it isn't reflected on the page.

https://deepspaceadventures.obsidianportal.com/

Is the actual campaign page.

The filtered links are:

https://deepspaceadventures.obsidianportal.com/items?filters=tag_gear

https://deepspaceadventures.obsidianportal.com/items?filters=tag_smallcraft

https://deepspaceadventures.obsidianportal.com/items?filters=tag_starship

My actual menu code looks correct to me. I don't see any obvious errors, but I am getting old, sigh. So what am I doing wrong? Any suggestions?

I couldn't paste the whole code, says my message has too many characters if I do that. So here is the relevant portion:

	<li class='section items active-target'>
      <a href='/items?filters=tag_gear&expand_filters=false'>
        <span class='nav-icon icon op-icon-backpack'></span><span class='nav-text'>Gear</span>
      </a>
    </li>
    <li class='section items active-target'>
      <a href='/items?filters=tag_smallcraft&expand_filters=false'>
        <span class='nav-icon icon op-icon-backpack'></span><span class='nav-text'>Smallcraft</span>
      </a>
    </li>
    <li class='section items active-target'>
      <a href='/items?filters=tag_starship&expand_filters=false'>
        <span class='nav-icon icon op-icon-backpack'></span><span class='nav-text'>Starships</span>
      </a>
    </li>

Totally CSS ignorant, so this may be easy and obvious (which would be optimal). Is there a way to use CSS to update a block of code at the top of each page in the wiki? Something I could update at the source and it would roll out to all (or selected) pages? Basically it's going to be a secondary navigation menu that will probably get some changes and updates as I refine things. a consistent header with navigation elements and a header image. Finding a way to implement it across a massive, 14 year old campaign is where I flounder. 

.navbar ul {

     display: flex;

     padding: 0px;

     margin-bottom: 100px;

     z-index: 10;

     position: relative;

}

The issue I am running in to is the actual page is in the way. I have mildly got around it with the z-index, but it still isn't quite what I want. Here is the link to my page so you can see what I am working with. I want to move the nav bar is above the rest of the page. Any ideas would be great!

/* General */

/* Page Dimensions - Width */

.campaign-public-layout #content { max-width: 1400px !important; }

/* Centered Text */

.centered-text{text-align:center;}

/* Tag Search Results Page Background Color (Transparent By Default), this change makes the tag results page white, without it the page is transparent and impossible to read */

.wiki-list-tag {background-color: white}

/* Color Coded Tagging, use these lines to change the font color and background color, data-tag= is the tag (case sensitive), background-color: is the "bubble" color around the tag text, color: is the color of the tag text */

.campaign-public-layout #content a[data-tag="player"] {background-color: #600000;

color: #ffffff;-webkit-border-radius:1000px;

border-radius:1000px;

padding:0.1875em 0.625em 0.25em;

font-size:0.875em;}.

/* + Sign Underline Functionality - Turns It Off */

ins { color:inherit; text-decoration:inherit;}

ins:before { content:’+’;}

ins:after { content:’+’;} 

/* NAVIGATION MENUS - IMPROVED v2 */

/* Hides Default Text */

.custom-navigation .nav-text {font-size: 0;}

/* Front-end Customizations */

/* Adds Custom Text */

#campaign-nav .dashboard a:after {content:” Overview”;}

#campaign-nav .front-page a:after {content:” Home”;}

#campaign-nav .forum a:after {content:” Chat”;}

#campaign-nav .adventure-log a:after {content:” Adventures”;}

#campaign-nav .file-docker a:after {content:” Gallery”;}

#campaign-nav .calendar a:after {content:” Calendar”;}

#campaign-nav .characters a:after {content:” Characters”;}

#campaign-nav .items a:after {content:” Magic Items”;}

#campaign-nav .maps a:after {content:” Mapses”;}

#campaign-nav .wiki a:after {content:” Lore”;}

#campaign-nav .secrets a:after {content:” Secretses”;}

#campaign-nav .settings a:after {content:” Settingses”;}

Also thank you to Abersade whose CSS i tried to copy for making such helpful guides! It all seems so straightforward I feel silly having issues implementing it.

Thanks in advance! Happy adventuring

ul.tags-list.inline-list.small-list a.tag-link[data-tag="journalA"] would then change the background colour of the two adventure log parts:

.adventure-log-show .post-header-container

body.campaign-public-layout .post-section.post-main

For test purposes I have a default white background and just trying to change it to say light grey. I can get more fancy once I get initial code working.

Not sure if this can be handled by just .css of needs to jump into javascript?

Anyone have nay suggestions or examples from existing campaigns where this has been done? Much appreciated.

I have recently discovered a way to sort the characters list so I can break them into needed groups.  That code is here:

<div class="secondary-heading">
  MAIN CHARACTERS
</div>
<div class="content-list" data-filter=".pc:not(.tag-deceased)">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  SUPPORTING CHARACTERS
</div>
<div class="content-list" data-filter=".npc:not(.tag-blackwood,.tag-deceased,.tag-farrington,.tag-vanished,.tag-mei-lian,.tag-new,.tag-officials,.tag-triad)">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  NEW CHARACTERS
</div>
<div class="content-list" data-filter=".tag-new">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  BLACKWOOD FAMILY & ASSOCIATES 
</div>
<div class="content-list" data-filter=".tag-blackwood">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  MEI LIAN ASSOCIATES
</div>
<div class="content-list" data-filter=".tag-mei-lian">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  FARRINGTON FAMILY & ASSOCIATES
</div>
<div class="content-list" data-filter=".tag-farrington">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  BROWN ASSOCIATES
</div>
<div class="content-list" data-filter=".tag-brown">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  GANNON ASSOCIATES
</div>
<div class="content-list" data-filter=".tag-gannon">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  SINGAPORE OFFICIALS
</div>
<div class="content-list" data-filter=".tag-officials">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  TRIAD MEMBERS
</div>
<div class="content-list" data-filter=".tag-triad">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  MISSING PERSONS
</div>
<div class="content-list" data-filter=".tag-vanished">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>
<div class="secondary-heading">
  DECEASED CHARACTERS
</div>
<div class="content-list" data-filter=".tag-deceased">
  <ul class="large-block-grid-2 small-block-grid-1"></ul>
</div>

https://cityofshadows-2.obsidianportal.com/characters

My next goal is to create a similar layout for Items.  However, I can change the headings, but I can not seem to get it to sort in any fashion other than "Author code" or no "Author code". I would like to be able to sort items into  "Personal Items"  and everything else, but would further like to sort the everything else into categories in that same section. I used tags to do this in my character section, but can not seem to do the same in the Items list. In fact if I remove the author tag syntax, it displays nothing at all.  I would prefer that the author tag was completely ignored, whether in the on or off states, and it did all sorting by  tags.

If anyone can help me with a snippet of code that will get the job started, I can modify as needed.

Also I would like to tell everyone here how much i have learned for these threads.  Because of your contributions here, my campaign pages have become more and more aesthetically pleasing, and I have had great feedback from my players.

Any assistance will be greatly appreciated..

Any suggestions?

---

<td><a href="/characters/char1">

[[File:1449951  | class=media-item-align-none | 390px | test_iconsize.png]]

[[Character 1 page link]]

</a></td>

<td><a href="/characters/char2">

[[File:1449934  | class=media-item-align-none | 390px | test_iconsize.png]]

[[Character 2 page link]]

</a></td>

 

---

1. How can I align them horizontally?

2. How can I then change their alignment to center (at the moment they are left-aligned)?



Thanks a lot in advance :)

On PC, you have the main page and the navigation list to the side. On our page, it looks like this:

But then, on mobile, when you tap on the menu to expose the navigation, it looks like this, even though it's set up nearly the same in our custom navigation:

Which, let's face it, is not nearly as useful.

Is there a way to make this dropdown agglomeration of icons become a bona fide dropdown list with the labels and everything that is useful?

Thanks in advance.

    <li class='characters active-target'>

      <a href='/characters?filters=tag_d_d'>

        <span class='nav-icon icon op-icon-characters'></span><span class='nav-text'>&nbsp;&nbsp;D&D Characters</span>

      </a>

    </li>

    <li class='characters active-target'>

      <a href='/characters?filters=tag_pathfinder'>

        <span class='nav-icon icon op-icon-characters'></span><span class='nav-text'>&nbsp;&nbsp;Pathfinder Characters</span>

      </a>

    </li>

A snippet of the code there for context.

So my annoyance, when you click the link, you get to the proper page but the Filters tab is expanded by default. It is confusing my players. Is there some css or something that can be added to the Custom Navigation code directly or style sheet that ensures the Filters tab is closed by default when you click on either character link?

https://thelongforgotten.obsidianportal.com/

I'm currently trying to make my campaign page more aesthetically palatable so my players actually use it.  I currently want to change the character index page so the boxes for each character become buttons (to stick with the sci-fi theme).  However, no matter what I try, the boxes refuse to go away.  I have tried every CSS tutorial I can find.  I have looked at page sources for multiple campaigns, tried using those (didn't work).  I've tried pasting CSS from other posts directly in (nothing changed).  

Does anyone have any ideas?

The page in question: https://traveller-30.obsidianportal.com/characters

I currently have no CSS to share, as nothing has worked and I'd figure I'd ask here and start from scratch.  

What I want to do is change the colour of the browser window Scroll bar.  My site has a blue theme, but OP gives all sites a brownish kind of colour to the scroll bar.



While I'm at it, I've managed to change the colour of the top menu using code from here: https://post-reforge-css.obsidianportal.com/wikis/topnav but there are a few elements that I can't change and code for them was not listed on the above page.  I just need to know the element names so that I can change their colour. I'm talking about the little down arrow beside the menus, and the two elements that are grey in my picture.



Thanks for any help. :)

 </li>

    <li class='forum active-target'>

      <a href='/forum'>

        <span class='nav-icon icon op-icon-forum'></span><span class='nav-text'>&nbsp;&nbsp;Barker Network</span>

      </a>

What do I need to change? and thank you so much for the help to this old man.