Bootstrap4 Theme Question

Support Themes & Styling
1

HI all,

I’m rather new to Grav, however I like to think I’m familiar with BootStrap. Is there a file I can modify that will allow me to control background-color, background-image and the like?

Thanks,
Chris

2

@designplaybox.tech,

  • Would you mind sharing what you have tried sofar?
  • Have you come across the documentation on Themes, especially the chapter on Customization?
3

At first I was trying to only manipulate the md file, however I suppose I am actually going to need to modify files in the themes/bootstrap4/partials/ to get what I want.

4

@designplaybox.tech, depends on what you want to achieve…

  • *.md is purely for content
  • templates/* is for layout
  • *.css is for styling

And please note, you shouldn’t make any changes to files below /user/themes/* or /user/plugins/* . These files will be overridden when a new version of the theme/plugin gets released. Always use Theme Inheritance.

5

OK, that makes sense, like a child theme for WordPress.
Wanting to change the background color, and other items. So I guess I have to make a theme inheritance.

6

So I’m working on a Grav based site at thestrange.show, it now has an a theme that is inherited from the Bootstrap 4 theme. I want the whole background to be black, but it keeps putting purple on it. How do I get rid of the purple?

7

@designplaybox.tech,

  • Remove lines 165, 166, 167 from file /user/themes/thestrange/strange.css
  • To be more in line with how themes are structured, move strange.css to /user/themes/thestrange/css/strange.css and adapt the template that loads it.

Question:

  • How is strange.css being loaded?
8

Thanks Pamtbaau,

I’ll have to look at those lines. Currently this is my CSS loading block:

{% block stylesheets %}
{% do assets.add(‘theme://css/font-awesome.min.css’, 99) %}
{% do assets.add(‘/user/themes/thestrange/strange.css’, 98) %}
{% endblock %}

9

Thanks, I stopped those lines from causing issues with my site, and moved the CSS to where it should be, and made it so the block line now reads:

{% do assets.add(‘theme://css/strange.css’, 99) %}

10

Hello and welcome @designplaybox.tech
I think it is not necessary to touch the stylesheets block if following pamtbaau recommendation on Theme inheritance.

I worked with several skeletons-themes and if I create an inherited theme with themes/mytheme/css/custom.css and I do all changes in custom.css Grav goes to that file and override the main theme style with the ones inside custom.css without the need to do anything with the stylesheets block because “the Asset Manager handles this for us”, as per the documentation Customization | Grav Documentation

Regards

11

Hi Joe,

I tried that, but seems the Bootstrap theme didn’t support it. So basically making my own ‘child’ theme so it looks how I want it to look.

12

I see, I have used Deliver, Mache and Quark themes and all of them works with custom.css. Good to know that about Bootsrap, it is understandable, it is not recently updated.
Thanks and regards.