# Custom CSS for publish
This page includes the custom CSS I use on top of the [[🗡️ Arbiters/Credits#Publish theme|Publish theme]] within this site.
## Custom checkboxes
As Custom Checkboxes can sometimes be a "living" CSS, I have separated this out to [[Custom Checkboxes]].
## Hide right sidebar
This snippet will hide the right sidebar when `cssclasses: hide-right` is declared in a note. This will not work if you use Sliding Panes.
```scss
.hide-right .site-body-right-column .site-body-right-column-inner {
display: flex;
flex-direction: column;
height: 100vh;
margin-right: auto;
max-width: var(--sidebar-right-width);
overflow: auto;
padding: 0 24px;
pointer-events: auto;
scrollbar-gutter: stable;
width: var(--sidebar-right-width);
}
.published-container:has(.hide-right) {
&.has-outline,
&.has-graph {
& .site-body-right-column {
display: none !important;
visibility: hidden;
}
}
}
```
## Inline embeds
After switching to Ebullientworks, I do not need to use the below embed code because eBullientworks comes with `cssclass: invisible-embed`, meaning it already has its own embed code.
I am leaving the below in case anyone else needs it.
---
I created this snippet to make embeds more inline for the Obsidian Help docs. Now, I also use it here. This is activated with the `cssclasses: soft-embed` frontmatter entry.
```css
.soft-embed body {
--embed-border-left: none;
--embed-border-right: none;
--embed-padding: var(--size-2-1) var(--size-4-2);
}
.soft-embed .markdown-embed-link,
.soft-embed .file-embed-link {
display: none;
}
.soft-embed .markdown-embed {
border-right: none;
border-left: none;
border-radius: var(--radius-l);
position: relative;
padding: 0;
}
.soft-embed .markdown-embed h2 {
font-size: var(--h3-size);
}
.soft-embed .markdown-embed h3 {
font-size: var(--h4-size);
}
.soft-embed .markdown-embed .markdown-embed-content {
max-height: unset;
overflow: unset;
}
.soft-embed .markdown-embed .markdown-embed-content > .markdown-preview-view {
overflow-y: unset;
}
.soft-embed .markdown-embed .markdown-rendered blockquote {
border-left: none;
padding: 0;
}
```
## Frontmatter
This snippet was created by the illustrious and ever eldritch [sailKite](https://forum.obsidian.md/t/obsidian-publish-resources/74582/15?u=sigrunixia). I currently am not using it, but its here for your reference.
```scss
.publish-renderer pre.frontmatter.language-yaml {
// !important is required to override a style attribute declaration on the element
display: block !important;
}
```
## Image floats
After switching to Ebullientworks, I no longer need to use these floats as an alternative is included within the base Publish theme.
---
This snippet adds basic floats to images based on their alt tag. I chose alt tags instead of anchor tags.
```scss
.markdown-rendered {
img[alt*="right"] {
clear: right;
display: flexbox;
float: right;
margin-left: 0.9375rem;
max-width: 40%;
}
img[alt*="left"] {
clear: left;
display: flexbox;
float: left;
margin-right: 1rem;
max-width: 40%;
padding-left: 0.625rem;
}
img[alt*="circle"] {
aspect-ratio: 1/1;
border-radius: 100%;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: cover;
position: 50% 50%;
width: 40%;
}
}
// For floats by class
.right {
float: right;
margin-left: 0.9375rem;
}
```