Skip to content
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.

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

Feature Request: Ability to change the site Title and logo #967

Open
alexjj opened this issue Jan 27, 2025 · 12 comments
Open

Feature Request: Ability to change the site Title and logo #967

alexjj opened this issue Jan 27, 2025 · 12 comments

Comments

@alexjj
Copy link

alexjj commented Jan 27, 2025

It would be nice to change the title and logo to match with the rest of my site. Thanks.

@realkinetix
Copy link

Yes, this would be a nice enhancement. As it is, you have to edit bookmarks/templates/bookmarks/head.html for the title (and layout.html for the logo) and then 'npm run build' again to build the modified pieces in to the app.

For the logo you could also just replace static/logo.png

This is all presuming you have gone a route of building from the source yourself, which is more difficult than need be due to the documentation completely leaning on the 'black box' docker path only.

@dkebler
Copy link

dkebler commented Mar 8, 2025

I run multiple instances so even something simple like changing the background color so I know I am at a different instance.

Given all @sissbruecker 's work maybe he would like to maintain some credit/exposure so I suggest he put the logo, linkding and a link say lower right in a footer. That way if someone changes the title and logo/icon credit will still be where it is due.

In the meantime I'll look into doctoring the css to achieve this without a rebuild.

@sissbruecker do you accept PRs?

@sissbruecker
Copy link
Owner

I would probably want to avoid the complexity of adding some form of configuration UI for this, so preferrably this feature would only involve configuring env variables and mounting files to the Docker container. I think customizing the app title is the only thing that's really challenging, so maybe adding an env variable for that would be a start. Customizing the logo (or any of the other images) is doable by mounting custom files into the Docker container. Customizing CSS should be doable with the provided variables and adding custom CSS in the user profile. Some form of attribution would be good as you mentioned. There should also be some documentation on how to configure a custom title and images.

@dkebler
Copy link

dkebler commented Mar 8, 2025

Yes 2 env vars would be the easiest and enough for most users. Anymore more then they can build custom container themselves.

LD_TITLE
LD_BACKGROUND_COLOR

as for the logo a bit more involved. somehow it needs to persist without separate host volume mount.

SO my suggesion is to create a file in /etc/linkding/data/title-logo.(svg|png) and link that back in /etc/linkding/static. in your css use title-logo instead of logo so you can keep logo.svg your logo for use elsewhere. Then by default put a copy of your logo in data/title-logo. Then if folks want to change it they just replace their logo in that file in the mounted data/ and it will persist.

@sissbruecker
Copy link
Owner

LD_BACKGROUND_COLOR

That would be a bit too niche for me, since you can already use custom CSS for that:

:root {
  --body-color: green;
}

as for the logo a bit more involved. somehow it needs to persist without separate host volume mount.

Why not just mount the images directly:

docker run -v ./my-logo.png:/etc/linkding/static/logo.png ...other args... sissbruecker/linkding:latest

Putting image replacements into the data folder might work too by adding another static map to the uwsgi config and making sure it's picked up before the default static folder. But for now adding some mounts for custom images seems good enough.

@dkebler
Copy link

dkebler commented Mar 9, 2025

so ld supports a custom.css file?

did not find that in the docs. but just now found this https://linkding.link/how-to/#increase-the-font-size but confused by
CSS field in the settings: what settings? A settings file I mount from host?

Is the title text settable via css too?

assuming I can set both bg and title text via css in the "settings" file

and can do an extra mount for the logo.

Then I have all three covered without any changes by you. So as far as I am concerned you could close this issue without any new feature.

parting suggestion though. Add a github discussion to this repo so we can get some community support without having to pollute your issue tracker.

Thx!

@sissbruecker
Copy link
Owner

I mean the settings availabe in the linkding web UI. Technically you can at least visually replace a text with CSS, you can look up how to do that on the web.

@dkebler
Copy link

dkebler commented Mar 9, 2025

don't you just love Claude, had it look at your repo and suggest the ccs selectors to change.

/* Changed and enhanced title with larger size and bold text */
header h1 {
    content: "";
    visibility: hidden;
}

header h1::after {
    content: "New Title";
    visibility: visible;
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
}

@alexjj
Copy link
Author

alexjj commented Mar 10, 2025

Thanks for the solutions to my request. I ended up making the CSS slightly different for the title to ensure the text was in the right position and didn't wrap:

header h1 {
    visibility: hidden;
    position: relative;
}

header h1::after {
    content: "NEW TITLE";
    visibility: visible;
    white-space: nowrap;
    position: absolute;
    left: 0;
    top: 0;
}

@dkebler
Copy link

dkebler commented Mar 10, 2025

@alexjj Thanks for that improvement. As to the logo what I determined is that it needs to be a bind mount or it wont't overwrite the existing logo so @sissbruecker suggestion does not work. So in compose that is

    volumes:
      - type: bind
        source: $PWD/assets/custom-logo.png
        target: /etc/linkding/static/logo.png
        read_only: true

fyi if you make an svg of same same size you can use magick to make the png.

That said I noticed that ld already makes an assets and favicons folder within the data folder. So a fairly simple change in the dockerfile would be to copy all the static stuff to data/assets and link that back to static. That way users can just move logo.png or favicon.ico, etc. to that folder already host mounted and it will be used without the need of the above. If @sissbruecker would accept such a PR i'll do it.

Too I created a python script to generate a whole :root color theme by only passing a single color, that for use in custom css (thanks to claude). I'll be publishing that soon.

@dkebler
Copy link

dkebler commented Mar 11, 2025

Sorry, after more testing that above (which I removed) does not work but this works and is simpler

header h1 {
    font-size: 0;
}

header h1::before {
    content: "${custom_title:-linkding}";
    font-size: 1.5rem;
    color: var(--primary-text-color);
}

@dkebler
Copy link

dkebler commented Mar 13, 2025

@sissbruecker

https://github.com/uCOMmandIt/uci-linkding-bookmarks

FYI I just released my linkding "manager" that includes a css title and theme generator and custom logo. Given it wholly depends on your work thought you should see it. I did set it up by default that if the title is changed a subtitle is added with "powered by linkding" but I had no way in css to set an href a tag to point to your repo. Also of note is the stand alone python script maketheme.py script which could be incorporated into linkding to allow settable runtime theme in the UI (preset choice or custom color like in the script). I appreciate the quality of this project made it worthwhile to make this "manager"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants