8000 Right way to customise · Issue #127 · tomfran/typo · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Right way to customise #127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
RomanAtBrief opened this issue Apr 25, 2025 · 6 comments
Closed

Right way to customise #127

RomanAtBrief opened this issue Apr 25, 2025 · 6 comments

Comments

@RomanAtBrief
Copy link
RomanAtBrief commented Apr 25, 2025 •
edited
Loading
Image

Hi @tomfran and @runofthemillgeek
Can you help me get the right way to customise typo. It looks great as is but there are a few things I would like to add / change:

  1. Replace title with logo
  2. Switch dark/light logos when switching between modes
  3. Change footer with custom text
  4. Add small button / icon to switch between light / dark modes

I am quite new to Hugo and any help is much appreciated, thank you guys

I managed to add custom footer, not sure why the provided documentation didn't work for me.

So I have created footer.htm inside my partials folder with:

Built with ❤️ by Moonlight Interactive, Copyright © 2025

Powered by Hugo and tomfran/typo

It works but not sure if this is the right way to do things...
@RomanAtBrief
Copy link
Author

For logo I had to modify Typo theme with code below. But would rather not do it and use hooks.

{{ if or (not (.Param "hideHeader")) .IsHome }}

<h1 class="header-title">
    <!--<a href="{{ site.BaseURL }}">{{ site.Title }}</a>-->
    <a href="{{ site.Home.RelPermalink }}">
        {{ with site.Params.logo.path }}
            {{ with resources.Get . }}
                <img 
                    src="{{ .RelPermalink }}" 
                    alt="{{ site.Params.logo.alt }}" 
                    style="height: 200px; width:auto; margin-left: -30px;">
            {{ else }}
                {{ errorf "Unable to find logo at %s" . }}
            {{ end }}
        {{ else }}
            {{ site.Title }}
        {{ end }}
    </a>
</h1>

@runofthemillgeek
Copy link
Contributor
runofthemillgeek commented Apr 25, 2025 •
edited
Loading

Theme switch is not yet implemented, see #27 and I don't think there's currently an option to use a logo image. You probably need to modify:

typo/layouts/partials/header.html

Lines 7 to 9 in fdfbe02

<h1 class="header-title">
<a href="{{ site.BaseURL }}">{{ site.Title }}</a>
</h1>

Footer customization is listed here: https://tomfran.github.io/typo-wiki/features/appearance/#footer-customization but if you want a different type of layout/text, need to override that as well you can set footerContent property in your hugo.toml with the markdown string.

@RomanAtBrief
Copy link
Author

Thank you @runofthemillgeek
I managed to add custom logo and update footer. I had to copy header.html and make some changes.
The only thing left to do is to get your nice css and hanging of the side dates ;)
Give me a shout when you publish your site in public

Thank you

@runofthemillgeek
Copy link
Contributor
runofthemillgeek commented Apr 26, 2025 •
edited
Loading

@RomanAtBrief here you go: https://github.com/runofthemillgeek/typomagic

Sorry, something went wrong.

@RomanAtBrief
Copy link
Author

Thank you so much!

@RomanAtBrief
Copy link
Author

Thank you @runofthemillgeek and @tomfran
I spend a few more hours today and I think it looks nice, really happy with it. Very nice theme.
The only thing I nee is to add minimalistic language switcher and icon for light/dark toggle.

Image
Image

@tomfran tomfran closed this as completed Apr 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@runofthemillgeek @RomanAtBrief @tomfran
0