We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Styling (i.e., menu, favicon, hero) on a internal link?

May 23, 2022 at 5:16 am #7488

[anonymous]

I am using the Simple theme v2.4.1.0. I have an html page that I created with a different program (a Jupyter notebook) that I would like to include in my website via the menu. I’ve figured out how to do this (via the steps below), but when I navigate to that page, the styling of my website (e.g., the menu, favicon, hero content) doesn’t show up. Is there any way to get the styling on my Jupyter notebook page, particularly the menu?

Steps:

Upload the jupyter.html file into the root directory via Tools & Plugins > File Manager.

Add it to the menu as an internal link by pointing to jupyter.html.

May 25, 2022 at 9:41 am #7498

[anonymous]

Hi,

In this way, jupiter.html is an independent file and does not contain references to the CSS and classes of the Simple theme.

You could try pasting jupiter’s HTML body inside a new Publii post. This way you would have menus, favicons, etc, but you would probably lose some of the original jupiter style.

A non-optimized solution could be to insert in Tools/Personal HTML also the references to CSS and JS that you find in the jupiter HTML.

May 25, 2022 at 1:45 pm #7499

[anonymous]

Hello,

Thank you for your suggestions! I tried the first one (paste jupiter’s HTML body inside a new Publii post) but yes, you are correct. I lost a lot of the important formatting from the jupyter file, to the point where it was unreadable in places. So unfortunately that is not a good option for me.

I will give the second option a try. Is there any documentation on how to do this, beyond what is stated here? https://getpublii.com/dev/custom-html/

Thanks!

–Seth

May 26, 2022 at 10:00 am #7511

[anonymous]

Hi, my english is very bad.

Go to Publii> Tools and plug-ins> Personal HTML.
You just have to insert the CSS and JS references you find in the <head> section of the original html and probably further JS references at the end of the <body>. Do not forget to include all the <style> tag if present.
It is not an optimized solution because these references will be used unnecessarily in all Publii posts.

A more complex thing would be to create a specific post template (e.g. post-jupiter.hbs) in which you reproduce the entire structure of jupiter.html using the header and footer of the Simple theme.
https://getpublii.com/dev/how-to-create-custom-templates/#how-to-create-custom-templates

You must first become familiar with the developer documentation.

May 26, 2022 at 10:05 am #7512

[anonymous]

Alternatively you can use the <iframe> tag within a Publii post.

It won’t look great, but it should work.

🙂

July 7, 2022 at 11:16 pm #7727

[anonymous]

[anonymous] wrote:

Alternatively you can use the <iframe> tag within a Publii post.

It won’t look great, but it should work.

🙂

Yes, I think an iframe would be good here. Host your Jupyter notebook on Netlify Drop or GitHub pages, and then find an iframe generator online. Then, add to a post.

Alternately, you can host your page elsewhere, create a subdomain for it, and then add the link in your menu as an external link to the notebook page.