¿Cómo hacer que el CSS se aplique SÓLO a la página de inicio del foro modificada?

[danielabc (Daniela)]

Estoy haciendo una modificación y quiero que esta modificación solo funcione en la PÁGINA PRINCIPAL, pero está afectando a todas las páginas, ¿cómo puedo dejarla solo en la página principal?

Usé esto

 #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 content 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 use a Discourse theme to create a component with content that is only visible on your homepage. If you’re unfamiliar with Discourse themes …

<script type="text/discourse-plugin" version="0.8">
  // Este es el outlet del plugin, seguido de un nombre personalizado para el componente
  api.registerConnectorClass("below-site-header", "custom-homepage", {

    // Configuración de nuestro componente
    setupComponent(args, component) {

     // A continuación, obtenemos la configuración del sitio 'top_menu',
     // dividimos los valores en una matriz
     // y agregamos una barra inicial
     var topMenuRoutes = 
        component.siteSettings.top_menu.split('|')
        .map(function(route) {return '/' + route});
      
     // La primera página listada en la configuración 'top_menu' es tu página de inicio
     // la asignamos a una variable
     var homeRoute = topMenuRoutes[0];
  
     // Esto llama a nuestro código cada vez que la página cambia
     api.onPageChange((url) => {

        // Comprueba si estamos en la página de inicio 
        if (url === "/" || url === homeRoute ){ 
          // Si es la página de inicio, agrega la clase 'custom-homepage' a la etiqueta HTML
          // y establece 'displayCustomHomepage' en true
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          // Si no estamos en la página de inicio, elimina la clase
          // y establece `displayCustomHomepage` en false
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
      });
    }
    
  });

</script>

^ Agrega esto a tu head para agregar una clase .custom-homepage a tu etiqueta body cuando estés en la página de inicio, luego →

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