CSS is not working in theme

MHussain8 · ‎Aug 30, 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ content.heading }}</title>
  
  
    {{ require_css(get_asset_url('../css/style.css')) }}  
  
      {{ standard_header_includes }}
</head>
<body>
  <header class="nav-bar">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </header>
  <main>
    {% block content %}
    {% endblock %}
  </main>
  <footer>
    <p>&copy; 2024 Modern Elegance Theme. All rights reserved.</p>
  </footer>
      {{ standard_footer_includes }}
</body>
</html>

This file contains CSS added which is not working

And the css I added is in the file below

/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/* Base styles */
body {
  font-family: "Roboto", sans-serif;
  background-color: #f5f5f5;
  color: #333;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  color: #0077cc;
  margin-bottom: 20px;
}

/* Navigation styles */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nav-bar a {
  color: #0077cc;
  text-decoration: none;
  margin: 0 15px;
  font-weight: 600;
}

.nav-bar a:hover {
  color: #ff6600;
}

/* Hero section */
.hero {
  text-align: center;
  padding: 100px 20px;
  background-color: #0077cc;
  color: #fff;
  background-image: linear-gradient(120deg, #0077cc 0%, #ff6600 100%);
}

.hero h1 {
  font-size: 50px;
  margin-bottom: 20px;
}

/* Buttons */
.button {
  display: inline-block;
  padding: 15px 30px;
  color: #fff;
  background-color: #ff6600;
  border: none;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: bold;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #0077cc;
}

GRajput · ‎Sep 2, 2024

Hi @MHussain8

In HubSpot themes, CSS files are typically stored in the theme's CSS folder. Ensure your style.css file is located in this folder.

However, double-check the path to your CSS file. It should be relative to the theme root directory. Also, you can create any page and share it with us.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!

Gaurav Rajput
Director, MarTech( Growth Natives)

Book a meeting

MHussain8 · ‎Aug 30, 2024

I have created a theme with three pages home, about and contact the html of all three is showing but the css is not getting attached in them the code i sent you is from the base file The base file that collects all the pages I have

What other details do you need me to send you to correct this file

Jaycee_Lewis · ‎Aug 30, 2024

Hey, @MHussain8 👋 Thanks for sharing your code. But you didn't tell the community much about what you're expecting to happen. Without seeing the page live or having more details, it's challenging for our community members to assist you.

I have some basic troubleshooting suggestions for you since we don't know what you've already tried on your own:

File Path: Ensure the path in {{ require_css(get_asset_url('../css/style.css')) }} is correct.
Caching: Add a query string to the URL to force a refresh — '?hsDebug=true&hsCacheBuster'
Check Console: Look for errors in the browser’s console indicating issues with loading the CSS file.
Inspect Elements: Use developer tools to verify if the styles are applied.

Thanks for the additional information! — Jaycee

Jaycee Lewis

Developer Community Manager

Community | HubSpot

CMS Development