Modify bootstrap bg-primary colour

Beginners
1

In Pinegrow 6.1 Pro I want my bg-primary colour to be for example red not blue as currently. I am following documentation at: https://pinegrow.com/docs/bootstrap-visual-editor/customize-bootstrap-4-themes/

But when I do this: Click on the _variables.scss to open it in a separate tab within the Style panel.

However when I do, my -VARIABLES.SCSS tab is empty (apart from ‘Add new…’), unlike the image on the instructions page, where you can see all the theme colours.

[however if I click on </> to the right of _VARIABLES.SCSS, I can see the code for the css sheet in the code panel, so I know it exists - it begins:

// Variables
//
// Variables should follow the $component-state-property-size formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Color system
// scss-docs-start gray-color-variables
$white: #fff !default;
$gray-100: #f8f9fa !default;

etc…

So I am stuck and cannot continue following instructions.

Can anyone guide me please to know how to get the tags to show in the Stylesheets tab?

2

Hi @davidxtaylor,
Strange. Try saving the project and then restarting Pinegrow. Also, can you post a screenshot of the Style panel with the _variables.scss tab opened?
Thanks,
Bob

3

Many thanks Bob. Closing and re-opening cured the issue and the css tags now appear and can be edited per the tutorial.

1 Like