How to Make CSS Changes
When I build a site using Bootstrap Genesis as a starting point I modify (and rename) the Bootstrap Genesis for my project.
My primary thinking behind this is the parent theme, Genesis, does all the hard work of creating the theme. Bootstrap Genesis does the following:
- loads the Bootstrap CSS
- loads the Bootstrap JS
- changes some of the class names in the markup to use Bootstrap
- makes some small modifications to markup to use Bootstrap
This setup allows me to update the Genesis theme, without worrying about the Bootstrap Genesis theme.
There are a couple of ways to modify the theme
When building a project using Bootstrap Genesis, I like to use Sass to make my CSS a little more flexible. I override default Bootstrap variables in css/sass/supporting/variables-bootstrap-core-override.scss and create my own new variables in css/sass/supporting/variables-bootstrap-genesis.scss.
I also add new files and include them in css/sass/style.scss, so they are loaded as part of my final CSS.
I know some developers prefer to work without Sass.
If you want to modify the existing CSS, you can change style.min.css to style.css in lib/load-assets.php.
This will load the un-minified version of the CSS from css/style.css, which you can then modify directly.
You can add the a line like
wp_enqueue_style( 'my_bsg_css', get_stylesheet_directory_uri() . '/css/my.css', array(), $version );
to lib/load-assets.php and create a new CSS file at css/my.css. Then add your CSS to this new file (css/my.css)
See this WPBeginner article on Adding Custom CSS you your WordPress site.
Note: Personally, I don't love this method because I don't like storing my CSS in the database. I like to keep my CSS in an actual file.
Some people have told me they really want to keep their customizations outside of Bootstrap Genesis, so they can update to the latest version without breaking things. While this is a good way to think about themes, since Bootstrap Genesis is a Genesis theme, this updating can be done with Genesis. It is rare I release a Bootstrap Genesis update and if I do, it is likely a small improvement. When I build sites, I use Bootstrap Genesis as a starting point for a custom theme and the custom theme I create is not meant to be updated (only Genesis is updated).
My exceptions to this are some of my own websites (e.g. https://salferrarello.com) that, as of this writing, run Bootstrap Genesis unmodified. Since I'm running the theme unmodified if I do want to add any modifications (e.g. adding a favicon), I put them in a plugin. One could modify this plugin (or one like it) to load a CSS file from within the plugin directory, then keeping your CSS changes completely separate from the Bootstrap Genesis theme.