Meta Post - Common CSS Hacks

@Klaas To be honest, I like the idea of WYSIWYM in editing mode, but I failed to make it work as desired, e.g. easier text selection, as I lack the experience working with CSS. Do you mind explaining more regarding how you are trying to resolve the issue? It would be really great if some code snippets can be used to explain this. :smile:

@Wen: I am not a CSS expert and I certainly don’t have CSS code to explain how I do it. What I have noticed is that if I click on a blockquote the size of the cursor is bigger, and you cannot move it to the end of the line. However, if you then e.g. click the backspace key, the cursor does start from the end of the line.

If you want to edit in the middle of a sentence in a blockquote, or in a sentence that has e.g. a pair of * around a part of the sentence, the trick is to temporarily remove those (or the > in the case of a blockquote), do your edit, then put the formatting back.

It sounds like a lot work, and at first it is, but when you get the hang of it, it is not so bad.

1 Like

@Klaas That’s good to know. Thanks for the clarification.

@Wen: I am sorry I cannot be more helpful, so if you are still lost or put off by these issues, I apologise.

@Klaas That’s totally fine. :smile: Sometimes we need tricks like the one you mentioned until we have a perfect solution. Thanks again for sharing your experience here.

1 Like

@Wen @Klaas I don’t know anything about CSS, so I don’t know what makes this work… I have a combination of @uzerper and yours, and it works in edit mode:

.tag:not(.token) {
  background-color: var(--nord3);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}

.tag:not(.token):hover {
  color: var(--nord8);
  background-color: var(--nord3);
}

.tag[href^="#important"] {
  background-color: var(--nord11);
}

/* div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-important:before {
  content: '#'; 
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f12a";
}*/

.cm-tag-important, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-important {
  background-color: var(--nord11);
  /* border: none; */
  color: white !important;
  /* text-align: center; */
  /* text-decoration: none !important; */
  /* display: inline-block; */
  /* margin: 0px 0px; */
  /* cursor: pointer; */
}

.cm-tag-important:hover {
  color: white;
  background-color: var(--text-accent-hover);
}

I have NO idea what is needed and what isn’t, but it seems to work (this is edit mode):

image

5 Likes

thank you for this! I did remove the WYSIWYG css bc of the cursor alignment issue

I’ll try your backspace trick – I think that was the only thing turning me off :fire:

in a way, I’m glad this bug exists bc I know a lot more about css now from fiddling in attempts to fix than I did before.

@hieu: and maybe with @argentum’s code it works for the tags.

1 Like

@argentum: many thanks.

1 Like

@argentum That’s really nice. It took me some time trying to figure out how to resolve this issue. Thanks for sharing this.

1 Like

Naked embed is now broken in 0.9.3 …

image

Edit: Nevermind, embed in 0.9.4 is better.

@jokysatria: here is the forum page.

1 Like

Does anyone know how do I increase the font size of only the left sidebar (filetree, search results etc.) ?

I know we can zoom in to increase the font sizes globally, but I am looking for hack to only increase the font size of the left sidebar

Thanks

For the filetree:

.nav-file-title, .nav-folder-title { font-size: 14px; line-height: 15px; }

For search results

.search-result-file-title { font-size: xyz; }

.search-result-file-matches { font-size: xyz; }

should work.

6 Likes

Thanks a lot. Exactly what I wanted :slight_smile:

@Wen @Klaas
not sure if it’s still relevant, but the issue with the cursor alignment had to do with this bit:

  /* highlight (==) not visible anymore if not active line */
  div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight {
   font-size: 0;
  }

commenting it out fixed the issue for me… my sacred cursor / text selection now align properly :sob:

1 Like

@hieu: thank you.

@hieu Thanks for sharing. I will try to combine it with my CSS settings later.

pls help

How about this:

/* checkbox alignment */
.markdown-preview-view .task-list-item-checkbox {	
	width: 15px;
	height: 15px;
	top: 0px	
}
1 Like