Help removing 'powered by' from footer and page titles

[clay]

I just started using obsidian for the first time today and subscribed to publish, but I’ve spent the last 45 minutes trying to remove the ‘powered by obsidian publish’ from the footer and the page titles. Can someone please help? I haven’t added a custom domain yet, I plan to, but haven’t decided on the name. What I’ve tried so far is I added a css snippet in the appropriate folder with:

.site-footer a {
  display: none;
}

body {
  --text-normal: red;
}

It works inside obsidian, I can see that the text is red, but when I publish the site, the text on the site isn’t red, and the footer is still there.

[clay]

Footer display solved by kepano.

In the same folder that contains your notes, use a regular text editor (not Obsidian) to make a file called publish.css. Then in that file, add the text:

.site-footer a {
  display: none;
}

Then publish that file.

It shouldn’t show up in your obsidian notes, it when you press publish in obsidian, it should detect it.

So your folder would have things like my-note.md other-note.md and publish.css (not publish.css.md)

Oh and snippets inside {your_vault}/.obsidian/snippets/{snippets_file}.css don’t have any impact on obsidian publish, they only impact the non-published.

[IsaacTait]

My issue seemed to be that --footer-display: none was inside of .published-container and not body. That seemed to do the trick for me…

fix: move footer display to body 🐣

[Honnis]

I received some inspiration from the ChatGPT teacher regarding the footer settings of Obsidian Publish.

You can modify the website footer by modifying the CSS, but this has its limitations.

So why not try to create a publish.js JavaScript file to modify the footer.

The sample code is applicable for adding the website ICP license number in mainland China, and adding a website name in front of the license number. The following is the solution provided by ChatGPT:

Note: My website has a password, and the website footer cannot be replaced with JavaScript until the password is entered and the website is fully loaded.
I hope that Obsidian Publish can customize each page in the future, especially the password input interface.

// 获取页脚元素
const footer = document.querySelector('.site-footer');

// 获取页脚链接元素
const link = footer.querySelector('a');

// 创建新的页脚链接元素
const newLink = document.createElement('a');
newLink.href = 'https://beian.miit.gov.cn/';
newLink.target = '_blank';
newLink.textContent = '京ICP备20XXXXXXX号-1';

// 创建新的页脚文本元素
const newText = document.createElement('span');
newText.textContent = 'YOUR WEBSITE NAME ';

// 替换旧的页脚链接元素
link.parentNode.replaceChild(newText, link);

// 添加新的页脚链接元素
footer.appendChild(newLink);

// 添加原有的 CSS 样式
footer.style.display = 'flex';
footer.style.justifyContent = 'center';
footer.style.alignItems = 'center';

newLink.style.color = link.style.color;
newLink.style.textDecoration = link.style.textDecoration;

This code first uses the document.querySelector() method to get the footer element on the page, then uses the querySelector() method to get the link element inside the footer element. Then, a new link element and a new text element are created, with the href, target and textContent properties of the new link set to the new footer content, and with the textContent property of the new text element set to “YOUR WEBSITE NAME”. Then, the parentNode.replaceChild() method is used to replace the old link element with the new text element. Next, the appendChild() method is used to add the new link element to the end of the footer element. Note that this code needs to be executed after the page has finished loading, and can be placed in a window.onload event handler or in a <script> tag in the HTML file with the defer attribute.

To retain the original CSS styles, some extra code needs to be added. First, the display, justifyContent, and alignItems styles of the original element should be added to the new footer element using the style attribute, in order to maintain the original layout and alignment. Then, the color and textDecoration styles of the new link element should be set to the same values as the original link element, in order to maintain the original color and underline style.