Editing Default Bootstrap Colors

Question

0

Editing Default Bootstrap Colors

Herb Parsons posted 1 Year Ago

Related to my previous questions about .less and Bootstrap, what file to I edit to override the default Bootstrap secondary color in my theme?

Michael Garrison · Answer 1 · 2023-03-31T16:48-07:00

0

Michael Garrison replied 1 Year Ago

There are a lot of “it depends” in this answer, be warned :)

If you’re using a theme provided in Rock, then probably the easiest thing to do is see see if there’s a theme configuration that offers what you want.

For instance, Admin Tools > CMS Configuration > Themes > Rock . On the left side are lots of colors you can modify. Be warned though, I don’t think that any of them are labeled a “secondary” color. But maybe you can look through the list of colors and find the one you want to change.

Otherwise if you’re using a custom theme, it depends on whether you’re letting Rock compile your LESS or not. If Rock is compiling LESS to CSS and your theme follows the pattern established in the core themes, you’d probably set any LESS variable values in the _variable_overrides.less file. (Then recompile the theme).

Otherwise if your custom theme uses an external compiler and/or only provides the final CSS to the theme directory, it’s hard to say- you’d need to follow whatever process your theme needed.

It might help if you share what color you mean (like, where do you see it used) and what theme you’re using).

Edit Answer

There are a lot of “it depends” in this answer, be warned :)If you’re using a theme provided in Rock, then probably the easiest thing to do is see see if there’s a theme configuration that offers what you want.For instance, Admin Tools &gt; CMS Configuration &gt; Themes &gt; Rock . On the left side are lots of colors you can modify. Be warned though, I don’t think that any of them are labeled a “secondary” color. But maybe you can look through the list of colors and find the one you want to change.Otherwise if you’re using a custom theme, it depends on whether you’re letting Rock compile your LESS or not. If Rock is compiling LESS to CSS and your theme follows the pattern established in the core themes, you’d probably set any LESS variable values in the _variable_overrides.less file. (Then recompile the theme).Otherwise if your custom theme uses an external compiler and/or only provides the final CSS to the theme directory, it’s hard to say- you’d need to follow whatever process your theme needed.It might help if you share what color you mean (like, where do you see it used) and what theme you’re using).

<p>There are a lot of “it depends” in this answer, be warned :)</p><p>If you’re using a theme provided in Rock, then probably the easiest thing to do is see see if there’s a theme configuration that offers what you want.</p><p>For instance, Admin Tools &gt; CMS Configuration &gt; Themes &gt; Rock . On the left side are lots of colors you can modify. Be warned though, I don’t think that any of them are labeled a “secondary” color. But maybe you can look through the list of colors and find the one you want to change.</p><p>Otherwise if you’re using a custom theme, it depends on whether you’re letting Rock compile your LESS or not. If Rock is compiling LESS to CSS and your theme follows the pattern established in the core themes, you’d probably set any LESS variable values in the _variable_overrides.less file. (Then recompile the theme).</p><p>Otherwise if your custom theme uses an external compiler and/or only provides the final CSS to the theme directory, it’s hard to say- you’d need to follow whatever process your theme needed.</p><p>It might help if you share what color you mean (like, where do you see it used) and what theme you’re using).</p>

<p>There are a lot of “it depends” in this answer, be warned :)</p><p>If you’re using a theme provided in Rock, then probably the easiest thing to do is see see if there’s a theme configuration that offers what you want.</p><p>For instance, Admin Tools &gt; CMS Configuration &gt; Themes &gt; Rock . On the left side are lots of colors you can modify. Be warned though, I don’t think that any of them are labeled a “secondary” color. But maybe you can look through the list of colors and find the one you want to change.</p><p>Otherwise if you’re using a custom theme, it depends on whether you’re letting Rock compile your LESS or not. If Rock is compiling LESS to CSS and your theme follows the pattern established in the core themes, you’d probably set any LESS variable values in the _variable_overrides.less file. (Then recompile the theme).</p><p>Otherwise if your custom theme uses an external compiler and/or only provides the final CSS to the theme directory, it’s hard to say- you’d need to follow whatever process your theme needed.</p><p>It might help if you share what color you mean (like, where do you see it used) and what theme you’re using).</p>

Save Cancel

Herb Parsons · Answer 2 · 2023-04-03T08:28-07:00

0

Herb Parsons replied 1 Year Ago

Thanks for responding.

In this case, I was trying to edit the background color of a panel, which appeared to default to the background color of the theme (I'm using the Compass theme from 9Embers). But, I figured out how to do it without doing a lot of modifications. I just used the Bootstrap defined variables:

Using "bg-blue-700" gave me the background color I wanted.

Question

0

Editing Default Bootstrap Colors

0

0