how to add css ?

Hey there,

You can add custom CSS to your theme using Advanced CSS Editor. Hope it helps.

If you want to include your own stylesheet, then you need to create a child theme of Understrap, and then enqueue your custom stylesheet in your child theme’s function.php file (see the example where it calls wp_enqueue_style). Probably easier to use Suyogya’s suggestion of installing a custom CSS plugin.

Hi @ttthien,

I´am the author of UnderStrap.
To add your own CSS you might edit the css/theme.min.css file manually.
It is not recommended, because you will loose all changes during an update.

You can download the dev version here:
https://github.com/holger1411/understrap
and compile your own css file using sass.
If there are updates you just have recompile the css file and you are good to go.

Or you download the ready-made child theme here:
https://github.com/holger1411/understrap-child
and enqueue your own css file in the functions.php (like @crouchingbruin says) or use again the sass sources.
Using the child theme with your own css file is recommended if you are not familiar with sass.

Using the child theme and compile your own css via sass is the best and most recommended way…if you know how to work with sass.

Hi!
If you edit the scss files you need to compile them to css.
Do you do that?

If no:
The theme itself comes with a gulp task for it.
Run “gulp watch” and it compiles scss to css automatically to css every time you change something.
But you also might use any other type of SASS compiler methode (like scout for mac etc.)

if yes: What error message do you receive?

Of course you can just add some own CSS to the theme.min.css, or you might use the WP “add custom css” customizer option which is supported by UnderStrap.

That makes sense for very small “quick & dirty” changes.

But if you wanna add complex stylings /complexe changes based on the Bootstrap sources, SASS is much easier.

UnderStrap based on Bootstrap. Bootstrap used SASS to generate CSS.
SASS allows you to use variables, calculations and other cool stuff, like in a programming language.

For example if you change the primary color you just need to adjust one variable. That will be used in about hundered css classes, even with calculations of color variations, shadows, borders, :hover styles etc.
All that work is done automatically, just by compiling scss to css. It takes about 3 seconds to change the variable and compile it to plain css.

If you do it manually it might take hrs. And you have to do some extensive “search&replace” sessions hoping everything is fine and nothing is broken after it. And after it you have to test everything.
And you have to do all the calculation work on your own. For example a slightly darker variation of your primary color is used for the :hover effect on a button background. You did not find it by “search & replace”, you need to stumble upon it.
SASS can caluclate the color variation from the inital variable and add it to the right class. All automatically.

If you use a plugin you have to add all the hundered classes to it. And you have to maintain it on your own. And thats just for changing the primary color in all spots.

It makes no sense to load hundereds of classes to define one color as X, and than load again hundereds of classes from your plugin just to say “X is not X but Y for now”.
With SASS you just replace X with Y on your local computer, than upload the compiled CSS file and none of your visitors will ever see/load X.

Here is a good article about the advantages of SASS: http://alistapart.com/article/why-sass

Hi, thank you for help, i followed documentation on understrap website, and everything is ok but no new style is applyed, links don’t change color. What coul be the problem? Thank you.

edit:
i also got error after gulp watch
`Error: It’s not clear which file to import for ‘@import “theme/theme”‘.

• This reply was modified 9 years, 2 months ago by z0ran.

fresh theme install and no error but i can’t edit css still, let me think about this and learn a bit more about sass i guess… Thank you very much.

edit:

ok, thing are working, i tried something simpler like:

body {
background-color: red;
}

and it worked, but wheni opened in firefox, i don’t understand why chrome didn’t show changes, i had this experience before with chrome i guess.

• This reply was modified 9 years, 2 months ago by z0ran.