AnsweredAssumed Answered

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

Question asked by james1.hicks on Mar 1, 2019
Latest reply on Mar 4, 2019 by james1.hicks

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

Outcomes