Sign in

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

  • This topic has 4 replies, 2 voices, and was last updated 1 month ago by .
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #7488
    claudepi

    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.

     

    #7498
    gpsblues

    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.

    #7499
    claudepi

    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

    #7511
    gpsblues

    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.

    #7512
    gpsblues

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

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

    🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.