Allow custom colors for top nav bar

[damithc]

v1.1.10

Current: there are only two choices for top nav bar color: black and grey

Suggestion: Allow custom colors

Justification: To create a lightweight theme effect on sites. Especially useful when instructors work with several variations of the same site and want an easy way to distinguish between them.

[acjh]

I feel that this one-off customisation should be done with custom styling in the site's own CSS file, rather than supported by MarkBind or MarkBind/vue-strap.

There is little value that MarkBind can add, as compared to a request like #69 (Support custom boxes).

[damithc]

I feel that this one-off customisation should be done with custom styling in the site's own CSS file, rather than supported by MarkBind or MarkBind/vue-strap.

Fair point. The counter-point is that every website would want to brand itself. Although it is once-per-website, it might be used by most markbind sites.

If we leave it as DIY, we might still want to give guidance in documentation e.g., which class to override? Note that our target users are instructors. Until we have a WYSIWYG editor, we are forced to assume the target users have (or can learn) some basic programming skills but we cannot assume web programming expertise.

It also depend on the cost of the feature too.

For the time being, for my own sites, I'm OK as long as I'm told how to override the color :-)

[acjh]

.navbar {
    background-colour: green !important;
}

.navbar * {
    color: black !important;
}

[damithc]

Thanks @acjh Works after fixing typo background-colour → background-color
Is it possible to give different colors to main text and drop-down text?

[yamgent]

Dropdown:

.dropdown-item {
  color: brown !important
}

main text

Main text as in the website page content itself?

[damithc]

Thanks @yamgent

Main text as in the website page content itself?

No. I meant text in the main nav bar vs text in the dropdown items. Your solution is probably what I was looking for. Will try it out.

[acjh]

If you don't want to affect other dropdowns:

.navbar .dropdown-item {
  color: brown !important
}

[damithc]

I've tried using these on the website-base. While they work, it is quite a lot of css code to theme the whole navbar to a different color, including text and icons to match, not forgetting the hover over colors, boarders, shadows etc. I didn't manage to make it as good-looking as the default theme. I guess theming is harder than it appears at first :-p

[acjh]

Indeed. But there is little value that MarkBind can add.

MarkBind should go for pleasant styling, but theming does not need further support in the codebase.
#363 (Support adding custom classes to any vue-strap component) was a step in the right direction.

Theming can be a topic to be considered when doing #371 (Give examples for adding custom classes).

[damithc]

I guess what I was wishing for here is to be able to specify a base color and the whole nav bar to change to match the color, i.e., almost like inbuilt themes for nav bar where I specify a color instead of a theme name. I guess that requires a lot of work behind the scene.

[acjh]

If you mean like Bootstrap 4's navbar-dark bg-dark classes, that can be done purely in CSS.
Not a lot of work, but custom theming has not a lot of value either (unlike default/dark themes).

We can create an example theming file though.

[damithc]

If you mean like Bootstrap 4's navbar-dark bg-dark classes, that can be done purely in CSS.

I guess. More specifically, I wish I could specify just a base color (maroon?) and get a navbar like the one below. i.e., MarkBind figures out all the matching color variations for text, outlines, shadows, hover over etc.

Not a lot of work, but custom theming has not a lot of value either (unlike default/dark themes).

I agree there is not much real value. But there is some perceived value because people don't want their site to look like everyone else's.

In any case, this is not an urgent thing. At the moment we are not pushing to get more users. :-p

[acjh]

White text is what navbar-dark is for. Changing the colours in the input though...