CSS that doesn't work in Obsidian

[kaladorn]

I’m trying to work on better table styling than I’ve been able to get so far.

Here’s my CSS snippet file:

#tbtable {
  background-color: #770000;
  border: 2px solid cyan;
  margin: 20px;
  padding: 20px;
  font-family: impact;
  font-size: 24px;
}

.altern {
  background-color: #337777;
  border: 2px solid teal;
  margin: 20px;
  padding: 20px;
  font-family: tahoma;
}

.centerness {
  text-align:center;
}

.tbhighlight {
  background-color: #448844;
  color: tomato;
}

Here’s my table:

<table>
  <colgroup>
    <col>
    <col>
    <col class="tbhighlight">
  </colgroup>
<thead>
<tr  class="centerness">
	<th class="altern">this is my label 1</th>
	<th id="tbtable">this is my other label 2</th> 
	<th>This is column 3</th>
</tr>
</thead>
<tbody>
<tr  class="centerness">
	<td class="altern">data 1</td>
        /* the one below does not get styled like the first cell of this row - why? */
	<td class="altern">more and more and more data 2</td> 
	<td> yet even more data 3</td>
</tr>
</tbody>
</table>

Here’s what I get:

What am I missing? My understanding was CSS . entries could be used multiple times using class= but CSS # entries are destined to go into id= and can only be used once.

Why won’t the styling work on the second cell in the second row?

Before anyone cringes at the actual CSS styling, I’m experimenting with tables to see what I can and cannot do before I actually try to make pretty CSS tables.

The most frequently used thing for me for tables that makes existing Obsidian tables or plug-in tables other than just the CSS prettiness is the ability to use a lot of merged cells (like colspan, rowspan) to get the table look I need. But this last comment is an aside.

[efemkay]

u need to increase the specificity of your code. the app’s default css has higher priority.

u might want to get comfortable with dev console if u plan to do a lot css tinkering. follow link below.

Getting comfortable with Obsidian CSS

While using Obsidian, if you press CTRL-SHIFT-I (option-cmd-i for mac) then it will bring up the developer window. In the developer window, at the top left is an icon with a pointer in a box. This allows you to select elements on the screen and see how to refer to them and what styles. I will occasionally update this post with more pictures of how to do stuff. [Developer Tool] You can hover over items to see what they do and then click on an item to select it. Then go down to the styles secti…

[kaladorn]

Thanks, I actually looked for an icon to let me see the developer view (as I’d do in Firefox). I did not know the hot keys.

Why is a directly applied CSS class less than that of the default style sheet? One would think the most closely located CSS directives would over-ride.

I don’t want to bust the existing standard CSS, but if I’m creating my own table with my own specific look, I don’t need to be falling over the default CSS.

Not sure how I can get more specific than putting a styling on it right in the table (unless you mean using a LOT of ids instead of classes or something like that). You say be more specific, but I don’t see what could be more specific than that.

[efemkay]

it’s not what i think u think (hope that’s not confusing). css specificity is a “scoring” system that determines which get applied. see link below, scroll down mid-way.

CSS Specificity

[kaladorn]

Probably not. I have looked at a number of parts of CSS that have grown over the years and that I don’t fully 100% grasp (selectors I know to an extent, but obviously not rules of precedence or the algorithm for choosing which is priority driven).

[anon63144152]

more and more and more data 2 should be tomato coloured? Like this, without changing the CSS?

<table>
  <colgroup>
    <col>
    <col>
    <col class="tbhighlight">
  </colgroup>
<thead>
<tr  class="centerness">
	<th class="altern">this is my label 1</th>
	<th id="tbtable">this is my other label 2</th> 
	<th>This is column 3</th>
</tr>
</thead>
<tbody>
<tr  class="centerness">
	<td class="altern">data 1</td>
	<td id="tbtable">more and more and more data 2</td> 
	<td> yet even more data 3</td>
</tr>
</tbody>
</table>

[efemkay]

to help u get started. here’s a modification of your original snippet to make it get the right specificity

/* adding app's top level classes i.e. .markdown-xxx-xxx to increase the specificity */
    :is(.markdown-source-view, .markdown-rendered) #tbtable {
      background-color: #770000;
      border: 2px solid cyan;
      margin: 20px;
      padding: 20px;
      font-family: impact;
      font-size: 24px;
    }

/* some require more css classes to be "preprended" to further increase the specificity to override app's default */
    :is(.markdown-source-view, .markdown-rendered) :is(thead th, tbody tr td).altern {
      background-color: #337777;
      border: 2px solid teal;
      margin: 20px;
      padding: 20px;
      font-family: tahoma;
    }

    :is(.markdown-source-view, .markdown-rendered) .centerness {
      text-align:center;
    }

    :is(.markdown-source-view, .markdown-rendered) .tbhighlight {
      background-color: #448844;
      color: tomato;
    }

[kaladorn]

Thanks for the pointer to the whole priority algorithm.

There may be 2 lines in that whole thing I didn’t grasp, but I got the large part and it has helped me.

I still don’t know that I know how to build my own table in a graceful way (given that styling inline at the tag level in the structure is a bit ugly) but it will certainly get things done and I can try to use ids directly to pump up the priority as well if not quite as authoritatively.

I was basically looking for columns and rows that could be zebra striped as a start then some cells that might need called out if they end up holding something from a data source.

I’m very grateful for the significant knowledge you obviously have with CSS. I’m a dev, but most of my career has been under the hood, not in the UI/UX (except for a bit of Swing for some control and monitoring and some VB 6 in the windows world way back). I’m trying to come up on JS (both sides), HTML5, and CSS 3+. Each of those has a learning curve.

Thank you for your time and kindness.

[efemkay]

since u mentioned stripe for table. this forum post with the snippet will definitely help u

Custom CSS for tables - 5 New styles, ready to use in your notes

Hi there!! Sharing one more time my personal table styles but this time I got them all into one single css file with 5 table visuals and a few hacks that enable further customization: [scTables1] [scTables2] [scTables3] [scTables4] [scTables5] The White red table has an extra mode that you can use to get it with rounded corners, all you gotta do is stack both classes: cssclass: whiteRed, whiteRed-rounded, wideTable [ct1] The class wideTable draws the table 100%, so it takes your …

[kaladorn]

Yep, that’d work, though I’ve ventured off (thanks to some other responses) to finally understanding a bit more about selectors and the scoring algorithm they use to determine what styling to use if there are multiples specified at differing levels. That’s helped a lot.

Appreciate your input as well!

[kaladorn]

I’ve been looking over the tables and their CSS and that’s helped me build a decent looking table.

One thing I’m not so sanguine about is the need to have

---
cssclass: (whatever your class is)
---

at the start of the file (below the title of the note) and what that shows is

Metadata
Cssclass tb_table

at the top of the page under the title for my note that contains the current table that I’m building.

Is there no way to hide that frontmatter stuff so those looking at the content of the note don’t have to see that? Even if you could stick it at the bottom of the note it’d be an improvement.

[holroy]

@kaladorn

Is there no way to hide that frontmatter stuff so those looking at the content of the note don’t have to see that?

Besides turning off showing of the entire frontmatter, the post below shows some alternatives to either show tags and/or aliases, and/or also include the rest. Maybe you could adjust this to your liking?

Reduced frontmatter in Reading view

This should be doable with some CSS. If you turn back on the showing of the frontmatter, it shows all frontmatter, but you can hide stuff you don’t want. Here is an image showing source text, reading view and corresponding DOM elements related to the frontmatter display. [image] What we can see here is that tags and aliases have the CSS classes of frontmatter-section and respectively mod-aliases and mod-tags, and that the other lines just have the frontmatter-section. So if we generally hid…

[kaladorn]

I’ll check that out. I know virtually nothing about the front matter (and thus its options).

[kaladorn]

Thanks, that did it!

I am very appreciative of the the people willing to answer questions and that have answers (or know where the answers live).

I know frontmatter is a YAML thing and there are Obsidian-aware tags and aliases, but I haven’t started with either of those features (I love tagging generally, but I have to learn how it is done and what it really does in Obsidian).

Seems like Obsidian has many ways to be used and that makes it at times hard to see (without an example of your own) what a feature is meant to do and how it is meant to use it effectively.

My purpose is to have a plain-text, fairly contained, linked text collection. Lots of other people seem to do stuff with integrations with other external tools/platforms, do scheduling, daily journaling, priority management, etc. I’m sure there are other uses.

The bit of CSS that I got from the linked article made the unsightly frontmatter go away. VICTORY!

Much appreciated.