Meta Post - Common CSS Hacks

Dev console: OK, I understand, though would not know how to use that, and I guess most “average” users would not either.

So, to all intents and purposes that is not practical. So, like you said, your snippet should really be used in combination with the plug-in to be easier to use.

Hello!

Anybody knows how to disable horizontal scroll in File Explorer pane, or (optional) display shortened file names? Both of these are implemented in Minimal theme, so it seems it’s possible.
Any glue?
Thanks!

Was able to disable horizontal scroll and truncate long filenames by using this code from Minimal theme:

.nav-file-title {
	  width:calc(100% - 30px);
	  margin:0 8px 0 -4px;
	  padding:2px 2px;
	  border-width:0;
	  line-height:1.6;
	  border-color:var(--background-secondary);
	  border-radius:6px;
	  cursor:var(--cursor);
	}
	
.nav-file-title-content {
	  width:100%;
	  white-space:nowrap;
	  overflow:hidden;
	  text-overflow:ellipsis;
	  padding:0 5px;
	  vertical-align:middle;
	  cursor:var(--cursor);
	}
1 Like

Hello there
css is new to me, so please check out this code is good for daily usage.

/* Fat Checkboxes in and outside tables in preview mode */

input[type=checkbox], .markdown-preview-view .task-list-item-checkbox{
  -webkit-appearance: checkbox;
  width: 1.8em;
  height: 1.8em;
  margin-right: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  vertical-align: baseline;

}

Bildschirmfoto 2021-08-31 um 20.40.36

Two things:

  1. the sanity of this code
  2. the normal checkbox is violet and not blue #1976D2 as the checkbox in the tables

what do you think?

Hello. It not work with me right now, can you help me?
CleanShot 2021-09-13 at 16.14.30@2x

@chumido I do not know the CSS code you are using, but this works for me:

/* Tag pills in edit mode */
.CodeMirror-line span.cm-hashtag-begin {
  background-color: var(--yellow59);
  color: white !important;
  border-top-left-radius: 4px; /* PB changed from 15 to go from rounded to rectangle */
  border-bottom-left-radius: 4px; /* PB changed from 15 to go from rounded to rectangle */
  padding-left:6px;
  padding-top: 1px;
  border-right:none;
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
}

.CodeMirror-line span.cm-hashtag-end {
  background-color: var(--yellow59);
  color: white !important;
  border-top-right-radius: 4px; /* PB changed from 15 to go from rounded to rectangle */
  border-bottom-right-radius: 4px; /* PB changed from 15 to go from rounded to rectangle */
  padding-right:6px;
  padding-bottom: 1px;
  border-left:none;
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
}

You might have to change the font size and paddings. Changing the border radius will affect the shape of the tage from a pill, as per your screenshot, to more rectangular, or to circular/disk-shaped.

Thank you for replying me. I’m using this code, where did i wrong?

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before {
  content: '#';
}
.tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end {
background-color: var(--text-accent);
border: none;
color: white !important;
font-size: 11px;
padding: 1px 8px;
text-align: center;
text-decoration: none !important;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}
.tag:hover {
color: white;
background-color: var(--text-accent-hover);
}
.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}
.tag[href^="#important"] {
  background-color: red;
}
.tag[href^="#complete"] {
  background-color: green;
}
.tag[href^="#inprogress"] {
  background-color: orange;
}

@chumido : I am not a CSS expert so cannot say where you went wrong. Did you try my code?

You can try removing the first css code or just hide # in editing mode

Anyone can help? This CSS cannot apply to the outline pane anymore.

Very good and practical modify! Visually helps me a lot! Like it very much thanks :slight_smile:

other than using "› ", I try to change it to "⊢ " so visually the files look like “branches” that under the folder.

CleanShot 2021-09-21 at 14.42.22

Hi, do you know any snippet which will allow me to do this Custom css to change link color based on link type

Cheers

No, sorry I don’t. In the Discord css-themes channel there is some amazing CSS expertise, you should ask there, I am sure you’ll have a solution in no time. I have seen this issue addressed before.

Okay. Thanks for replying.

Hi @Moonbase59 thanks for creating this CSS snippet. It’s been really useful. I noticed that in Preview mode, it changes subsequent lines to the same line and does not recognize additional line breaks. Is this a bug or a feature?

@curiosity if you look at the code you’ll see that <br> gets eliminated. If you uncomment that bit you should have your separate lines back.

Perfect, it recognizes single line breaks now. Although multiple line breaks (>2) aren’t recognized but it’s not a huge problem. Thanks @Klaas !

One of @nickmilo’s youtubes pointed me to tis thread - and for the life of me the snippet

.tag[href="#important"] {
color : red;
}

does not work for me … is there anything extra I need to do? (sadly not an expert coder).

BTW - while I am here - thankyou for the Cybertron theme Nick - adopted it when I first found your videos - tho needless to say couldn’t resist adding a few snippets!

@fractals
If you are using Cybertron theme, it had an issue where it was preventing snippets from loading correctly. I sent Nick a pull request and he got it implemented, but you might need to reload the theme. (Just go to the theme browser and reselect the cybertron theme ) Let me know if you are still having issues with it after that and I can help you troubleshoot things.

2 Likes