"How to achieve" CSS code snippets

@desk7: sorry, I did not bother to compare the 2.

If you have other snippets enabled, there may well be one thatā€™s interfering.

no other snippet enabled. Iā€™ll compare the 2 snippets.

@desk7: this is Lithouā€™s last snippet, see if thereā€™s something there.
pub-Image_Flags.css (8.0 KB)

Please help if it possible.

How can I achive left-align the second task block (with bullets below), just like the first task block (tasks only), without shifting the bullet points as they are already aligned?

At the same time, without violating the markup of detached elements (bullet, task, numbered) or their subelements.


@ILUMEZ: I am not a CSS expert so I cannot help you. You could try the #css-themes channel on Discord, SIRvb has recently done a fair amount with task lists.

Oh, ok. Thank you very much)

Those of us who use transclusions (I use them a lot), sometimes want to transclude all the text under a heading, but not necessarily the heading itself. I would resort to doing block references of each paragraph below the heading, but if there are a lot of paragraphs that could be cumbersome.

For some reason unknown even to myself I did not think it was possible, nor did I think about asking the question, if it would be possible to do a transclusion without the header. It turns out it IS possible. @SIRvb kindly provided the code after @Chromatic asked about it.

I have added it to the Github repository, file Embeds, scroll down to Tranclusion pointing to header but leave out header, only show text below . The link to the repository is given in the OP at the top of this page.
Enjoy.

3 Likes

This is great, thanks very much.

A question - when I add a tag, suddenly the image enlarges on mouse-over. Is there a way to stop this?

@Spidrax: as I pointed out in the 1st comment at the top of this page, I am not a CSS expert. And even though that comment was written 5 months ago, it still applies. Yes, I do feel a bit more comfortable with CSS, but that only goes as far as knowing how to tweak/amend bits of the code of a snippet I get from someone.

As for your issue, it seems strange. The image enlarge is probably due to zoom code - check if it exists in the theme you are using or if you have a snippet enabled for it - whereas inserting a tag should have no secondary effect.

If you are unable to figure it out I suggest you ask in Obsidianā€™s #css-themes channel on Discord. There are many friendly, helpful people active who have a lot of CSS expertise, I am sure youā€™ll get a good answer there.

@Klaas, thanks for the reply, but sorry to drag you over here. I mean to reply to @Lithou regarding the Image Flags snippet :slight_smile:

@Spidrax: no problem. I thought of asking you who your question was addressed to, but thought it was silly to do so.

The mouse over enlarge is something you can enable/disable on a per flag basis. By default it is enabled for the Side, portrait, landscape, tape, and pin flags.

If you scroll down toward the bottom of the snippet, these are the lines that create that feature. Comment out or delete the lines you donā€™t want active. If you donā€™t want it at all, you can delete the whole section listed below.

/* Zoom on Hover */
img[alt*="+side"]:not(:active):hover,
span[alt*="+portrait"]:not(:active):hover,
span[alt*="+landscape"]:not(:active):hover{
transform: scale(1.5);
}

/* zoom and reverse rotate on hover */
img[alt*="+tape"]:not(:active):hover,
img[alt*="+pin"]:not(:active):hover{
    transform: scale(1.5) rotate(-2deg);
}
2 Likes

Sometimes you might find it useful to have bits of info in a sidenote rather than in a footnote. Here is an interesting, instructive article about it.

In the Github repository I have added a new file with code to achieve this. In fact, there is code to have a sidenote aligned with the main text, and, if you prefer to have it placed in the right margin, you simply need to add 1 rule, as shown in the file too.

The link to the repository is given in the OP at the top of this page. Scroll down to Sidenotes.md.
Enjoy.

3 Likes

There are times when one wants a long title in the title bar of a note. Wouldnā€™t it be nice if one could force a title wrap. In the Github repository I have added a new file with code to achieve this.

The link to the repository is given in the OP at the top of this page. Scroll down to Note title in pane.md, and scroll down to the bottom of the page to Wrap long title in the title bar of a note.
Enjoy.

@DeaconLight kindly provided code to give your tables a Latex look. I have added the code to the Github repository.

The link to the repository is given in the OP at the top of this page. Scroll down to Table.md, and scroll down to the bottom of the page to Latex table .
Enjoy.

1 Like

Is there a way to make tables wider without making the entire page wide. Or alternatively a way to make a single page full width without using the setting to make all pages full width ?

@dcoales: sorry, I donā€™t know how to do that.

No worries, Iā€™ve come to the conclusion that there isnā€™t any way to do it.

Can anyone show me how to make bold text a different color?