When using macos theme “extra’s “ added to userstyle.css don’t work!

[BobWs]

Hi, I’m new to Joplin, just migrated from Standardnotes, and trying to find my why in the Joplin world☺️ I like your theme as it suits my needs and using a mac, but unfortunately some things don’t work for me as they should.

For example when I activate your theme all the extra codes I have put in userstyle.css don’t work anymore. (Changes found here: https://discourse.joplinapp.org/t/share-your-css/1730/93

But when I disable the macos theme everything works again. Could you help me with this problem?

TIA example what I have put in the userstyle

b-gray, b-green, b-red, b-blue, b-orange, b-pink, b-purple {
    width: 90%;
    display: block;
    margin-left: 20px; 
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid;
    border-radius: 2px; 
    word-wrap: break-word;
    box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3) ; 
}

b-gray {
    border-color: #b1bcc2;
    background-color: #e9edf0; 
 }

b-green {
    border-color: #5fa04e;
    background-color: #c5e5b4; 
} 

b-red {
    border-color: #f65354;
    background-color: #fad3d4; 
}

b-blue {
    border-color: #229ade;
    background-color: #bbe5fb; 
}

b-orange {
    border-color: #cf7506;
    background-color: #faf3d3; 
}

b-purple {
    border-color: #af74e8;
    background-color: #ead9fb; 
}

b-pink {
    border-color: #ed5393;
    background-color: #fad3e5; 
}

[andrejilderda]

Hi @BobWs , since the way styles are configured in Joplin I had to write a lot of high specificity CSS in order to overwrite the default styles. These probably overwrite your custom styling. What you can try is to add !important the rules that don't work, or to all rules:

b-gray,
b-green,
b-red,
b-blue,
b-orange,
b-pink,
b-purple {
  width: 90% !important;
  display: block !important;
  margin-left: 20px !important;
  padding: 10px !important;
  border: 1px solid !important;
  border-left: 5px solid !important;
  border-radius: 2px !important;
  word-wrap: break-word !important;
  box-shadow: 3px 3px 7px 0 rgba(0, 0, 0, 0.3) !important;
}

b-gray {
  border-color: #b1bcc2 !important;
  background-color: #e9edf0 !important;
}

b-green {
  border-color: #5fa04e !important;
  background-color: #c5e5b4 !important;
}

b-red {
  border-color: #f65354 !important;
  background-color: #fad3d4 !important;
}

b-blue {
  border-color: #229ade !important;
  background-color: #bbe5fb !important;
}

b-orange {
  border-color: #cf7506 !important;
  background-color: #faf3d3 !important;
}

b-purple {
  border-color: #af74e8 !important;
  background-color: #ead9fb !important;
}

b-pink {
  border-color: #ed5393 !important;
  background-color: #fad3e5 !important;
}

It's not so pretty, but should work. 😅

[BobWs]

Okay thanks for your help! I will give it a try. So I guess this should also work for all the other settings I made in userstyle. Is this also the case for userchrome.css changes?

Thanks again for your help and great job with the theme! 👍

[andrejilderda]

Yes it should. Let me know if that's not the case!

[BobWs]

Yes it should. Let me know if that's not the case!

Well I added as you suggested and I worked for a moment but after quitting the (desktop) app and started it again all the colored-boxes disappeared even when I restart the app a few times. I have tried it with another theme and same result.

[andrejilderda]

@BobWs So now it is not anymore like the screenshot you provided? Or did you expect the left editor to also have colour?

[BobWs]

@BobWs So now it is not anymore like the screenshot you provided? Or did you expect the left editor to also have colour?

No it should look like this, But instead it looks like the the previous screenshot!

[andrejilderda]

Aha sorry, I didn't look at the HTML syntax, but it is invalid. To replicate the screenshot above I'd expect an HTML structure like so:

<!-- first box -->
<b-green>
  Hello world
</b-green>

<!-- second box -->
<b-red>
  <br />
  <!-- third box, nested 1st level -->
  <b-green>
    Hello world
    <br />
    <!-- fourth box, nested 2nd level -->
    <b-green>
      <!-- empty -->
    </b-green>
  </b-green>
</b-red>

So every box <b-red> should also have a closing tag </b-red>.