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
    james1.hicks Mar 1, 2019 10:35 AM

      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