Feature request: custom css

[Fischmuetze]

I found the bookmark list very confusing because the individual bookmarks are not very good visually separated. I changed this directly in the CSS so that a horizontal line appears under each bookmark, but that's not the point of editing in the code. It would be really nice to have either an input field for a custom css classes, or the possibility of a path to a custom css file on the server. The effort for implementing the second solution suggestion should be more or less simple. The custom css should not replace the default css but override settings of the original.

[jonathan-s]

The request for custom CSS often means that the design is lacking in some way. I'd be interested to know what your custom CSS looks like, so I understand better what problem, and you are solving it :).

[Fischmuetze]

I would not want to claim that things lacks. I love this app and I'm very happy that I could switch with this app from raindrop.io to this selfhosted app. I would like to emphasize that my impression is very, very subjective and not a critism of the design of the app. For me the design was to poppy and very confusing because the bright colors set the wrong accents. This made it difficult for me to grasp things quickly. I started with a divider line between each item, then I remember what I prefer in terms of eye guided design and raise some things. As result I changed the colors for better separate the important from the less important things, made the title bold and made also some indentions for items

Overall this fits much better to my idea of good readable. But as written before - this is subjective. I guess there are a lot of users who are very satisfied with the default design. For my opinion individual design claims should solved by the user, not by the developer. Easiest way could be to add as last ccs link on the page which reffers to a custom css.

[sissbruecker]

No plans to change the default design, but being able to add custom CSS would be neat. Could just be a plain text area in the settings where you can dump your custom CSS that would then get rendered into the HTML document. Maybe allow mounting a custom CSS file into the container, though that seems less helpful / convenient than the other option.

[crosbyh]

I would not want to claim that things lacks. I love this app and I'm very happy that I could switch with this app from raindrop.io to this selfhosted app. I would like to emphasize that my impression is very, very subjective and not a critism of the design of the app. For me the design was to poppy and very confusing because the bright colors set the wrong accents. This made it difficult for me to grasp things quickly. I started with a divider line between each item, then I remember what I prefer in terms of eye guided design and raise some things. As result I changed the colors for better separate the important from the less important things, made the title bold and made also some indentions for items

Overall this fits much better to my idea of good readable. But as written before - this is subjective. I guess there are a lot of users who are very satisfied with the default design. For my opinion individual design claims should solved by the user, not by the developer. Easiest way could be to add as last ccs link on the page which reffers to a custom css.

Hello! I like how this looks - nice work! Would you be willing to share the custom CSS you're using to make this theme?

Appreciate the custom CSS feature!

[Fischmuetze]

Hello! I like how this looks - nice work! Would you be willing to share the custom CSS you're using to make this theme?

Appreciate the custom CSS feature!

`a { color: #1987e1; outline: none; text-decoration: none } a:focus, a:hover, a:active, a.active { color: #1987e1; text-decoration: underline }

.btn { appearance: none; background: #fff; border: .05rem solid #1987e1; border-radius: 5px; color: #1987e1; cursor: pointer; display: inline-block; font-size: .8rem; height: 1.8rem; line-height: 1.2rem; outline: none; padding: .25rem .4rem; text-align: center; text-decoration: none; transition: background .2s, border .2s, box-shadow .2s, color .2s; user-select: none; vertical-align: middle; white-space: nowrap } .btn:focus, .btn:hover { background: #1987e1; border-color: #1987e1; color: #ffffff; text-decoration: none }

.btn:active, .btn.active { background: #1987e1; border-color: #1987e1; color: #fff; text-decoration: none } .btn.btn-primary { background: #1987e1; border-color: #127ad0; color: #fff } .btn.btn-primary:focus, .btn.btn-primary:hover { background: #106dba; border-color: #3634d2; color: #fff } .btn.btn-primary:active, .btn.btn-primary.active { background: #127ad0; border-color: #127ad0; color: #fff } .btn.btn-success { background: #32b643; border-color: #2faa3f; color: #fff } .btn.btn-link { background: transparent; border-color: transparent; color: #1987e1 } .btn.btn-link:focus, .btn.btn-link:hover, .btn.btn-link:active, .btn.btn-link.active { color: #1987e1 } .btn-link:visited:not(.btn-primary) { color: #1987e1 } .btn-link:visited:not(.btn-primary):hover { color: #1987e1 }

.form-input:focus { box-shadow: 0 0 0 0.1rem rgba(87, 85, 217, 0.2); border-color: #1987e1 }

.form-checkbox input:focus+.form-icon, .form-radio input:focus+.form-icon, .form-switch input:focus+.form-icon { box-shadow: 0 0 0 0.1rem rgba(87, 85, 217, 0.2); border-color: #1987e1 }

.form-checkbox input:checked+.form-icon, .form-radio input:checked+.form-icon, .form-switch input:checked+.form-icon { background: #1987e1; border-color: #1987e1 } .form-checkbox input:indeterminate+.form-icon { background: #1987e1; border-color: #1987e1 }

.label.label-primary { background: #1987e1; color: #fff }

.label.label-secondary { background: #f1f1fc; color: #1987e1 }

.badge[data-badge]::after, .badge:not([data-badge])::after { background: #1987e1; background-clip: padding-box; border-radius: .5rem; box-shadow: 0 0 0 0.1rem #fff; color: #fff; content: attr(data-badge); display: inline-block; transform: translate(-0.05rem, -0.5rem) }

.menu .menu-item>a:active, .menu .menu-item>a.active { background: #f1f1fc; color: #1987e1 }

.pagination .page-item a:focus, .pagination .page-item a:hover { color: #1987e1 }

.pagination .page-item.disabled a { cursor: default; opacity: .5; pointer-events: none }

.pagination .page-item.active a { background: #1987e1; color: #fff }

.tab .tab-item.active a, .tab .tab-item a.active { border-bottom-color: #1987e1; color: #1987e1 }

.text-primary { color: #1987e1 !important }

.loading::after { animation: loading 500ms infinite linear; border: .1rem solid #1987e1; border-radius: 50%; border-right-color: transparent; border-top-color: transparent; content: ""; display: block; height: .8rem; left: 50%; margin-left: -.4rem; margin-top: -.4rem; position: absolute; top: 50%; width: .8rem; z-index: 1 } .title span { font-weight: 600; color: #444444 !important; } .tag-cloud { font-size: 0.7rem; line-height: 1rem; } .group{ border-bottom: 1px #c0c0c0 solid; padding-top: 3px; padding-bottom: 3px; } .url-path, .description, .actions{ padding-left: 24px; }

li[ld-bookmark-item] .description { color: #888888 }

li[ld-bookmark-item] .description a, li[ld-bookmark-item] .description a:visited:hover { color: #b0b0b0OQ

} li[ld-bookmark-item] { position: relative; border-bottom: 1px solid #c0c0c0; padding-bottom: 10px; }

.bookmarks-form .btn.form-icon:focus, .bookmarks-form .btn.form-icon:hover, .bookmarks-form .btn.form-icon:active, .bookmarks-form .btn.form-icon.active { color: #888888 }

li[ld-bookmark-item] .description { color:#888888 !important; }

li[ld-bookmark-item] .description a, li[ld-bookmark-item] .description a:visited:hover { color:#1885de !important; }

li[ld-bookmark-item] .url-display { color: #b0b0b0; } li[ld-bookmark-item] .description { color: #888888 } li[ld-bookmark-item] .description a, li[ld-bookmark-item] .description a:visited:hover { color: #b0b0b0OQ }

.tag-cloud .highlight-char { font-weight: bold; text-transform: uppercase; color: #b0b0b0 } .tag-cloud .selected-tags a, .tag-cloud .selected-tags a:visited:hover { color: #e85600 }

.tag-cloud .unselected-tags a, .tag-cloud .unselected-tags a:visited:hover { color: #b0b0b0 }`

[GD2021]

Hello! I like how this looks - nice work! Would you be willing to share the custom CSS you're using to make this theme? Appreciate the custom CSS feature!

`a { color: #1987e1; outline: none; text-decoration: none } a:focus, a:hover, a:active, a.active { color: #1987e1; text-decoration: underline }

.btn { appearance: none; background: #fff; border: .05rem solid #1987e1; border-radius: 5px; color: #1987e1; cursor: pointer; display: inline-block; font-size: .8rem; height: 1.8rem; line-height: 1.2rem; outline: none; padding: .25rem .4rem; text-align: center; text-decoration: none; transition: background .2s, border .2s, box-shadow .2s, color .2s; user-select: none; vertical-align: middle; white-space: nowrap } .btn:focus, .btn:hover { background: #1987e1; border-color: #1987e1; color: #ffffff; text-decoration: none }

.btn:active, .btn.active { background: #1987e1; border-color: #1987e1; color: #fff; text-decoration: none } .btn.btn-primary { background: #1987e1; border-color: #127ad0; color: #fff } .btn.btn-primary:focus, .btn.btn-primary:hover { background: #106dba; border-color: #3634d2; color: #fff } .btn.btn-primary:active, .btn.btn-primary.active { background: #127ad0; border-color: #127ad0; color: #fff } .btn.btn-success { background: #32b643; border-color: #2faa3f; color: #fff } .btn.btn-link { background: transparent; border-color: transparent; color: #1987e1 } .btn.btn-link:focus, .btn.btn-link:hover, .btn.btn-link:active, .btn.btn-link.active { color: #1987e1 } .btn-link:visited:not(.btn-primary) { color: #1987e1 } .btn-link:visited:not(.btn-primary):hover { color: #1987e1 }

.form-input:focus { box-shadow: 0 0 0 0.1rem rgba(87, 85, 217, 0.2); border-color: #1987e1 }

.form-checkbox input:focus+.form-icon, .form-radio input:focus+.form-icon, .form-switch input:focus+.form-icon { box-shadow: 0 0 0 0.1rem rgba(87, 85, 217, 0.2); border-color: #1987e1 }

.form-checkbox input:checked+.form-icon, .form-radio input:checked+.form-icon, .form-switch input:checked+.form-icon { background: #1987e1; border-color: #1987e1 } .form-checkbox input:indeterminate+.form-icon { background: #1987e1; border-color: #1987e1 }

.label.label-primary { background: #1987e1; color: #fff }

.label.label-secondary { background: #f1f1fc; color: #1987e1 }

.badge[data-badge]::after, .badge:not([data-badge])::after { background: #1987e1; background-clip: padding-box; border-radius: .5rem; box-shadow: 0 0 0 0.1rem #fff; color: #fff; content: attr(data-badge); display: inline-block; transform: translate(-0.05rem, -0.5rem) }

.menu .menu-item>a:active, .menu .menu-item>a.active { background: #f1f1fc; color: #1987e1 }

.pagination .page-item a:focus, .pagination .page-item a:hover { color: #1987e1 }

.pagination .page-item.disabled a { cursor: default; opacity: .5; pointer-events: none }

.pagination .page-item.active a { background: #1987e1; color: #fff }

.tab .tab-item.active a, .tab .tab-item a.active { border-bottom-color: #1987e1; color: #1987e1 }

.text-primary { color: #1987e1 !important }

.loading::after { animation: loading 500ms infinite linear; border: .1rem solid #1987e1; border-radius: 50%; border-right-color: transparent; border-top-color: transparent; content: ""; display: block; height: .8rem; left: 50%; margin-left: -.4rem; margin-top: -.4rem; position: absolute; top: 50%; width: .8rem; z-index: 1 } .title span { font-weight: 600; color: #444444 !important; } .tag-cloud { font-size: 0.7rem; line-height: 1rem; } .group{ border-bottom: 1px #c0c0c0 solid; padding-top: 3px; padding-bottom: 3px; } .url-path, .description, .actions{ padding-left: 24px; }

li[ld-bookmark-item] .description { color: #888888 }

li[ld-bookmark-item] .description a, li[ld-bookmark-item] .description a:visited:hover { color: #b0b0b0OQ

} li[ld-bookmark-item] { position: relative; border-bottom: 1px solid #c0c0c0; padding-bottom: 10px; }

.bookmarks-form .btn.form-icon:focus, .bookmarks-form .btn.form-icon:hover, .bookmarks-form .btn.form-icon:active, .bookmarks-form .btn.form-icon.active { color: #888888 }

li[ld-bookmark-item] .description { color:#888888 !important; }

li[ld-bookmark-item] .description a, li[ld-bookmark-item] .description a:visited:hover { color:#1885de !important; }

li[ld-bookmark-item] .url-display { color: #b0b0b0; } li[ld-bookmark-item] .description { color: #888888 } li[ld-bookmark-item] .description a, li[ld-bookmark-item] .description a:visited:hover { color: #b0b0b0OQ }

.tag-cloud .highlight-char { font-weight: bold; text-transform: uppercase; color: #b0b0b0 } .tag-cloud .selected-tags a, .tag-cloud .selected-tags a:visited:hover { color: #e85600 }

.tag-cloud .unselected-tags a, .tag-cloud .unselected-tags a:visited:hover { color: #b0b0b0 }`

请问这个代码有更新吗？它会造成搜索栏变形

[GD2021]

Is there an update to this code please? It causes the search bar to be distorted

[Fischmuetze]

Hi ... here is ... working fine with Version 1.28.0 (latest: 1.30.0 not proofed)

`:root { --theme: #1a87e1 !important; theme_color: #1a87e1; }

body { theme-color: #1a87e1 !important; } a { color: #1987e1; outline: none; text-decoration: none } a:focus, a:hover, a:active, a:visited, a.active { color: #1987e1; text-decoration: none; }

.btn { appearance: none; background: #fff; border: .05rem solid #1987e1; border-radius: 5px; color: #1987e1; cursor: pointer; display: inline-block; font-size: .7rem; /* height: 1.8rem; / / line-height: 1.2rem; */ outline: none; padding: .25rem .4rem; text-align: center; text-decoration: none; transition: background .2s, border .2s, box-shadow .2s, color .2s; user-select: none; vertical-align: middle; white-space: nowrap } .btn:focus, .btn:hover { background: #1987e1; border-color: #1987e1; color: #ffffff; text-decoration: none }

.btn:active, .btn.active { background: #1987e1; border-color: #1987e1; color: #fff; text-decoration: none } .btn.btn-primary { background: #1987e1; border-color: #127ad0; color: #fff } .btn.btn-primary:focus, .btn.btn-primary:hover { background: #106dba; border-color: #3634d2; color: #fff } .btn.btn-primary:active, .btn.btn-primary.active { background: #127ad0; border-color: #127ad0; color: #fff } .btn.btn-success { background: #32b643; border-color: #2faa3f; color: #fff; } .btn.btn-link { background: transparent; border-color: transparent; color: #1987e1; } .btn.btn-link:focus, .btn.btn-link:hover, .btn.btn-link:active, .btn.btn-link.active { color: #1987e1; } .btn-link:visited:not(.btn-primary) { color: #1987e1 !important; } .btn-link:visited:not(.btn-primary):hover { color: #1987e1; }

.form-input{ border: .05rem solid #c0c0c0; color: #606060; } .form-input:focus { box-shadow: 0 0 0 0.1rem rgba(87, 85, 217, 0.2); border-color: #1987e1; color: #606060; } .form-checkbox input:focus+.form-icon, .form-radio input:focus+.form-icon, .form-switch input:focus+.form-icon { box-shadow: 0 0 0 0.1rem rgba(87, 85, 217, 0.2); border-color: #1987e1 } .form-checkbox input:checked+.form-icon, .form-radio input:checked+.form-icon, .form-switch input:checked+.form-icon { background: #1987e1; border-color: #1987e1; } .form-checkbox input:indeterminate+.form-icon { background: #1987e1; border-color: #1987e1; }

.label.label-primary { background: #1987e1; color: #fff; } .label.label-secondary { background: #f1f1fc; color: #1987e1 }

.badge[data-badge]::after, .badge:not([data-badge])::after { background: #1987e1; background-clip: padding-box; border-radius: .5rem; box-shadow: 0 0 0 0.1rem #fff; color: #fff; content: attr(data-badge); display: inline-block; transform: translate(-0.05rem, -0.5rem) }

.menu .menu-item>a:active, .menu .menu-item>a.active { background: #f1f1fc; color: #1987e1 }

.pagination .page-item a:focus, .pagination .page-item a:hover { color: #1987e1 }

.pagination .page-item.disabled a { cursor: default; opacity: .5; pointer-events: none }

.pagination .page-item.active a { background: #1987e1; color: #fff }

.tab .tab-item.active a, .tab .tab-item a.active { border-bottom-color: #1987e1; color: #1987e1 }

.text-primary { color: #1987e1 !important }

.loading::after { animation: loading 500ms infinite linear; border: .1rem solid #1987e1; border-radius: 50%; border-right-color: transparent; border-top-color: transparent; content: ""; display: block; height: .8rem; left: 50%; margin-left: -.4rem; margin-top: -.4rem; position: absolute; top: 50%; width: .8rem; z-index: 1 } .title span { font-weight: 600; color: #444444 !important; } .tag-cloud { font-size: 0.7rem; line-height: 1rem; } .group{ border-bottom: 1px #c0c0c0 solid; padding-top: 3px; padding-bottom: 3px; } .url-path, .description, .actions{ padding-left: 24px; }

li[ld-bookmark-item] .description { color: #888888 }

li[ld-bookmark-item] .description a, li[ld-bookmark-item] .description a:visited:hover { color: #b0b0b0OQ

} li[ld-bookmark-item] { position: relative; border-bottom: 1px solid #c0c0c0; padding-bottom: 10px; }

.bookmarks-form .btn.form-icon:focus, .bookmarks-form .btn.form-icon:hover, .bookmarks-form .btn.form-icon:active, .bookmarks-form .btn.form-icon.active { color: #888888 }

li[ld-bookmark-item] .description { color:#888888 !important; }

li[ld-bookmark-item] .description a, li[ld-bookmark-item] .description a:visited:hover { color:#1885de !important; }

li[ld-bookmark-item] .url-display { color: #b0b0b0; } li[ld-bookmark-item] .description { color: #888888 } li[ld-bookmark-item] .description a, li[ld-bookmark-item] .description a:visited:hover { color: #b0b0b0OQ }

.tag-cloud .highlight-char { font-weight: bold; text-transform: uppercase; color: #b0b0b0 } .tag-cloud .selected-tags a, .tag-cloud .selected-tags a:visited:hover { color: #e85600 }

.tag-cloud .unselected-tags a, .tag-cloud .unselected-tags a:visited:hover { color: #b0b0b0 } .tags a { color: #1a87e1 !important; }`