How can i make this?

[ObbiGuy]

Hello! I started using obsidian and i know i can use [!tip] and similar but i wanna make something more like this than an entire block. Does anyone know how can i make this?
(screenshot from the video of Christian Lempa on obsidian)

[ariehen]

It looks like a slightly customized callout with Settings > Editor > Readable line length -> OFF or a custom width set for the editor.

[ObbiGuy]

I tried the readable line lenght but doesn’t seem to be that. How can i change the custom width set?

[ariehen]

There are a few different options for adjusting the editor width depending on what theme you are using or with a CSS snippet.

Current way to update page width

What theme do you use? You can do this with CSS, but the easiest way to do it would be using theme settings (which vary wildly theme by theme). For example, the Minimal theme has custom block widths you can set on a note-by-note basis or for all notes using the Minimal Theme Settings plugin: [Screenshot 2023-04-02 at 7.25.09] The AnuPpuccin theme (using the Style Settings plugin) has a section to set the “Maximum Preview Width” for a note: [Screenshot 2023-04-02 at 7.07.48] Try out some d…

How can I make editor width wider?

Your theme may have options built-in for changing the editor line width. See → If not, you could use one of these CSS snippets → /*- editor line width - default 700px -*/ body { --file-line-width: 900px; } /*- editor line width - fills entire editor -*/ body { --file-line-width: 100%; }

[ObbiGuy]

I see, i’m trying to make use of the css snippet as i saw online, but doesn’t seem like it works? Like for changing the !info one i should use
.callout[data-callout="info"] {}
But it doesn’t seem to affect it?

[ariehen]

There’s a default (built-in) > [!info] Title callout already. So if you want to change that, you need to override it.

Have a look at Callouts - Obsidian Help and

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…

[ObbiGuy]

Yeah i wanted to override existing ones, and if later on i want to make new ones i’ll just edit this.
I managed to understand a bit more of it but i found out some css variables don’t really work?
like if i want to change the background of the whole thing is easy, just --callout-color and does the trick, but i want the title line to still have a color, but i can’t seem to find anything even in the css page on the obsidian wiki?
also tried something like .callout-title[data-callout=“info”] but doesn’t seem to work.

[Feralflora]

Try using the element picker in Obsidian’s console to see which class to target. ctrl / cmd + shift + i

[ObbiGuy]

Yeah also tried that but the console doesn’t open, even in the sandbox

[ush]

I don’t know much about Windows, but in macOS dev console is opened by Cmd+Opt+I (not shift).
Alternatively, you can just go View > Toggle Developer Tools

And here’s the complete (maybe) list of CSS classes related to callouts:

• .callout
  • .callout > .callout-title
    • .callout > .callout-title > .callout-icon: Icon
    • .callout > .callout-title > .callout-title-inner: title text, e.g. “Tips” or “Info”
  • .callout > .callout-content

You can use .callout to style all the callouts and .callout[data-callout="tip"] if you want to target only > [!tip]

Also use the variables --callout-color & --callout-icon

[ObbiGuy]

Uhmm i don’t seem to have view - toggle developer tools anywhere? and also for the main problem, i went with:

.callout[data-callout="info"] {    
    border-left-width: 5px ;
    border-left-style: solid;
    border-left-color: #153c67;
    --callout-color: transparent;
}

.callout[data-callout="info"] .callout-title {
    background-color: #153c67;
}

But everything works as expected except for the .callout-title stuff, it makes like a marker effect (like when you use the marker in microsoft word and such) instead of applying the effect on all the top part until the body.

[ush]

i don’t seem to have view - toggle developer tools anywhere

It’s here

[ush]

@ObbiGuy

.callout[data-callout="info"] {    
    border-left-width: 5px ;
    border-left-style: solid;
    border-left-color: #153c67;
    --callout-color: transparent;
}

.callout[data-callout="info"] .callout-title {
    background-color: #153c67;
}

I think --callout-color must be RGB value like 0, 0, 0 (correct me if I’m wrong)

[ush]

It’s far from the original, but maybe you can use this as a starting point

.callout[data-callout="info"] {
  padding: 0px;
  border-left: skyblue 5px solid;
  border-radius: 0px;
  font-family: Andale Mono; 
  --callout-color: 255, 255, 255;
  
  .callout-title {
    padding: 5px;
    background-color: #153c67;    
  }

  .callout-content {
    padding-left: 10px;
    background-color: black;
  }
}

[ObbiGuy]

Don’t even have that in windows, my program just reaches the new tab upper part

[ObbiGuy]

True, since as of now saying transparent actually makes it transparent, but with css values like#fffff and actual words work anyway

[ObbiGuy]

There it is, looking at this code i found out what was wrong with my original css, basically for some reason the area that makes the callout has a padding by default, and putting it to 0px makes so that all the other changes i had actually did what i intended them to.
In the end, for everyone that would like to make something similar with my little extra details:

.callout[data-callout="info"] {    
    border-left-width: 5px ;
    border-left-style: solid;
    border-left-color: #0b2541;
    --callout-color: 255, 255, 255;
    padding:0px;
}

.callout[data-callout="info"] .callout-title {
    padding: 5px;
    background-color: #153c67;
}

.callout[data-callout="info"] .callout-content {
    padding-left: 10px;
    background-color: #17171a;
  }

Thanks for everyone that helped me in the replies!