4 Replies Latest reply on Mar 4, 2019 12:49 PM by james1.hicks

    Is there a way to access the CSS of the page a custom add-on is housed in?

    james1.hicks Novice

      We're fine in creating and deploying custom add-ons, this question is more about where they are housed.

       

      I remember seeing one of the companies at the Aurea Experience have what looked like a custom add on take up the whole page, which suggests that they somehow were able to manipulate the CSS of the parent page (apps/<add-on> page).

       

      In the add-ons page (apps/<add-on>) there is a lot of white space we'd like to remove around the iframe so it looks more seamlessly integrated with Atlas.

       

      I see the ids and classes I want to modify but of course when I am just adding those classes to my .sass/.css files they do not do anything since those ids and classes aren't in the context of what we upload.

       

      Is there a way to access those ids and classes to change the styling?

       

      These are the three that I am mainly looking at adjusting:

       

      Original:

      #j-main{
        padding: 30px 20px 20px;
      }
      .j-app-canvas{
        background: #f5f5f5
        border: 1px solid #f5f5f5
      }
      .j-canvas-app-title{
        display: inline-block;
      }
      

       

      New:

      #j-main{
        padding: 5px 7px 20px;
      }
      .j-app-canvas{
        background: white;
        border: none;
      }
      .j-canvas-app-title{
        display: none;
      }
      

       

      Any insight would be amazing.

       

      Thank you,

      James