Skip to content
Grav 2.0 is officially stable. Read the announcement →
Themes & Styling

Bootstrap4 Theme Question

Solved by pamtbaau View solution

Started by Chris Moody 5 years ago · 11 replies · 662 views
5 years ago

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

5 years ago

@designplaybox.tech,

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

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.

5 years ago

@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 years ago

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.

5 years ago

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?

5 years ago Solution

@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?
5 years ago

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 %}

5 years ago

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) %}

5 years ago

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 https://learn.getgrav.org/17/themes/customization#custom-css

Regards

5 years ago

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.

5 years ago

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.

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 226 2 months ago
Themes & Styling · by Ian, 2 months ago
3 119 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 483 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 73 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 152 3 months ago