FlowingCode/AppLayoutAddon

Can not use own CSS when using the Addon

DanielHons opened this issue · 2 comments

Hello guys,

I am not entirely sure that this is the right place to report an issue, so please do not blame me if I am wrong.

I startet using the Addon in my own project, where i have a custom css-file applied to render some items.

After wrapping my content in the AplLayout my custom style does not take effect. I know that the css file is loaded from server.

Here is a part of the css code:

:root{
background-color: lightgreen;
}

div.hoffice-item-list {
background-color: indianred;
}

.list-item {
font-weight: bold !important;
border: 1px solid #888888 !important;
padding: 3px !important;
margin-top: 5px !important;
box-shadow: 2px 3px #AAAAAA !important;
background-color: darkgreen !important;
}

The root-style IS applied to the whole inner content (id="content") from Addon.
But any other rule i try to specify is just ignored.

Any idea what i might be doing wrong?
Thank you

Hi! ... first of all, sorry for taking so long in answering. One thing that I was wondering, is if those rules are meant to impact elements that exist inside the shadow dom of a given web component. If so, then it won't work, because a web component will only let you modify the css of some internal things. For more info about this feature, this is a recommended reading: https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/
Can you check that?

Closing this one given that there was not recent feedback.