Easy way to select colors in Bootstrap4 (and Bootstrap4 Open Matter) theme?

Is there a quick-and-dirty way of changing the colors (and styles) in the Bootstrap4 theme by @djamil (actually, the Bootstrap4 Open Matter theme, relying on inheritance, as described at @paulhibbitts ?

In the theme css directory, I see a custom.css file with the comment "Put your custom CSS in this file". As an experiment, I copied and pasted the Bootswatch Flatly css from https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css as an append to the comment. Even after reloading all caches, this doesn't seem to have had any impact.

I had previously used the Tikva theme, and got spoiled by the easy ability to select a premade theme from Bootswatch. (I'm a power user rather than a developer or designer, so I really try to not muck around with CSS!)

Hi @daviding, that should work but you also need to turn off loading Bootstrap CDN from the Bootstrapper Plugin.

Once you do that, try re-loading the page and see if your page updates as expected. I will also take a look at what Tikva provides🙂

Feel free to connect via Grav Slack room or Twitter (hibbittsdesign) if you have any further questions about Bootstrap4 Open Matter)

@daviding @paulhibbitts

Changing the style seems to be working pretty well after importing the above mentioned Bootswatch Flatly css... Fonts and color of header have clearly changed.

• I installed the theme Bootstrap4 Open Matter into existing blog skeleton and followed the setup.
• I copied the Bootswatch Flatly css mentioned above into '/user/themes/bootstrap4-open-matter/css/custom.css'.
• Refreshed the page.

Here are the before and after:

Before:

After:

Thanks for testing things out @pamtbaau! @daviding I've done a bit of exploratory work on adding bootswatch theme choices - here is what I've got so far:

Does this look of interest to you as a possible Bootstrap4 Open Matter theme update?

@paulhibbitts Wow, yes, having selectable theme colours would make life so much easier.

I've been leaning on the Bootswatch colours, because I'm not great with setting colour palettes in an aesthetically pleasing way. (I have friends and relatives who are great with colours, but I hate having to ask when I'm getting a basic web site up).

@paulhibbitts I'm quite interested in this as well. I'm going to move over to this theme from the Quark Open Publishing theme as I'm looking to incorporate Bootstrap 4 into my design. I just picked up PhpStorm so I can wrangle with some of this here at the ranch perhaps more easily.

@daviding Thank you for posting this topic. You nailed inquiring about pretty much what I was looking at in this theme. 😀

Thanks for the feedback @daviding @gnarly.rocks, I think this would be quite a helpful feature too. I will continue work/testing and expect to be able to release an update with this option pretty soon.

I am also tending towards local Bootstrap/Bootswatch files, so if needed further adjustments could be made etc.

Getting closer @daviding @gnarly.rocks:
https://cl.ly/650e16626ec3

Ok, theme update is now released! Please try it out and let me know how it goes.

@paulhibbitts Amazing! In Grav, I went to Themes ... Checked for Updates ... and the new function immediately came appeared.

I'm now cycling through some of my favourites. It's great to have some much variety to choose from.

One quibble that must have snuck into the Bootswatch revisions .... I was using Flatly, and the topbar navigation links aren't white, but in the minty green (i.e. the same as links in the footer). This isn't true in other themes like Sandstone and Spacelab, so I guess it's buried somewhere in the CSS, and Flatly will eventually get revised.

@daviding You could try putting the following in your Custom CSS file re: white links in NavBar:

.bg-primary .navbar-nav .active>.nav-link {
    color: #FFFFFF !important;
}

There might still be a few outstanding issues with how everything works together. I've also just released a new update that removed several unused Bootswatch theme titles (they were no longer in the Bootswatch repo).

@paulhibbitts Thanks for your responsiveness.

Slightly off topic .... Where does the favicon get set in the Bootstrap4 (or Open Matter) theme? In a thread on "Where would you put favicon’s? themes or user/pages/images?", there seems to be a consensus about putting it in /theme/images/.... in a discussion of the Antimatter theme. I also notice that the new default Quark theme also has an images subdirectory, but that directory doesn't exist in Bootstrap4.

I have Grav installed in a subdirectory (not root), and have put favicon.ico and favicon.png both in the root and subdirectory, but that's not showing up in my Chrome browser tab.

Hi @daviding, try /bootstrap4-open-matter/images/ or in the same folder for your inherited theme (you will need to make a folder for either)

Please let me know if that works.

@paulhibbitts Thanks, creating the /bootstrap4-open-matter/images/ folder and putting icons there works.

As a nudge to other newbies, you might add that directory to the standard package in a future push.

I hadn't appreciated the recent intricacies of multiple .png and .ico files, and created three, based on https://github.com/audreyr/favicon-cheat-sheet

That's a great idea, I will include a default folder and favicon next release!