I made a custom snippet, see below. The strange thing for me is that the first 2 in this snippet work on every page the h2 doesnt show on a page unless I add that in the meta data cssClass: h2. Im not sure why the first two are applied to a page without using the cssClass Metadata area, but in order to use the h2 only works if its added by cssClass Metadata. I hope I explaned that well?
/* Custom reference material */
.callout[data-callout="reference-material"] {
--callout-title-color: 7, 179, 133;
--callout-color: 4, 135, 100;
--callout-icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 20px; width: 20px;"><g class="" transform="translate(0,0)" style=""><path d="M169 57v430h78V57h-78zM25 105v190h46V105H25zm158 23h18v320h-18V128zm128.725 7.69l-45.276 8.124 61.825 344.497 45.276-8.124-61.825-344.497zM89 153v270h62V153H89zm281.502 28.68l-27.594 11.773 5.494 12.877 27.594-11.773-5.494-12.877zm12.56 29.433l-27.597 11.772 5.494 12.877 27.593-11.772-5.492-12.877zm12.555 29.434l-27.594 11.77 99.674 233.628 27.594-11.773-99.673-233.625zM25 313v30h46v-30H25zm190 7h18v128h-18V320zM25 361v126h46V361H25zm64 80v46h62v-46H89z" fill="var(--callout-title-color)" fill-opacity="1"></path></g></svg>;
}
/* Custom Read Aloud Text */
.callout[data-callout="read-aloud-text"] {
--callout-title-color: 4, 135, 100;
--callout-color: 40, 204, 237;
--callout-icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 20px; width: 20px;"><g class="" transform="translate(0,0)" style=""><path d="M169 57v430h78V57h-78zM25 105v190h46V105H25zm158 23h18v320h-18V128zm128.725 7.69l-45.276 8.124 61.825 344.497 45.276-8.124-61.825-344.497zM89 153v270h62V153H89zm281.502 28.68l-27.594 11.773 5.494 12.877 27.594-11.773-5.494-12.877zm12.56 29.433l-27.597 11.772 5.494 12.877 27.593-11.772-5.492-12.877zm12.555 29.434l-27.594 11.77 99.674 233.628 27.594-11.773-99.673-233.625zM25 313v30h46v-30H25zm190 7h18v128h-18V320zM25 361v126h46V361H25zm64 80v46h62v-46H89z" fill="var(--callout-title-color)" fill-opacity="1"></path></g></svg>;
}
.h2 {
color: #33a652!important;
font-size: normal!important;
font-weight: 200;
}
The selector for second header in Reading Mode is not .h2 it’s h2. Remove the . and it will work.
Thanks, I did try that but preview mode still isnt working, the reading view is now working.
h2 {
color: #33a652!important;
font-size: normal!important;
font-weight: 200;
}
That’s because Source Mode/ Live Preview & Reading Mode have different selectors..cm-header.cm-header-2
But for general changes you could just use the variables offered by Obsidian. Those will apply to all views.
body {
--heading-formatting: var(--text-faint);
--h1-color: inherit;
--h2-color: inherit;
--h3-color: inherit;
--h4-color: inherit;
--h5-color: inherit;
--h6-color: inherit;
--h1-font: inherit;
--h2-font: inherit;
--h3-font: inherit;
--h4-font: inherit;
--h5-font: inherit;
--h6-font: inherit;
--h1-line-height: 1.2;
--h2-line-height: 1.2;
--h3-line-height: 1.3;
--h4-line-height: 1.4;
--h5-line-height: var(--line-height-normal);
--h6-line-height: var(--line-height-normal);
--h1-size: 2em;
--h2-size: 1.6em;
--h3-size: 1.37em;
--h4-size: 1.25em;
--h5-size: 1.12em;
--h6-size: 1.12em;
--h1-style: normal;
--h2-style: normal;
--h3-style: normal;
--h4-style: normal;
--h5-style: normal;
--h6-style: normal;
--h1-variant: normal;
--h2-variant: normal;
--h3-variant: normal;
--h4-variant: normal;
--h5-variant: normal;
--h6-variant: normal;
--h1-weight: 700;
--h2-weight: 600;
--h3-weight: 600;
--h4-weight: 600;
--h5-weight: 600;
--h6-weight: 600;
}
You can use those that you need and customize them to your liking.
If you want to use cssclasses to overwrite those for specific pages, you could just do that like this:
.myspecificpageheaders {
--h2-color: inherit;
...
...
...
}
Add that cssclass to your note (in my example myspecificheaders) and it will overwrite your general settings for that page.
You can use the Developer Console (Ctrl/Cmnd + Shift + I) to inspect the elements in Obsidian. Click the button in the top left corner to do that (Arrow pointing into square).
So should I have 2 items in my snippet one for Preview and one for the reader view.
h2 {
color: #33a652 !important;
font-size: normal !important;
font-weight: 200;
}
.ccgClass {
--h2-color: color: #33a652 !important;
}
No not like that, the one below would just apply if you use that cssclass.
As I said in my post above if you for example want to change only the second header in all views you could use something like this:
body {
--h2-color: #33a652;
--h2-size: 1.6em;
--h2-weight: 600;
}
I recommend for you to read the guides that are here on the forum and many other posts to understand the basics of css and how to use cssclasses.
No problem. There’s lots of great write-ups on the forum to help you on your way and you will always find someone here that will help you if you can not find a solution to something specific. Have a nice day!
So I have some more questions after reading and learning a little more I have this and it works fine:
.ccgClass .cm-header-2, .ccgClass h2 {
color: #fa0588 !important;
font-size: normal !important;
font-weight: 200;
}
I was trying to get a little fancy with the following and I was following standard css but I thought this would also work but it doesn’t
.ccgClass {
& .cm-header-2 {
color: #fa0588 !important;
font-size: normal !important;
font-weight: 200;
}
& h2 {
color: #fa0588 !important;
font-size: normal !important;
font-weight: 200;
}
}
Any thoughts?
Update your Obsidian Installer version and css nesting should work.
Thanks that seemed to work, at first it wasnt clear between the version I had and the “installed version”. I am assuming the installer is what contains the electron app.
system
June 3, 2023, 2:19am
13
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
