> [!NOTE]- Ressources
> - [Stephan Levin](https://stephanlevin.garden/Obsidian+Publish/Obsidian+Publish+Overview)
> - [Hananoshika Yomaru](https://yomaru.dev/700+Knowledge/How+to+customize+obsidian+CSS%3F)
> - [Marco Noris](https://lab.marconoris.com/obsidian#Obsidian+stuff)
> - [Minimal theme documentation](https://minimal.guide/features/helper-classes)
> - [Chad Bennett](https://mister-chad.com/welcome)
# Snippets for `publish.css`
## Dim left sidebar
```
.site-body-left-column {
opacity: 0.2;
transition: opacity 0.6s;
}
@media screen and (max-width: 1000px) {
.site-body-left-column {
opacity: 1;
}
}
.site-body-left-column:hover,
.site-body-left-column:active {
opacity: 1;
}
```
## Edit footer
```
.site-footer a {
display: none;
}
.site-footer::after {
content: 'by @guillaumelouvel';
color: lightgrey;
}
```
## Change 404
```
.not-found-title:after {
content: "This page doesn't exist anymore.";
display: block;
text-align: center;
font-size: var(--h3-size);
line-height: var(--h3-line-height);
color: var(--text-muted) ;
}
.not-found-description {
display: none;
}
```
## Align title (left column)
```
.site-body-left-column-site-name
{ align-self: center;
}
```
# Snippet for `publish.js`
## Display tags on pages (from page properties)
```
let id;
function insertMetaDates() {
const frontmatter = app.site.cache.cache[app.currentFilepath].frontmatter;
if (!frontmatter) {
return;
}
const tags = frontmatter["tags"];
if (!tags) {
return;
}
const frontmatterEl = document.querySelector(".frontmatter");
if (!frontmatterEl) {
return;
}
const tagElms = tags
.map(
(tag) => `
<a href="#${tag}" class="tag" target="_blank" rel="noopener">#${tag}</a>
`
)
.join("");
frontmatterEl.insertAdjacentHTML(
"afterend",
`
<div style="display: flex; gap: 3px;">
${tagElms}
</div>
`
);
clearInterval(id);
}
const onChangeDOM = (mutationsList, observer) => {
for (let mutation of mutationsList) {
if (
mutation.type === "childList" &&
mutation.addedNodes[0]?.className === "page-header"
) {
clearInterval(id);
id = setInterval(insertMetaDates, 50);
}
}
};
const targetNode = document.querySelector(
".markdown-preview-sizer.markdown-preview-section"
);
const observer = new MutationObserver(onChangeDOM);
observer.observe(targetNode, { childList: true, subtree: true });
id = setInterval(insertMetaDates, 50);
```