search

skohub-io / skohub-vocabs

A lightweight tool to publish SKOS Vocabularies
https://skohub.io/
Apache License 2.0
34 stars 25 forks source link

Document UI configuration possibilities #188

Closed acka47 closed 1 year ago

acka47 commented 2 years ago

How to configure for example header content, colours, fonts

sebilasse commented 2 years ago

See my PR for a beginning, I think CSS Variables, here variables.js is an easy way to go. Live at https://redaktor.github.io/vocab/

kaimertens commented 1 year ago

The following customizations can be made:

  1. Changing the Logo, under src/components/header.js
  2. Upload a new Logo under src/images
  3. Changing the Fonts, upload under src/fonts, import and CSS-Changes at src/components/layout.js
  4. Changing the Colors, take a look at src/styles/variables.js
kaimertens commented 1 year ago

Note to 4.:

There are no colors in the templates. We only use variables (src/styles/variables.js). We use the following default colors / variables:

skoHubWhite: 'rgb(255, 255, 255)', skoHubDarkGreen: 'rgb(15, 85, 75)', skoHubMiddleGreen: 'rgb(20, 150, 140)', skoHubLightGreen: 'rgb(40, 200, 175)', skoHubThinGreen: 'rgb(55, 250, 210)', skoHubBlackGreen: 'rgb(5, 30, 30)', skoHubAction: 'rgb(230, 0, 125)', skoHubNotice: 'rgb(250, 180, 50)', skoHubDarkGrey: 'rgb(155, 155, 155)', skoHubMiddleGrey: 'rgb(200, 200, 200)', skoHubLightGrey: 'rgb(235, 235, 235)',

To change a color, the RGB values can be adjusted. HEX codes are also possible. The names of variables should only be changed if you use "search and replace" to adapt the names also in the templates.

kaimertens commented 1 year ago

Note to 3.:

We use fonts that are self-hosted.

If you want to change a font, please upload the new font to the src/fonts folder. You can get fonts from Google Fonts (download / free of charge).

Then you have to adjust the CSS at src/components/layout.js. First: Change the import-path at line 18 and following. Secondly: Change @font-face at line 80 an following. Third: Change the font-family in the body-tag, at line 125 an following. That's all.

kaimertens commented 1 year ago

Note to 1./2.:

The logo consists of two parts. The first is a graphics file. And the second is simply text.

If you dont want to use the text, just delete <span class="skohubTitle">SkoHub Vocabs</span> in src/components/header.js. Then the graphic logo remains.

If you dont want to use the graphics file, just delete the -Tag in n src/components/header.js. Then only the text remains.

If you want to change the graphics file, you can upload a new file to src/images. Then you need to change the path in src/components/header.js at line 8 "import skohubsvg from ...". The new logo doesn't scale correctly? Please check the proportions in line 28 (width and height). That's all.

kaimertens commented 1 year ago

@acka47 can you please add this documentation to the README.md file? I don't want to intervene in your structure and I don't know if you might want to adjust the wording. Thank you!

acka47 commented 1 year ago

@sroertgen Can you please take this?

sroertgen commented 1 year ago

@acka47

I will document this in the README.

Then we can integrate this into #185 to make it configurable via the config file.