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

[danielabc (Daniela)]

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;

}

[carson]

Add custom content that only appears on your homepage

A very common situation you’ll find yourself in as a theme developer is the need to create a customization that only shows on the homepage of your community. You might add some HTML to the “After Header” section of your theme, which will then appear on every page. You can jump through some hoops in CSS to hide this everywhere except the homepage… but instead let’s utilize the Plugin API so your content is only loaded on the homepage to begin with. All of this can be added to the </head> (head_…

<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;
}