Heading styling in different view modes

Custom CSS & Theme Design
1

I have the following css. How would I adjust it to make it use :not. I tried a few things, but it wither removed the css everywhere or didn’t change anything. Thanks for your help.

.HyperMD-header-3::after, h3 {
    display: block;
    content: "";
    padding-bottom: 2px;  
    border-bottom: 1px solid lightsalmon;
}

h3,
.HyperMD-header-3,
.markdown-rendered h3 {
  bottom: 15px;
  color: var(--list-marker-color);
  font-size: var(--h2-font-size);
  font-style: italic;
  border-bottom: 1px linear-gradient lightsalmon;
  padding-bottom: 5px !important;
  padding-top: 30px !important;
  text-align: left;
}

h3,
.HyperMD-header-3,
.markdown-rendered h3 {
  bottom: 15px;
  color: var(--list-marker-color);
  font-size: var(--h2-font-size);
  font-style: italic;
  border-bottom: 1px linear-gradient lightsalmon;
  padding-bottom: 5px !important;
  padding-top: 30px !important;
  text-align: left;
}
2

if I wanted the whole file to only apply to the css that has the following would I have to go through each part of the css file and it the not for everything? The file is pretty big. Or is there a way to just make it so the whole file isn’t applied using one line of code?
cssclasses: book

3

Okay, so the CSS in the first post is for styling h3 headings in the editor and reading view. I see that.

Just to clarify the goal, you want that h3 styling to apply to only notes with the book cssclass, is that right?

4

To clarify, I want the css to apply in both the preview and live preview view, but keep the formatting for source view as it would appear without any css. I am using the following css.

h6+,
.HyperMD-header-6+
.markdown-rendered h6 {
line-height: 24px;
position: relative !important;
text-align: right !important;
left: -101% !important;
top: 25px !important;
margin-top: -20px !important;
margin-right: 3px !important;
font-family: var(–font-family-preview) !important;
font-weight: 500 !important !important;
font-size: 12px !important;
color: var(–text-muted) !important;
}

h6,
.HyperMD-header-6,
.markdown-rendered h6 {
line-height: 24px;
position: relative !important;
text-align: right !important;
left: -101% !important;
top: 25px !important;
margin-top: -20px !important;
margin-right: 3px !important;
font-family: var(–font-family-preview) !important;
font-weight: 500 !important !important;
font-size: 12px !important;
color: var(–text-muted) !important;
}

This code gives me these results.

Preview

preview
preview948×668 90.2 KB

Live Preview

live preview
live preview831×670 56.9 KB

Source

source mode
source mode918×692 73.8 KB

If I use this code it only affects the preview(the first picture) and the source code looks like what I want as in the picture below.

.markdown-preview-view h6

{

position: relative !important;

text-align: right !important;

left: -101% !important;

top: 29px !important;

margin-top: -20px !important;

margin-right: 3px !important;

font-family: var(–font-family-preview) !important;

font-weight: 500 !important !important;

font-size: 12px !important;

color: var(–text-muted) !important;

image
image903×630 69.4 KB

5

I moved these posts into their own topic as it doesn’t seem related to cssclasses for now.

1 Like
7

I think this will work for what you are going for. I didn’t change any of the rules, just the first selector.

.markdown-source-view.is-live-preview .HyperMD-header-6,
.markdown-rendered h6 {
  line-height: 24px;
  position: relative !important;
  text-align: right !important;
  left: -101% !important;
  top: 25px !important;
  margin-top: -20px !important;
  margin-right: 3px !important;
  font-family: var(--font-family-preview) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

The vertical alignment of the heading line looks a bit different in live preview and reading view, so you may want to separate them out to have finer control. e.g.

.markdown-source-view.is-live-preview .HyperMD-header-6 {
  /* live preview declarations here */
}

.markdown-rendered h6 {
  /* reading view declarations here */
}

Also, this margin-top: -20px !important may cause issues in live preview with text entry, moving the cursor around, etc., so if you do separate them out, you may want to leave that out of the live preview section if it’s causing issues.

In the future if you post any CSS, it’s reccommened to post it in a fenced code block. It preserves the formatting, it’s easier to read and copy, etc. Like this:

```css
body {
  --inline-title-color: salmon;
}
```
1 Like
8

Thank you! I really appreciate it. I will use the code block in the future for sure.