fuel9 / DisplayMonkey

Display Monkey digital signage solution
Other
126 stars 50 forks source link

Custom CSS #97

Closed jre08 closed 5 years ago

jre08 commented 5 years ago

I'm trying to apply some custom style to a div class found in an HTML Frame, however the style doesn't apply when I refresh the page. If you add the CSS/style as an inline style it works. I'm putting the custom CSS/Style in the ~/styles/custom.css file.

THIS WORKS

div class="w3-content w3-section" style="max-width:1070px; max-height:760px"> img class="mySlides" src="http://URL_Website/pics/slide1.jpg" style="width:100%"> img class="mySlides" src="http://URL_Website/pics/slide2.jpg" style="width:100%"> img class="mySlides" src="http://URL_Website/pics/slide3.jpg" style="width:100%"> /div>

* THIS DOES NOT ** CSS/Style is placed in ~/styles/custom.css file found in the DisplayMonkey folder app folder

div class="w3-content w3-section" style="max-width:1070px; max-height:760px"> img class="mySlides" src="http://URL_Website/pics/slide1.jpg" style="width:100%"> img class="mySlides" src="http://URL_Website/pics/slide2.jpg" style="width:100%"> img class="mySlides" src="http://URL_Website/pics/slide3.jpg" style="width:100%"> /div>`

The browser is picking up the style .. I can see it in the developer console in the browser.

Any ideas why this won't apply to my class?

rgold18 commented 5 years ago

I can't tell if you're referencing the stylesheet in the HTML or not. That would be an important factor. You need a reference to the stylesheet. Furthermore, referencing the stylesheet removes the necessity to have the style attribute at the end of your image tags. Lastly, check that your w3-content and w3-section classes aren't adding any img stylings as this would override your custom CSS.

It should look like this in your stylesheet:

img .className { width: 100%; other stylings... }

Then, in your HTML: div class="w3-content w3-section" style="max-width:1070px; max-height:760px"> img class="mySlides" src="http://URL_Website/pics/slide1.jpg"> img class="mySlides" src="http://URL_Website/pics/slide2.jpg"> img class="mySlides" src="http://URL_Website/pics/slide3.jpg"> /div>`

Outside of the general HTML/CSS language, I'm unsure of how DisplayMonkey handles it.

jre08 commented 5 years ago

I found out this is a caching issue. Once I deleted browser cache the CSS style would take affect. However if I change anything in the CSS file; I again have to delete browser cache to get the changes to take. I guess since it being InLine code in the first part it will allow changes to be made with out having to delete cache.

Problem Solved (Sort of) :)

psined1 commented 5 years ago

Hi, glad you were able to find the solution that works for you. The CSS caching is by browser design and is beyond DM control. Closing the ticket.

psined1 commented 5 years ago

As an alternative, you may want to consider a custom frame template with modified in-line styles.

jre08 commented 5 years ago

I haven't looked into custom Templates; although I know they are their.