Meta Post - Common CSS Hacks

This line in the link will help you:

.cm-tag-litnotes, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-litnotes{
  color: #c7fd8b !important;
}

This does help. But–funny story–when I paste this in the color change works in Edit, but no longer works in Preview! (still an improvement, though)

Did you delete this part in your code?

    .cm-s-obsidian span.cm-hashtag,
    a.tag {
    color: var(–accent-2);
    }

    .tag { color: var(–accent-2);
    }
    .tag[href="#litnotes"] {
    color : #c7fd8b;

I think this part is for preview. And the line i sent is for edit mode.
otherwise, i have no ideas how to achieve this.

Didn’t delete that, but you know what? I had put your piece in between two of the other lines, but now moving it from the middle to the end of that block, the problem resolves. Thanks again for your help!

1 Like

Anyone know how I can change the color of text (specifically tags) inside the tag suggestion popover? Done some experimenting but haven’t found the right combobulation of code pieces.

See this discussion.

Another approach would be to use CSS flexbox as such:

/* File Explorer Columns */
.nav-folder-children{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.nav-folder-children > .nav-folder{
	flex: 0 0 100%;
	padding: 0 1px;
}
.nav-folder-children > .nav-file{
	flex: 0 1 200px;
	padding: 0 1px;
	display: flex;
}
/* Wrap long nav text and some paddings */
.nav-file-title,
.nav-folder-title {
	white-space: normal!important;
	width: auto!important;
}
/* Indent wrapped nav text */
.nav-file-title-content {
	margin-left: 0.5em!important;
	text-indent: -0.5em!important;
	word-break: break-word;
}

This work well for my theme.

3 Likes

. . . . aren’t highlighting and boldening, as well as italicising, underlining, and using red (or colours) for the font of certain parts of text all formatting features that have been around for yonks? And we know how to implement that kind of formatting, as @Meins points out for highlighting.

@Klaas ~ Apologies for being behind the curve on this, but I’m new to Markdown, and I’m wondering:

  • Where can I learn how to add colors to my fonts in Obisidian?
  • Specifically, will any/all standard Markdown commands work within Obsidian, or does O use a customized version of Markdown?

FWIW, I did look in the Help file that came with my O installation, and I couldn’t find any references to font colors, even in the section on formatting notes.

Thanks in advance.

@Metta: the Help file will tell you about the features of Obsidian, and about some but not about all the basics of markdown. For example colour is not an Obs-specific feature so will not be mentioned in the Help file.

To learn about markdown you can read up about on internet, there is plenty. BTW, markdown is not difficult to learn, and once you get the hang of it you’ll love it; at least that’s how it went for me. I ditched Word and other editors and only use MD.

Another issue is that MD is in fact so simple that not everything can be done using MD syntax, such as colouring text. Nevertheless, many (most/all ?) MD “flavours” accept some inline HTML syntax too, such as colouring text.

Adding colour to your text in Obs is done as follows:
<font style="color:red">bla text</font> , where “bla text” is your specific text.

It is also possible colour text and its background:
<font style="color:red;background-color:blue">bla text</font>

My advice is you should create a file as you are building your knowledge about MD and basic HTML, such as font colouring.

As for your 2nd question, by “commands” I presume you mean “syntax”, i.e. MD language/flvour. The flavour Obs uses is Common Markdown.

Formatting is mentioned in the Help file. In the Help file click on Start here at the bottom of the list in the left hand pane. On the page that opens, look under section Quick Start there is a bullet point How to use Markdown to Format your notes, with “Format your notes” being a clickable link.

I looked at and used a number of MD apps, and Obsidian is definitely the best overall, and still evolving, quickly. It is not complete yet, but it is extremely good already.

Embrace it, enjoy it, and feel free to ask any questions, the community is very helpful with many experts. You should also join the Discord channels.

1 Like

Hi, Thank you for this code. Its great. Just have a query:
In the editor mode, when I write long sentences, I couldn’t get continuous lines after the text wrap (please see the following image):
obsidianquestion
However, there is no such issue in preview mode. Is there a way get continuous lines in editor mode?
Thank you in advance.

1 Like

@ramana: I don’t what code you got, but could this be what you need?

/* Long bullet list: connect the same levels of bullets with vertical "lines" */
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid rgba(0, 122, 255, 0.25);
 position: absolute;
}

.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 
}

ul ul::before { left: -11px; top: 0; bottom: 0; /* change "left:" value for align of vert. line */
}

/* Edit mode unordered list dash rendered as dot for WYSIWYG */
/* I prefer "Turn -lists into bullets as you type as per Typora */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul {
    color: transparent;
    max-width: 10px;
}
  
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul:after {
    content: "•";
    position: absolute;
    top: 6px;
    left: 4px;
    color: var(--text-normal);
}

I have a file with many useful snippets: you can download it here.

2 Likes

@Klaas Thank you for the reply and the code. However even with this code, I see the same gaps in the bullet lines after text wraps (please see the following image).

I don’t what code you got, but could this be what you need?

The code posted by @lizardmenfromspace earlier.

I have a file with many useful snippets: you can download it here

I am new to CSS and this will be very helpful. Thank you very much.

I’m going to add an answer to “How to change font styles/sizes in Obsidian?” for referencing in other threads. The contents of this snippet are from the Minimal Theme by @kepano , and can be found here.

 /*----------------------------------------------------------------
  Font styles
  Preview mode and UI */

  --text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  
  /* Editor mode */

  --text-editor:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  
  /* Code */

  --font-monospace:Menlo,SFMono-Regular,Consolas,"Roboto Mono",monospace;

  /* Sizes, weights, padding */

  --font-normal:16px;
  --font-small:13px;
  --font-smaller:11px;
  --font-smallest:10px;
  --normal-weight:400;   /* Switch to 300 if you want thinner default text */
  --bold-weight:600;     /* Switch to 700 if you want thicker bold text */
  --line-width:40rem;    /* Maximum characters per line */
  --line-height:1.5;
  --max-width:87%;       /* Amount of padding around the text, use 90% for narrower padding */
  --nested-padding:3.5%; /* Amount of padding for quotes and transclusions */
  --icon-muted:0.4;
  --border-width:1px;
  --border-width-alt:1px;

  /*----------------------------------------------------------------
7 Likes

If I am not mistaken, your snippet breaks the ![[image.jpg|30]] resizing notation.
For instance:

![[image.jpg|30]]
![[image.jpg|100]]
![[image.jpg|200]]

are all rendered as identical figure sizes (when not hovering with the mouse). Without your snippet, the same figured is instead rendered three times with distinct sizes.

Regarding the visibility of the pane header icons, I use this. Keeps a tiny bit of visibility of the icons, but also keeps the pin/link items more visible even when not hovered (I find that useful). Also has a snazzy ripple of visibility in/out on hover because I was bored when I wrote it so why not? :slight_smile:

Untitled

/*
    Fade the pane header controls unless hovered (just to reduce/minimise distraction) 
    does this per individual control to easily leave link and pin slightly more visible even if not hovered, and 
    as an easy way to do a snazzy transition delay stagger in and out ;)    
*/

/* not hovered ie. on cursor exit from the header */
.view-header:not(:hover) a.view-action[aria-label*="Preview"],
.view-header:not(:hover) a.view-action[aria-label*="Edit"]  { 
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
  transition-delay: 0ms;
}

.view-header:not(:hover) a.view-action[aria-label*="link"] { 
  opacity: 0.55;
  transition: opacity .25s ease-in-out;
  transition-delay: 20ms;
}

.view-header:not(:hover) a.view-action[aria-label*="Pin"] { 
  opacity: 0.35;
  transition: opacity .25s ease-in-out;
  transition-delay: 40ms;
}

.view-header:not(:hover) a.view-action[aria-label*="Close"] { 
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
  transition-delay: 60ms;
}

.view-header:not(:hover) a.view-action[aria-label*="More"] { 
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
  transition-delay: 80ms;
}

/*  hovered ie. on cursor entry to the header */
.view-header:hover a.view-action[aria-label*="Preview"],
.view-header:hover a.view-action[aria-label*="Edit"]  { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 0ms;
}

.view-header:hover a.view-action[aria-label*="link"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 20ms;
}

.view-header:hover a.view-action[aria-label*="Pin"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 40ms;
}

.view-header:hover a.view-action[aria-label*="Close"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 60ms;
}

.view-header:hover a.view-action[aria-label*="More"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 80ms;
}
3 Likes

when i toggle this snippet, my gruvbox theme color revert back to default theme color…

@GreenChocho That’s very odd, there’s no part of it that changes colours or affects anything like that - it should be completely theme-proof. I’ve just installed gruvbox and tested it, and I can’t recreate your issue at all. The only thing I can suggest is switching to another theme and checking that the hover behavior works, and then switching back to gruvbox (turn it off, turn it back on…)

Or maybe try pasting the code above into your snippet file again. If you didn’t get all of it (missing brace or something) then I guess it could interfere with the theme loading (can’t really see how, but you never know).

1 Like

I recheck according to your comment and It was my mistake. I missed the last brace…
I am sorry for the trouble.
It work great now! :smiley:. Thank you!

No trouble, that’s what communities are for :grinning:

1 Like

Can someone suggest a way to change the colour and properties of italicised or bold texts? I intend to use it as an alternative to highlighting of sorts.