> [!kanban]+ [[Obsidian TTRPG Tutorials]] / [[Theme and Appearance]] / [[CSS - Multi Column Properties]]
> - [[Getting Started]]
> - ![[Pasted image 20230527003751.jpg|hsmall+wsmall+center]]
> - [[Plugin Tutorials]]
> - ![[Pasted image 20230527184201.jpg|hsmall+wsmall+center]]
> - [[Community Supported Games]]
> - ![[Pasted image 20230527001506.jpg|hsmall+wsmall+center]]
> - [[Obsidian TTRPG Tutorials/Templates/Templates\|Templates]]
> - ![[Pasted image 20230530220438.jpg|hsmall+wsmall+center]]
> - [[Community and Support]]
> - ![[Pasted image 20230527005303.jpg|hsmall+wsmall+center]]
If you would like your Properties to be split into multiple columns this snippet can be used:
![[CSS - Multi Column Properties-20231010224946420.webp]]
*Credit: Trist*
Obsidian > Settings > Appearance > CSS Snippets > Open Snippets Folder
![[CSS - Multi Column Properties-20231010224816278.webp]]
In this folder, create a new text file.
Name it: `HoverProperties_w-Columns.css`
Copy the code below into the file and save.
Obsidian > Settings > Appearance > CSS Snippets > Locate: HoverProperties_w-Columns > Enable
You can adjust the number of columns by modifying the following: `column-count: 3;`
````
/* hide property on collapse, hover top to reveal */
.metadata-properties-heading.is-collapsed:not(:hover) {
transition: linear .3s;
opacity: 0;
height: 0em;
}
.metadata-properties, .metadata-properties *, .metadata-add-button, .metadata-properties-heading {
/**** font-family: "Century Gothic"; ****/
}
/*Hides DropdownArrow, empty by default*/
.collapse-indicator {
}
/*FONT*/
body {
--metadata-property-background: transparent; /**** If you want pill-shaped background for each key****/
--metadata-label-font-weight: 700;
/**** --metadata-label-text-color: red; ****/
/**** --metadata-input-text-color: darkred; ****/
--metadata-label-font-size: 8px;
--metadata-input-font-size: 8px;
}
/* Adjust column count to your preference*/
.metadata-content {
column-count: 3; /****Column #****/
column-gap: 40px; /****Gap Amount****/
display: inline-block;
text-align: left;
display: block;
margin-left: auto;
margin-right: auto }
}
.metadata-property-key .metadata-property-icon {
--icon-color: #bdc;
--icon-size: .8rem;
}
.metadata-container {
margin-block-end: 0px;
margin-bottom: -.5rem;
}
/*"Properties" Header CSS*/
.metadata-properties-heading {
}
/* Cell CSS*/
.metadata-properties {
}
/* Value Key CSS*/
.metadata-property-key-input {
}
````