How to set up a second ribbon column?

I don’t know if is possible to add a second column on the Obsidian Ribbon. I don’t remember if I found a CSS in this forum for resizing the column, but I’m not sure if it could be divided into multiple columns. My purpose is to add a second column for new icons that I want to add from the Commander Plugin.

You can add a second column to the Obsidian Ribbon using custom CSS. Look for or create a CSS snippet that allows dividing the Ribbon into multiple columns. This will help you add a second column for new icons from the Commander Plugin.

I succeeded. I’m sharing this CSS code, which resizes the icons, adjusts their spacing, and adds a second column if the first one becomes too full of icons.

/* Change the width of the Ribbon */
body {
  --ribbon-width: 60px; /* Adjust this value to the desired width */
}

/* Adjust the Ribbon icons to be distributed in two columns */
.workspace-ribbon.side-dock-ribbon.mod-left .side-dock-actions {
  display: flex;
  flex-direction: column; /* Ensure icons are placed in a single column before wrapping */
  flex-wrap: wrap;
  height: 100%; /* Ensure the container occupies the full available height */
  gap: 1px; /* Space between icons */
  justify-content: flex-start; /* Align icons at the start of the main axis (column) */
  align-items: flex-start; /* Align icons at the start of the cross axis */
}

/* Distribute icons into two columns */
.workspace-ribbon.side-dock-ribbon.mod-left .clickable-icon {
  width: 50%; /* Adjust the width of each icon to occupy half of the container */
  box-sizing: border-box; /* Include padding and border in the total element size */
  padding: 3px; /* Spacing around the icons */
  display: flex; /* Use flexbox to center and align icon content within its container */
}

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