okkur / syna

Highly customizable open source theme for Hugo based static websites
https://syna.okkur.org/demo/
Apache License 2.0
250 stars 134 forks source link

Cleaner documentation about color customization #750

Closed Toasterson closed 4 years ago

Toasterson commented 4 years ago

feature

I would like to customize the Button color but the documentation only goes as far as saying that it is possible in config.toml but not how.

I would like to have the documentation section under https://about.okkur.org/syna/docs/development/#styles with two three examples. However I would first need to know how that looks like.

My best assumption below did not help

[assets]
    [styles]
        [bootstrap]
            danger = "#ff7149"
stp-ip commented 4 years ago

Rereading the docs this could definitely be clearer. Specific buttons can't be changed, but the general color scheme can. Happy for you to add the docs as you might have a good sense on what would have helped you right away. The docs are with our exampleSite as well: https://github.com/okkur/syna/tree/master/exampleSite/content/docs

Here is an example from our exampleSite config: https://github.com/okkur/syna/blob/master/exampleSite/config.toml#L59

Toasterson commented 4 years ago

Ah that was the hint I needed. Turns out it works with single buttons in the palette e.g you can change just danger to be what you want and the others still work.

Let me write something about that once I adjusted all the defaults.

There seem to be a few things in config.toml that are not in the docs. I don't know if that was to prevent double writing, but a link to that file is definitely helpful.

stp-ip commented 4 years ago

Anything that feels not documented enough might be that way. So happy for contributions. One might feel it is clear due to having worked with the implementation for a few days.

It works for a single color yes, but not for single items. So all items using the color "danger" than switch to your new configured color. If you want to do something specific you can add your own CSS or overwrite a specific partial within your own website using hugo's layout lookup rules. https://gohugo.io/templates/lookup-order/#hugo-layouts-lookup-rules-with-theme

IvanTurgenev commented 4 years ago

Anything that feels not documented enough might be that way. So happy for contributions. One might feel it is clear due to having worked with the implementation for a few days.

It works for a single color yes, but not for single items. So all items using the color "danger" than switch to your new configured color. If you want to do something specific you can add your own CSS or overwrite a specific partial within your own website using hugo's layout lookup rules. https://gohugo.io/templates/lookup-order/#hugo-layouts-lookup-rules-with-theme

what do you recommend css or look up?

stp-ip commented 4 years ago

Depends on the use case.

CSS is less likely to break as it will only overwrite design choices not html structure or logic.

For more advanced customizations or creating your own fragments the overwrite possibilities through the hugo lookup rules is best.