When I started using Obsidian Publish as my digital note taking platform, I ran into an issue. I could not natively change, or add to the footer section of the page. After some brief digging I could not find a publicly mentioned way of doing this, most people just recommended using a different Markdown Static Site Generator (SSG) to have more customizability. I just got done paying an annual fee, so this wasn't much of an option.
Luckily, I often find myself doing web development and design and have a bit of experience with Javascript and CSS. While Obsidian doesn't allow you to directly modify the elements of the page, it does allow you to attach a custom css file and a custom javascript file to your site. This would be my key to success.
## The Code
> [!info] Don't try to replace the sidebar...
> When I attempted to add elements to the sidebar/navigation it would disable the usability of the navigational dropdowns. This may be something I investigate further at a later date.
```js
// publish.js
var footer = document.getElementsByClassName('site-footer')
footer[0].innerHTML = `
<div class="footer-sup">
<div><b>© 2024 Alexis Raine</b></div>
<div class="social">
<a href="https://github.com/#"><img width="24px" src="https://s.magecdn.com/social/tc-github.svg" alt="GitHub" /></a>
<a href="https://linkedin.com/#"><img width="24px" src="https://s.magecdn.com/social/tc-linkedin.svg" alt="Linked In" /></a>
</div>
</div>
<div>
<a href="https://github.com/tcmmichaelb139/obsidian-tokyonight"><span>Theme: Tokyo Night</a></span>
</div>
` + footer[0].innerHTML;
```
I am using the [Tokyo Night](https://github.com/tcmmichaelb139/obsidian-tokyonight) theme in both my local Obsidian application as well as the Obsidian Publish site. To do this I copied the css file from `[vault path]/.obsidian/themes/Tokyo Night` directory to the vault's root, and renamed it `publish.css`. The code below was placed at the bottom of this CSS File to do the customization I wanted for the footer panel.
```css
/* publish.css */
.navbar-footer {
position: absolute;
bottom: 16px;
color: var(--magenta);
font-weight: bold;
}
.footer-sup {
color: var(--green);
text-align: center;
}
.footer-sup b{
color: rgb(var(--green_x));
font-size: medium;
}
.footer-sup img {
margin: 5px;
}
.social {
text-align: center;
}
```