Couple questions. (Custom background, menu item order, custom social icon, CSP, default dark theme) #601

Silgrond · 2022-01-07T00:51:52Z

Silgrond
Jan 7, 2022

Thank you for making this fantastic theme!
I hope this is not too many questions at once, but I didn't want to spam the discussion with each of them...

I only have prior experience with building my own websites with HTML/CSS, and Hugo is fairly new to me. I have updated doks to the latest version from v0.2 to v0.3. I am using the child theme.

How can I have a custom background image added to the bottom of the page like this?
I have looked into (https://getdoks.org/ CSS for dotted lines and adding custom fonts? #104) but I have no idea where to put the .png file itself and what manages the main content of the website, as ./layouts/index.html only contains main page's sections and not the background itself.

Please see the following four mockups of what I have in mind (showing the inspect element tool as well):
https://imgur.com/a/MrQCv8W

Normally it would be something like

body {
    background-image: url("bg_transp2.png");
    background-repeat: repeat-x;
    background-position: bottom;
    background-color: #;
}

On the new version, I can't seem to order the list of menu items (even redone the pages from scratch), it seems to be ignoring the weight, and had the same issue as with collapse/expand as (Collapse and expand of items in sidebar do not work correctly. #596)
I circumvented both of issues with by numbering the categories and having them expanded them on default. collapsibleSidebar = false The identifiers themselves are matching.
How can I add a small Discord icon to the Social Menu?
I don't mind if its a simple png icon (how do I do it that way, where to place the img?), but I guess it would be more elegant to use Font Awesome.
I have added <script src="https://kit.fontawesome.com/21b8af5216.js" crossorigin="anonymous"></script> to ./layouts/partials/head/script-header.html but adding

[[social]]
  name = "Twitter"
  pre = "<i class="fab fa-discord"></i>"
  url = "link"
  weight = 10

doesn't work for me. (Probably the form does not accept HTML)

Updated Content Security Policy with the recommended Laboratory extension, for some reason my embeded twitter feed still does not load. (Not that much of an issue, as I mostly wanted to have discord, youtube and vimeo to work.)
Followed A few small questions #64 but
<body class="{{ .Scratch.Get "class" }} dark">
still does load the page with light mode on default.

Thank you very much for your kind answer, and sorry if its too much to ask!

h-enk · 2022-01-08T13:01:26Z

h-enk
Jan 8, 2022
Maintainer

Would you mind sharing your repo? That 'll make helping you way easier.

2 replies

Silgrond Jan 8, 2022
Author

Should be visible now: https://github.com/Silgrond/tetris-hungary
The live website is available at tetrishungary.hu
Thank you!

h-enk Jan 13, 2022
Maintainer

Ad 1) This is a CSS thing and therefore out of scope for Doks Discussions. Try getting help on e.g. Stack Overflow. This is how I added the bullets on getdoks.org:

Ad 2) Not sure what's exactly going on (looks like a language/characters thing).

Rename identifiers to lowercase, like so:

[[leirasok]]
  name = "Kezdőknek"
  weight = 10
  identifier = "kezdoknek"
  url = "/leirasok/kezdoknek/"

[[leirasok]]
  name = "Játékok"
  weight = 20
  identifier = "jatekok"
  url = "/leirasok/jatekok/"

[[leirasok]]
  name = "Forgatás"
  weight = 30
  identifier = "rotation"
  url = "/leirasok/rotation/"

[[leirasok]]
  name = "Nyitások"
  weight = 40
  identifier = "openers"
  url = "/leirasok/openers/"

[[leirasok]]
  name = "Építés"
  weight = 40
  identifier = "stacking"
  url = "/leirasok/stacking/"

And, in ./layouts/partials/sidebar/docs-menu.html replace all 5 instances of .Identifier with .Name.

Next, set the new identifiers in the in the front matter of a leirasok page, like so, e.g.:

---
title: "DT Cannon 🚧"
description: ""
date: 2022-01-06T13:17:37+01:00
lastmod: 2022-01-06T13:17:37+01:00
draft: false
images: []
menu:
  docs:
    parent: "openers"
---

Now, it should work (tested locally).

Ad 3)

[[social]]
  name = "Discord"
  pre = '<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" class="svg-inline--fa fa-discord" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="24" height="24"><path fill="currentColor" d="M524.5 69.84a1.5 1.5 0 0 0 -.764-.7A485.1 485.1 0 0 0 404.1 32.03a1.816 1.816 0 0 0 -1.923 .91 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.14-30.6 1.89 1.89 0 0 0 -1.924-.91A483.7 483.7 0 0 0 116.1 69.14a1.712 1.712 0 0 0 -.788 .676C39.07 183.7 18.19 294.7 28.43 404.4a2.016 2.016 0 0 0 .765 1.375A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.1 430.4a1.86 1.86 0 0 0 -1.019-2.588 321.2 321.2 0 0 1 -45.87-21.85 1.885 1.885 0 0 1 -.185-3.126c3.082-2.309 6.166-4.711 9.109-7.137a1.819 1.819 0 0 1 1.9-.256c96.23 43.92 200.4 43.92 295.5 0a1.812 1.812 0 0 1 1.924 .233c2.944 2.426 6.027 4.851 9.132 7.16a1.884 1.884 0 0 1 -.162 3.126 301.4 301.4 0 0 1 -45.89 21.83 1.875 1.875 0 0 0 -1 2.611 391.1 391.1 0 0 0 30.01 48.81 1.864 1.864 0 0 0 2.063 .7A486 486 0 0 0 610.7 405.7a1.882 1.882 0 0 0 .765-1.352C623.7 277.6 590.9 167.5 524.5 69.84zM222.5 337.6c-28.97 0-52.84-26.59-52.84-59.24S193.1 219.1 222.5 219.1c29.67 0 53.31 26.82 52.84 59.24C275.3 310.1 251.9 337.6 222.5 337.6zm195.4 0c-28.97 0-52.84-26.59-52.84-59.24S388.4 219.1 417.9 219.1c29.67 0 53.31 26.82 52.84 59.24C470.7 310.1 447.5 337.6 417.9 337.6z"></path></svg>'
  url = "https://twitter.com/TetrisHungary"
  weight = 20

Make sure to set width="24" height="24" in the svg definition.

Ad 4)

Policy Evaluator is a free tool to evaluate your website's Content Security Policy for security misconfigurations and recommendations.
Policy Generator is a free tool to generate a Content Security Policy.

Ad 5)
The new dark mode implementation respects both the user's global system setting and the switch (it sets data-dark-mode on the html element). See also:

./assets/js/darkmode-init.js
./assets/js/darkmode.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Couple questions. (Custom background, menu item order, custom social icon, CSP, default dark theme) #601

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Couple questions. (Custom background, menu item order, custom social icon, CSP, default dark theme) #601

Silgrond Jan 7, 2022

Replies: 1 comment · 2 replies

h-enk Jan 8, 2022 Maintainer

Silgrond Jan 8, 2022 Author

h-enk Jan 13, 2022 Maintainer

Silgrond
Jan 7, 2022

Replies: 1 comment 2 replies

h-enk
Jan 8, 2022
Maintainer

Silgrond Jan 8, 2022
Author

h-enk Jan 13, 2022
Maintainer