Where are the web files saved?

[The-Dark-Mode]

Description

I installed homepage with Docker, and I would like to edit the HTML/CSS so it displays an image at the bottom of the webpage.

homepage version

3.3

Installation method

Docker

Troubleshooting

I have looked for an html file on my drive, but I don't think I looked in the right places.

custom.css

.footer-image {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.footer-image img {
  max-width: 100%;
  height: auto;
}

custom.js

document.addEventListener('DOMContentLoaded', (event) => {
  const footerImageHTML = '<div class="footer-image"><img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" alt="Footer Image"></div>';
  document.body.insertAdjacentHTML('beforeend', footerImageHTML);
});

[glime-ai[bot]]

Thanks for posting a discussion about homepage here on GitHub. Homepage now uses a fancy new AI tool thanks to our friends at Glime, so the answer below is the AI bot's attempt to answer your question. If you feel it's sufficient you can mark the answer and close this post, otherwise feel free to leave it open of course!

Thanks for using Homepage! ❤️

---

To customize the HTML/CSS of your homepage installation running in Docker, you will need to add custom CSS or potentially JavaScript if you need to manipulate the DOM beyond what CSS can do. As per the documentation, homepage supports adding your own custom CSS and JavaScript as of version v0.6.30.

Here's what you can do:

1. Locate your local configuration directory which you have mapped to /app/config in your Docker container. This is specified in the volumes section of your Docker compose file or Docker run command.

2. Inside this configuration directory, look for a file named custom.css. If it does not exist, you can create it.

3. Add your custom CSS rules to this custom.css file. For example, to add an image at the bottom of the webpage, you could add something like this:

.footer-image {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.footer-image img {
  max-width: 100%;
  height: auto;
}

4. Then, you would need to add the HTML for the image somewhere in the homepage application. This could be more complex, as it might require editing the actual source files or adding a custom JavaScript file to inject the HTML. The file would be named custom.js and placed in the same config directory.

5. If you're adding JavaScript, your custom.js might look something like this:

document.addEventListener('DOMContentLoaded', (event) => {
  const footerImageHTML = '<div class="footer-image"><img src="path_to_your_image.jpg" alt="Footer Image"></div>';
  document.body.insertAdjacentHTML('beforeend', footerImageHTML);
});

6. Make sure to replace path_to_your_image.jpg with the actual path to your image file, which should also be accessible within the container.

7. After making these changes, you may need to restart your Docker container for the changes to take effect.

Please note that editing the actual HTML files directly is not recommended as they are part of the Docker image and any changes would be lost when the image is updated or the container is recreated.

If you need further assistance with the exact steps or encounter any issues, please provide more details about your current configuration and setup.

This comment was generated by Glime.

[The-Dark-Mode]

No image appears.

[github-actions[bot]]

This discussion has been automatically closed due to inactivity. See our contributing guidelines for more details.

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns. See our contributing guidelines for more details.