• Problems styling bootstrap starter theme

    Hello! I’m fairly new to web programming, tough I’ve been developing mobile for a long time already. I was trying to set up a WordPress page using the Bootstrap Starter Theme for WordPress.

    Steps I followed before my problem:
    1. I downloaded from https://them.es/starter-bootstrap/ a theme with my custom settings.
    2. I added the new Theme to my WordPress page, and activated it
    3. I used that same file on my local machine, and installed all the npm dependencies
    4. I run the npm run watch command

    After all these steps, I modify the main.scss file, for example creating a color and updating the colors map according to the documentation.

    //4. Include any default map overrides here
    //Create your own map
    $custom-colors: (
    "testcolor": #900
    // Merge the maps
    $theme-colors: map-merge($theme-colors, $custom-colors);

    I let watch to compile all the files correctly, and after that, I copy all the files to the “themes” folder inside my wordpress folders.

    The problem is that if I try to use this new value on a page, for example using bg-testcolor in a nav, the variable won’t get used. If I inspect the code, the values that I see being used are from _root.scss, and it won’t have this new testcolor. If I continue looking at the inspector, the themes/mytheme/assets/dist/main.css will have the value correctly defined, but it is just not existing on the inspected code.

    Did I forget to configure anything?

    I hope I made myself clear, maybe this wasn’t asked the correct way. Thanks!

    Seems like importing
    <link rel="stylesheet" href="wp-content/themes/my_theme/assets/dist/main.css">
    In my header.php‘s header makes the page indeed use the variable I want of the compiled main.css file. I’m wondering if I missed some step on the installation process and the WordPress Theme is not using the correct variables? Ehitherway, now it feels like it’s working!!

    Unresolved Resolved

    1. davidaz Avatar

      Can the problem be due to not installing the npm install dependencies on the host machine, and just compiling “locally” on my own pc? Just wondering

    2. them.es Avatar

      npm only needs to be installed on your local machine. And your custom-colors map code seems to work fine – the classes .bg-testcolor and .text-testcolor are successfully compiled on our test system as well.

      – Did you delete your browser cache and/or increase the theme version variable in style.css?
      – Alternatively you could try to define the new background-color directly via the classname e.g.

      .navbar { @extend .bg-testcolor; }

    3. davidaz Avatar

      Hello again,
      Indeed updating the style.css version seems to be the solution. Thanks for the quick response and of coruse for the great theme. Thanks to it I can do whatever I want 😀

      1. them.es Avatar

        Glad that your issue has been resolved and happy to read that the Starter theme is useful for you 😀

    Leave a Reply