Meta Post - Common CSS Hacks

@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

Thankyou … let me go take a look.

@Lithou so - had been modifying parts of the theme - and so to make sure i hadn’t broken anything - killed that theme and freshly installed cybertron from the directory.

I have enabled all my snippets - and nothing.

this is the snippet code I have

.tag[href="#notes/rough"] {
color : red;
}

  • and there are LOTS of #notes/rough tags the system

but sadly nothing.

any ideas i would welcome. (I did try a non nested tag - but no dice.)

my thanks in anticipation

/John

testing and noting that #important is coming through as different to how my own tag appears … is that an issue?

yeah its outdated this is my new css code for outliners

.graph-controls .tree-item,

  .outline>.tree-item{

    border:0;

  }

  .tree-item{

    margin-left: .3em;

    border-left: 1px solid var(--text-faint);

    transition: all 0.3s ease-in-out;

    padding: 0;

  }

  .graph-controls .tree-item-inner::before{

    display: none;

  }

  .tree-item-inner::before{

    content: " • ";

    margin-right: 4px;

  }

have a great day

1 Like

Thanks! I like the design and it looks so good.

1 Like

I have some problems coloring hastags on hover. In preview mode, it already works, but in editor mode, the # has a different class (.cm-s-obsidian span.cm-hashtag-begin) than the tag itself. The following works for hovering over the the tag name, but the # will not be colored on hover in editor mode:

.tag:hover,
.cm-s-obsidian span.cm-hashtag:hover
{
  color: var(--text-hashtag-hover);
}

How can color the whole tag including # when hovering over either the tag name or #?

Anyone can help? This cannot work on the latest version anymore.