Custom Theme Won't Load Images - Based on Azure Theme

[Carbongrip]

Hello everyone,

 

I have an interesting problem, when I load my custom theme from the dynamix colour theme drop down in settings my theme takes effect however it doesn't load any of the icons from the fontawesome or docker-icon fonts. Why?

 

I just started this quest to build this theme based on the included Azure theme so I am very early on and this is the first problem I have ran into.

 

Here are the steps I have taken to make my theme,

 

1. copied the default-azure.css and dynamix-azure theme to /boot

2. shutdown and access the flash drive contents, moving both from /boot to my desktop.

3. renamed them default-mytheme.css and dynamix-mytheme.css

4. made my changes to the css and saved

5. made a copy from my desktop to /boot on the flash drive

6. boot unraid

7. moved default-mytheme.css and dynamix-mytheme.css from /boot to /usr/local/emhttp/plugins/dynamix/styles/

8. went to settings and changed dynamix colour theme drop down to mytheme

9. It loads fine just without the icons/images/font, see image below.

 

 

Any idea why this happens? If I use the drop down and switch back to Azure the icons/images/fonts come back. Please help!

 

Cheers!

[Carbongrip]

Update, this appears to be turning into more of a bug report, cause is in the html. For some reason html has hard coded style for azure theme, once I added the missing hard coded style to my css file it works. Am I wrong in saying this code should be removed from the html file in a future unraid and placed into the azure css instead?

 

when my theme runs

<style>
.inline_help{display:none}
.upgrade_notice{position:fixed;top:1px;left:0;width:100%;height:40px;line-height:40px;color:#E68A00;background:#FEEFB3;border-bottom:#E68A00 1px solid;text-align:center;font-size:15px;z-index:999}
.upgrade_notice i{margin:14px;float:right;cursor:pointer}
.back_to_top{display:none;position:fixed;bottom:30px;right:12px;color:green;font-size:25px}
#header.image{background-image:url(/webGui/images/banner.png)}
</style>

when azure theme runs

<style>
.inline_help{display:none}
.upgrade_notice{position:fixed;top:1px;left:0;width:100%;height:40px;line-height:40px;color:#E68A00;background:#FEEFB3;border-bottom:#E68A00 1px solid;text-align:center;font-size:15px;z-index:999}
.upgrade_notice i{margin:14px;float:right;cursor:pointer}
.back_to_top{display:none;position:fixed;bottom:30px;right:12px;color:green;font-size:25px}
#header.image{background-image:url(/webGui/images/banner.png)}
#nav-item a[href='/Dashboard']:before{content:'\f0e4'}
#nav-item a[href='/Main']:before{content:'\f015'}
#nav-item a[href='/Shares']:before{content:'\f07b'}
#nav-item a[href='/Users']:before{content:'\f0c0'}
#nav-item a[href='/Settings']:before{content:'\f085'}
#nav-item a[href='/Plugins']:before{content:'\f1e6'}
#nav-item a[href='/Docker']:before{content:'\f100'}
#nav-item a[href='/VMs']:before{content:'\f108'}
#nav-item a[href='/Tools']:before{content:'\f0ad'}
#nav-item.LogoutButton a:before{content:'\f08b'}
#nav-item.TerminalButton a:before{content:'\f120'}
#nav-item.FeedbackButton a:before{content:'\f075'}
#nav-item.HelpButton a:before{content:'\f059'}
#nav-item.InfoButton a:before{content:'\f05a'}
#nav-item.LogButton a:before{content:'\f14b'}
</style>

 

Edited August 17, 2018 by Carbongrip

[bonienl]

The latest version has no hardcoded references but uses PHP to create the necessary icons for themes Azure and Gray. It is written in PHP because buttons may be added dynamically. Any hardcoding in the css file would not work with dynamically generated buttons.

 

Right now Azure and Gray are the only two themes which get the generated icons added.

A custom theme which needs these icons as well, needs to be added to the list manually (see DefaultPageLayout.php)

 

Ps. Make sure you are using the latest version of Unraid

Edited August 29, 2018 by bonienl