Adding CSS to Custom CSS section isn't changing things

TCorlissDM

Hi all, total newbie to CSS but really excited about getting to customize my campaign for my friends. I am currently struggling with an issue where I insert code that I am copying straight from Abersade to get an idea how it works, and it is not applying any actual changes after I click save. I'm sure I am doing something incorrect as I am very new, and any help would be appreciated. Here is an example of the script I added in the Custom CSS section that is not working:

 

/* 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

C4RB0N

Hi @TCorlissDM!

I'm going to bring this to the devs and we'll get back to you soon!

 

C4RB0N

Hi @TCorlissDM! 

Please see below:

https://paidia.obsidianportal.com/custom_css

In the CSS, on the 9th line down:

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

See how the double quotes around “player” are straight up and down? That’s the normal double quotes that happen when you type in the CSS.

In the CSS on the last line:

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

See how the double quotes around " Settingses" are slanted? Those are the ones that happen sometimes when double quotes are copied and pasted.

If you manually delete each of the double quotes in the CSS, and then retype them, and then Save, it should show your labels after the current labels (or rather it will show “…” to show that your labels have been appended to the current labels). You’ll want to “hide” the current labels with “display: none” to show only your own labels.

Let us know how it works!

Abersade

Glad to know that the code is helpful!