Closed anantone closed 2 years ago
OK then
Hi, sorry, I missed this. First thing I would try to look at is if the CSS is being loaded, check if there are anything like:
<link href="api/notes/[noteId]/download" rel="stylesheet">
If it's there, then it's probably selectors or something else not being applied correctly, debug using chrome/firefox dev inspector.
Thank you @zadam
In the page source, the CSS is being loaded, as well as the ckeditor stylesheet.
<link href="../libraries/ckeditor/ckeditor-content.css" rel="stylesheet">
<link href="api/notes/[noteId]/download" rel="stylesheet">
But in the Chrome browser inspector, I can see only "user agent stylesheet" and "ckeditor-content" being used.
Does this mean I need to look at Chrome settings to debug further? (same behavior in Firefox, fyi)
For reference, I'm using the CSS from @ysslang https://github.com/zadam/trilium/discussions/2681
body {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif;
background: #dfe6e9;
}
#layout {
display: flex;
margin: 0 auto;
}
#menu {
width: 15%;
margin: 60px 5px;
overflow: auto;
}
#menu p {
margin: 0;
}
#menu>p {
font-weight: bold;
font-size: 110%;
}
#menu ul {
padding-left: 20px;
}
#main {
width: 80%;
max-width: 1200px;
position: relative;
background: #fff;
margin: 60px auto;
box-shadow: 0px 2px 38px rgba(0, 0, 0, 0.2);
padding: 25px;
overflow: auto;
}
#parentLink {
float: right;
margin-top: 20px;
}
#title {
margin: 0;
padding-top: 10px;
}
img {
max-width: 100%;
}
pre {
white-space: pre-wrap;
word-wrap: anywhere;
}
iframe.pdf-view {
width: 100%;
height: 800px;
}
#toggleMenuButton {
display: none;
position: fixed;
top: 8px;
left: 5px;
width: 1.4em;
border-radius: 5px;
border: 1px solid #aaa;
font-size: 2rem;
z-index: 10;
height: auto;
color: black;
cursor: pointer;
}
#childLinks.grid ul {
list-style-type: none;
display: flex;
flex-wrap: wrap;
padding: 0;
}
#childLinks.grid ul li {
width: 180px;
height: 140px;
padding: 10px;
}
#childLinks.grid ul li a {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
border: 1px solid #ddd;
border-radius: 5px;
justify-content: center;
align-content: center;
text-align: center;
font-size: large;
}
#childLinks.grid ul li a:hover {
background: #eee;
}
#childLinks.list ul {
list-style-type: none;
display: inline-flex;
flex-wrap: wrap;
padding: 0;
margin-top: 5px;
}
#childLinks.list ul li {
margin-right: 20px;
}
#noteClippedFrom {
padding: 10px 0 10px 0;
margin: 20px 0 20px 0;
color: #666;
border: 1px solid #ddd;
border-left: 0;
border-right: 0;
}
#toggleMenuButton::after {
position: relative;
top: -2px;
left: 1px;
}
@media (max-width: 48em) {
#layout.showMenu #menu {
display: block;
margin-top: 40px;
}
#toggleMenuButton {
display: block;
}
#layout.showMenu #main {
display: none;
}
#title {
padding-left: 60px;
}
#layout.showMenu #toggleMenuButton::after {
content: "«";
}
#toggleMenuButton::after {
content: "»";
}
#menu {
display: none;
}
}
Hmm, not sure what's up with that. I just tried to simulate this with the given CSS and it seems to apply correctly:
Oh, I'm quite ashamed of what I'm about to write, but for the sake of honesty; my CSS note was actually a text note. Now that the note type is "CSS", it works! Sorry for needlessly taking up your time...
All good, happy that you managed to resolve it.
Hello, I've followed the instructions from the wiki, adding to the shareRoot note attribute
~shareCss(inheritable)=CSS
with the CSS note titled "CSS" as part of the shared subtree, and#shareHiddenFromTree
to the CSS note, and#shareOmitDefaultCss(inheritable)
to the shareRoot note.I've tried with my own CSS and also this one.
I'm able to toggle default CSS on and off with
#shareOmitDefaultCss(inheritable)
, but none of the CSS from my CSS note gets applied.I'm not sure how to debug this? I'm using version 0.55.1 from my Debian desktop and a server install on VPS/Cloudron.