How to make the CSS apply to ONLY the modified forum homepage?

Development

AI-generated summary

Solution to Apply CSS Only to Modified Forum Homepage

The original poster, danielabc, wants to apply a CSS modification only to the homepage, but it’s currently affecting all pages. carson provided a solution that involves adding a custom class (custom-homepage) to the html tag when the user is on the homepage.

To achieve this, carson suggests adding a JavaScript code to the head section of the HTML, which uses the api.registerConnectorClass method to create a custom component that checks the current URL and adds or removes the custom-homepage class accordingly.

Once the custom-homepage class is added to the html tag, carson recommends modifying the original CSS code to target only elements with the custom-homepage class:

.custom-homepage #main-outlet-wrapper {
    margin-top: -38px;
}

This solution allows the CSS modification to be applied only to the modified forum homepage.

1

I’m making a modification and I want this modification to only work on the HOME, but it’s taking all the pages, how can I leave it only on the home?

i used this

 #main-outlet-wrapper {
    margin-top: -38px;

}
2 
<script type="text/discourse-plugin" version="0.8">
  // This is the plugin outlet, followed by a custom name for the component
  api.registerConnectorClass("below-site-header", "custom-homepage", {

    // Setting up our component
    setupComponent(args, component) {

     // Next we're getting the site setting 'top_menu',
     // splitting the values into an array,
     // and adding a leading slash
     var topMenuRoutes = 
        component.siteSettings.top_menu.split('|')
        .map(function(route) {return '/' + route});
      
     // The first page listed in the 'top_menu' setting is your homepage
     // lets assign it to a variable
     var homeRoute = topMenuRoutes[0];
  
     // This calls our code whenever the page changes
     api.onPageChange((url) => {

        // Check if we're on the homepage 
        if (url === "/" || url === homeRoute ){ 
          // If it's the homepage add the 'custom-homepage' class to HTML tag
          // and set 'displayCustomHomepage' to true
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          // If we're not on the homepage remove the class
          // and set `displayCustomHomepage` to false
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
      });
    }
    
  });

</script>

^ Add this to your head to add a .custom-homepage class to your body tag when you’re on the homepage, then → 

.custom-homepage #main-outlet-wrapper {
    margin-top: -38px;
}