Can you apply css to specific sections rather than the entire page

I’m using the minimal theme, but I think this question should apply more broadly.

I know almost nothing about css, so maybe the answer is obvious, but can I apply the css helper classes that the theme applies to a specific section? or Dataview query?

Which helper class(es)?

Images, for sure. You can use alt/attribute text, e.g. ![[snow.jpg|float-right-wide]] to have certain images display differently depending on the alt text.

For tables you can, for example, have all Dataview tables in a note wide but Markdown tables stay Readable Line Length. I’m not sure if it’s possible to have one certain paragraph wide and the others not. Minimal is unique in its structure with how the helper classes and block widths work.

For arbitrary styling of things around the page custom callouts are a playground. They are fairly easy to make and use. Two popular snippets for layout around the page:


@CawlinTeffid asked a while ago on Discord:

Could someone share a snippet for an “invisible” callout to use as a div for arbitrary styling?

And SailKite was kind enough to share a “starter” div callout:

/* basic div-like callout as a platform for other styling */
.callout[data-callout="div"] {
    margin: unset;
    border: unset;
    border-radius: unset;
    padding: unset;
    background: unset;
    mix-blend-mode: normal;

    & > .callout-title { display: none; }
}
1 Like

Whilst playing around with some table formatting in another post I found another nifty trick to target a smaller area which also can be used in this context. Mark the section by some random tag, i.e. #flag, and use CSS as shown below to hide the tag, and to format that section to your hearts content.

a[href="#flag"] {
  display: none;
}

div:has(a[href="#flag"]) {
  ... whatever styling you like ...
}

This way the extra markup is minimal, and the visual impact is hidden in the rendered views, but it still allows you to do whatever you want with the marked section. In the linked thread above, I also show examples of how you can use this to first anchor the CSS to the table, and then continue to style smaller parts of the table afterwards. This trick also works for both live preview and reading mode.

4 Likes

Whoa, that deserves a Share & Showcase post!

Well I’m trying to do a couple of different things.

  1. the minimal theme allows you to make cards out of dataview table queiries, which I like in a single colum for most things, but it might be nice to have the option to do different layouts besed on the query.

  2. I’m also making various charts using dataveiwjs and chartsjs, but each chart takes up the entire width of the screen, and I would like to have a couple of them next to each other.

I can’t seem to get a dataviewjs query in a call out to work … so I’m not sure if this is going to be possible.

Wow, thank you! This is going to save me so much time.

I’ve been thinking about it, but I did some tests yesterday, and something had changed it v seems, so it might not be as good as I thought it was… Need to investigate some more in this topic…

I’m not a big dataviewjs user, but I fire this up every few months to check for dupe notes, and it works fine in a callout:


You could try selecting your entire dataviewjs code block and running the Insert callout command (or even better, assign a hotkey). That should keep the formatting intact.

1 Like

In the post before when I suggested using #flag to mark an arbitrarily section I had done some testing using tables. It turns out that live preview is slightly inconsistent, because inside of a table the #flag is rendered the same as in general in reading mode and that is that it’s rendered as <a href=“#flag” … >. Outside of a table in plain text, it doesn’t keep this link format, but instead you need to target a cm-tag-flag class to get a similar selector.

I’m not sure if there are other cases to cover, but the example I gave need to be extended to at least:

.cm-tag-flag, 
a[href="#flag"] {
  display: none;
}

div:has(.cm-tag-flag), 
div:has(a[href="#flag"]) {
  ... whatever styling you like ...
}

I’ve been thinking about doing a Share & showcase post about this, but haven’t found the time and energy to do so, just yet. :smiley:

1 Like

oh, that’s a good idea!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.