# CSS Files
---
### CSS Tagged Changes
[Source](https://forum.obsidian.md/t/embed-section-of-note-without-embedding-the-header/43739)
##### Purpose
Hide embedded section's header
##### How to use
Apply to a file by adding tag to `cssclasses` property
For example:
```
cssclasses: hide-embedded-header1
```
##### CSS Code
```css
.hide-embedded-header1 .markdown-embed h1{
display: none;
}
.hide-embedded-header2 .markdown-embed h2{
display: none;
}
.hide-embedded-header3 .markdown-embed h3{
display: none;
}
.hide-embedded-header4 .markdown-embed h4{
display: none;
}
.hide-embedded-header5 .markdown-embed h5{
display: none;
}
.hide-embedded-header6 .markdown-embed h6{
display: none;
}
```
also added
```css
.hide-embedded-title .markdown-embed-title{
display: none;
}
```
---
### Spoiler Callout
[Source](https://www.reddit.com/r/ObsidianMD/comments/onydkq/easiest_way_to_hide_text_spoilersanswers_to/)
##### Purpose
blur text until hovered over
##### How to use
Example:
```md
- [#] Secret text goes here!
```
Shows as:
- [#] Secret text goes here!
^f94815
##### CSS Code
```css
[data-task="#"] {
filter: blur(8px);
-webkit-filter: blur(8px);
}
[data-task="#"]:hover {
filter: none;
-webkit-filter: none;
}
```
---
### Modular CSS Layout
[Source](https://github.com/efemkay/obsidian-modular-css-layout?tab=readme-ov-file)
[more info](https://efemkay.github.io/obsidian-modular-css-layout/multi-column/03-float-callout/)
note: can use `>[!blank-container]` callout to show without going into `reading view`
##### Purpose
Allows for multi-columns and grids
Can also allow a group of text to "float" on left/right side while other text wraps around it
| Using... | Multi-columns | List Column/Grid | Float |
| ----------- | ------------- | ---------------- | -------- |
| Callout | ✔ | | ✔ |
| tag | | ✔ | |
| frontmatter | | ✔ | |
##### How to Use
Multi-column example:
```md
> [!multi-column]
>
>> [!note]+ Use Case
>> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>> ##### User Case Background
>> Vitae nunc sed velit dignissim sodales. In cursus turpis massa tincidunt dui ut ornare lectus.
>
>> [!warning]+ Resources
>> #### Requirement
>> - Lorem ipsum dolor sit amet
>> - Vitae nunc sed velit dignissim sodales.
>> - In cursus turpis massa tincidunt dui ut ornare lectus.
>
>> [!todo]+
>> - [x] Define Use Case
>> - [ ] Craft User Story
>> - [ ] Develop draft sketches
```
Looks like:
> [!multi-column]
>
>> [!note]+ Use Case
>> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>> ##### User Case Background
>> Vitae nunc sed velit dignissim sodales. In cursus turpis massa tincidunt dui ut ornare lectus.
>
>> [!warning]+ Resources
>> #### Requirement
>> - Lorem ipsum dolor sit amet
>> - Vitae nunc sed velit dignissim sodales.
>> - In cursus turpis massa tincidunt dui ut ornare lectus.
>
>> [!todo]+
>> - [x] Define Use Case
>> - [ ] Craft User Story
>> - [ ] Develop draft sketches
Another example:
```md
>[!multi-column]
>
>>[!blank]
>> **Overview**
>>[[Health Index]]
>
>>[!blank]
>>**Personal**
>>![[Query HomePage Health]]
>>[[Doctors]]
>>[[Meal Planning]]
>
>>[!blank]
>>.
>>[[Appearance]]
>>[[Hair Care]]
>>[[Hormonal Balance]]
>>[[Skin Care]]
>
>>[!blank]
>>**Ideas**
>>[[Adrenal Cocktail]]
```
>[!multi-column]
>
>>[!blank]
>> **Overview**
>>[[Health Index]]
>
>>[!blank]
>>**Personal**
>>![[Query HomePage Health]]
>>[[Doctors]]
>>[[Meal Planning]]
>
>>[!blank]
>>.
>>[[Appearance]]
>>[[Hair Care]]
>>[[Hormonal Balance]]
>>[[Skin Care]]
>
>>[!blank]
>>**Ideas**
>>[[Adrenal Cocktail]]
List Column/Grid:
for `#mcl/list-card`, must be in a heading
| Type | Using Tag | Using Frontmatter |
| ---- | ------------------------------------------- | ------------------------------------------------------------------------------------------- |
| LCol | `#mcl/list-column` | `two-column-list` <br>`three-column-list` <br>`four-column-list` <br>`multi-column-list` |
| LGrd | `#mcl/list-grid` <br>`#mcl/list-grid-wide` | `two-column-grid-list` <br>`three-column-grid-list` |
| LCrd | `#mcl/list-card` <br>`#mcl/list-card-wide` | - |
---
## See Also
[[CSS]]