I am slowly figuring out CSS, and looking around the forums and learning things, but I had a question.

Can I embed CSS code within an individual page, or do I need to create the css page in the advanced campaign settings?

I'm looking at making basic changes, such as fonts, headers, but want to look at the changes on a single page, instead of applying it to the whole campaign, or section of pages.

Is this possible?

Also is this a particular programming language?  if so how can i lean the basics?  any links, videos or resources would be greatly appreciated.  I would really like to learn this. 

thanks in advance

*+1 Reach*: Can do extra cool thing.

*+1 Reach*: Can do differnet extra cool thing.

It comes out as the following:

1 Reach: Can do extra cool thing.

1 Reach: Can do differnet extra cool thing.

Is there something that I'm missing or should do to fix it? Spacing it doesn't fix the second entry, and looks weird spacing-wise as it become inconsistant with the rest of the entry. Thanks in advance.

I'm a complete newbie in HTML and CSS, but I wanted to know if it was possible to easily remove some texts from ObsidianPortal with few modifications. For example, I want to change the titles of Home Page and Main Page of the wiki, or the titles "PLAYER CHARACTERS" and "NON-PLAYER CHARACTERS" in Characters page. I've failed to change those items, so I suppose I'm not good enough to do that.

Thanks for help!

/* Set the background color to black and text color to yellow for pages with "scroll" in the slug */

.page[data-slug*="scroll"] {

    background-color: black;

    color: yellow;

}

But it does not seem to update.  I am new to CSS, so my guess is I missed a simple step.  Any help?

Curt

But this applies the same blue colour to all wiki page titles, which is not what I want. Is there a way to select 1 specific wiki page and apply the colour to that one's title only? Completely new to CSS so I could use some tips 

Thanks in advance!

Basically, I want to create a consistent header with some navigation elements and such in it, that's done. Finding a way to implement it across a massive, 14 year old campaign is where I flounder. 

I'm looking ofr a way to add subtitles to my adventure log entries that have more than one line.  For example:

Title:
Session 13: Here We Go Again

Subtitle:
In world date: 23 Harvest, year 453
Location: City of Light

Anyone know how I can customize the accordion to make the abckground black, and also change the borders and remove the arrow? I recall there was a topic somewhere that dealt with the arrow, but I can't find it

To solve this just add the below CSS which will hide any images in search result descriptions:

.campaign-search-page .result img
{display:none;
}

This will hide these pictures fixing the problem:

Meanwhile the images will still display as normal on the full page.

I've posted a few updates to the CSS Help Hub on my test campaign, might be useful for folks new to CSS so I figured I'd post about it here.

https://abersade-testbed.obsidianportal.com/wikis/css-help-main-hub

THe OP Page for our campaign is looking great for what we want on PC, but on mobile we've been having a few hiccups. The main one is how big the text is on the screen - we'd rather the text scaled down to size with mobile options (by width, perhaps?) instead of staying a fixed size.

An example to illustrate, using a middle/low-end smartphone but that illustrates the issue we've had:

Is there a way to make this work for the whole campaign page? Thanks.

Here's the campaign page: https://adastra-2.obsidianportal.com/

I'm trying to implement a Star Trek-y feel. The page background works quite well (I stole the correct code ), but I need the text start further to the right, so that its clear of the borders. The same goes for the page headings, they vanish under the borders, too.

Here's the code I've got so far:

/* BEGIN - CSS Hintergrund in den Content-Bereichen */
/* Transparent backgrounds so parchment shows */
.post-player-secret.post-section.player-secret,
.campaign-landing-page-container,
.wiki-page .post-section.post-main,
.wiki-page .post-gm-only.post-section
{ background-color: transparent!important; }

/* Parchment body */
.adventure-log-post-container.full .post-comments.post-section,
.adventure-log-post-container.full .post-gm-only.post-section,
.adventure-log-post-container.full .post-player-secret.post-section,
.adventure-log-show .post-main,
.campaign-public-layout #character-details,
.character-show .post-player-secret.post-section.player-secret,
.wiki-page,
.character-show .main-content section,
.item-show .main-content section {
background-image: url('https://familia-seevenborni.de/wp-content/uploads/2022/04/computer-center.png');
background-position:center; background-size:100%; background-color : transparent!important; 
position:relative; margin-top: 30px; margin-bottom: 100px!important;
}

/* Parchment header */
.adventure-log-post-container.full .post-comments.post-section:before,
.adventure-log-post-container.full .post-gm-only.post-section:before,
.adventure-log-post-container.full .post-player-secret.post-section:before,
.character-show .post-player-secret.post-section.player-secret:before,
.adventure-log-show .post-main:before,
.wiki-page:before,
.character-show .main-content section:before,
.item-show .main-content section:before { top:-15px; height:75px;
background-image: url('https://familia-seevenborni.de/wp-content/uploads/2022/04/computer-border-oben.png');
background-color : transparent; background-repeat:no-repeat; background-position: center center; background-size:100%;
position:absolute; z-index:1; width:100%; left:-4px; content:"";
}

/* Parchment footer */
.adventure-log-post-container.full .post-comments.post-section:after,
.adventure-log-post-container.full .post-gm-only.post-section:after,
.adventure-log-post-container.full .post-player-secret.post-section:after,
.adventure-log-show .post-main:after,
.post-player-secret.post-section.player-secret:after,
.wiki-page:after,
.character-show .main-content section:after,
.item-show .main-content section:after { bottom:-75px; height:155px;
background-image: url('https://familia-seevenborni.de/wp-content/uploads/2022/04/computer-border-unten.png');
background-color : transparent; background-repeat:no-repeat; background-position: center center; background-size:100%;
position:absolute; z-index:1; width:100%; left:-5px; content:"";
} 

/* Positioning content on parchment */
.wiki-page:after .adventure-log-post-container.full .post-comments.post-section, .character-show .main-content section, .item-show .main-content section{ padding-left: 16.5%; }
.wiki-page { padding-left: 10.5%; }
/* END - CSS only parchment background on content */

My guess is that the issue is somewhere in the last part /* Positioning content on parchment */, but I can't find it for the life of me. Any help wold be appreciated.

Though, I'd replace the flags with face images form the character sheet

Any ideas?

And the Status and Days sections are not necessary...probably change one of them to Level, maybe the other to XP

"Cameo":https://amanifestationofchaosextinctionevent.obsidianportal.com/wikis/the-group#m3

I would like to have the video centered and the option to play from the page or at least to open the link into playing, instead of having to click the link on the page and then start it separately once you get there.

Thoughts?

Leonidas300

"Manifestation of Chaos - Extinction Event":https://amanifestationofchaosextinctionevent.obsidianportal.com/

If not then I must have some other code messing with it. 

I am hoping maybe someone has done this before. Almost all of y players have 2 characters. Only 1 shows up in this section. I would like them all to show up in this section, and if possible separated by a tag (I used A-Team and B-Team in my game) so it would appear something like this:





anyone ever done something like this before?

I punched some numbers and date names to make it Faerun accurate (see textblock at the bottom of this post for the .json contet for Faerun circa 1488 that can by copy/pasted into either link above) and i hoped that inspecting the source I could just see a bunch of html and copy/paste it into a wiki to replicate the calendar.

Lo and behold, it did not work! (what was I thinking?)

So I figure that CSS is required to make this work, but I cannot identify what. I was hoping someone here could help me out with that because I am guess that the two links above must use the same or similar CSS to get results which look almost identical but for the background. 

Ideally, I would prefer rather than the links above to have something more interactive like this creation: 

https://www.worldanvil.com/w/forgotten-realms-28d26d5th29-lethann/a/calendar-of-harptos-article

has anyone done this before in Obsidian Portal? Can anyone help me out in finding the CSS that I could copy/paste from those calender generators, or am I just thinking completely in the wrong direction on how this works?

thanks in advance!

Frak

calender text block, which is also saved as .json:

{"year_len":365,"events":1,"n_months":17,"months":["Hammer: Deepwinter","Midwinter Festival","Alturiak: The Claw of Winter","Ches: The Claw of the Sunsets","Tarsakh: The Claw of the Storms","Greengrass: Festival","Mirtul: The Melting","Kythorn: The Time of Flowers","Flamerule: Summertide","Midsummer Festival","Eleasis: Highsun","Eleint: The Fading","Highharvestide Festival","Marpenoth: Leaffall","Uktar: The Rotting","Feast of the Moon Festival","Nightal: The Drawing Down"],"month_len":{"Hammer: Deepwinter":30,"Midwinter Festival":1,"Alturiak: The Claw of Winter":30,"Ches: The Claw of the Sunsets":30,"Tarsakh: The Claw of the Storms":30,"Greengrass: Festival":1,"Mirtul: The Melting":30,"Kythorn: The Time of Flowers":30,"Flamerule: Summertide":30,"Midsummer Festival":1,"Eleasis: Highsun":30,"Eleint: The Fading":30,"Highharvestide Festival":1,"Marpenoth: Leaffall":30,"Uktar: The Rotting":30,"Feast of the Moon Festival":1,"Nightal: The Drawing Down":30},"week_len":10,"weekdays":["Firstday","Secondday","Thirdday","Fourthday","Fifthday","Sixthday","Seventhday","Eighthday","Ninthday","Tenthday"],"n_moons":1,"moons":["Selune"],"lunar_cyc":{"Selune":30.4375},"lunar_shf":{"Selune":6},"year":1488,"first_day":0,"notes":{"1488-1-1":"","1488-1-3":"","1488-1-5":"","1488-1-8":"","1488-1-11":"","1488-1-12":"","1488-1-15":"","1488-1-17":"","1488-1-18":"","1488-1-20":"","1488-1-22":"","1488-1-24":"","1488-1-26":"","1488-1-29":"","1488-3-7":"","1488-3-9":"","1488-3-13":"","1488-3-15":"","1488-3-16":"","1488-3-17":"","1488-3-20":"","1488-3-21":"","1488-3-22":"","1488-3-27":"","1488-4-2":"","1488-4-5":"","1488-4-9":"","1488-4-17":"","1488-4-18":"","1488-4-19":"Spring Equinox","1488-4-23":"","1488-4-25":"","1488-4-26":"","1488-5-4":"","1488-5-6":"","1488-5-7":"","1488-5-9":"","1488-5-11":"","1488-5-12":"","1488-5-14":"","1488-5-15":"","1488-5-19":"","1488-5-23":"","1488-7-7":"","1488-7-10":"","1488-7-16":"","1488-7-18":"","1488-7-20":"","1488-7-21":"","1488-7-23":"","1488-7-24":"","1488-7-25":"","1488-7-26":"","1488-7-29":"","1488-7-30":"","1488-8-4":"","1488-8-8":"","1488-8-10":"","1488-8-11":"","1488-8-14":"","1488-8-17":"","1488-8-24":"","1488-8-27":"","1488-8-29":"","1488-8-30":"","1488-9-2":"","1488-9-6":"","1488-9-11":"","1488-9-16":"","1488-9-18":"","1488-9-19":"","1488-9-21":"","1488-9-22":"","1488-9-26":"","1488-9-27":"","1488-10-1":"","1488-11-1":"","1488-11-4":"","1488-11-10":"","1488-11-14":"","1488-11-18":"","1488-11-24":"","1488-11-28":"","1488-12-4":"","1488-12-12":"","1488-12-14":"","1488-12-19":"","1488-12-21":"Autumn Equinox","1488-12-24":"","1488-12-25":"","1488-12-26":"","1488-13-1":"","1488-14-5":"","1488-14-6":"","1488-14-7":"","1488-14-15":"","1488-14-21":"","1488-14-25":"","1488-14-28":"","1488-14-30":"","1488-15-19":"","1488-15-21":"","1488-15-22":"","1488-15-23":"","1488-15-11":"","1488-15-27":"","1488-15-15":"","1488-15-16":"","1488-15-25":"","1488-15-26":"","1488-15-5":"","1488-17-4":"","1488-17-8":"","1488-17-16":"","1488-17-18":"","1488-17-21":"","1488-17-23":"","1488-17-25":"","1488-17-27":"","1488-17-20":"Winter Solstice","1488-8-20":"Summer Solstice"}}

This has likely been asked before but it's been awhile as far as I can recall, I'm hoping someone better than I am at CSS already knows of a method. What I'm looking to do is to customize the CSS for one of my sites based on whether or not the person viewing the screen is one of the players in the game.

The reason I want to do this is because of the navigation bar differences between users that are players in the game and everyone else, I'd really like to be able to fix the spacing of the navbar titles for everyone but the players.

Image example below showing the issue, also a good illustration of how different browsers render images a bit differently. Left is Firefox, right is Chrome.

Thanks for any assistance!

Thanks!