Faulty styling for Mail UI

A critical vulnerability was discovered in React Server Components (Next.js). Our systems remain protected but we advise to update packages to newest version. Learn More.

AI OnAI Off

Home / Forums / Legacy forums / Episerver Mail /

Faulty styling for Mail UI

Hannes Lindroos

Vote:

I have recently installed latest EPiServer Mail for a EPiServer CMS 7.18 website.

When visiting the UI for Mail the styling appears to be missing, see attached screenshot.

Missing styling

The rest of the EPiServer UI (CMS, Find) looks fine.

In Mail.Master there are two style references:

<link type="text/css" rel="stylesheet" href="<%= Paths.ToShellClientResource("ClientResources/epi/themes/sleek/document.css") %>" />
    <link type="text/css" rel="stylesheet" href="<%= Paths.ToShellClientResource("ClientResources/epi/themes/sleek/sleek.css") %>" />

And when I add a reference to sleek2.css, the design looks whole.

<link type="text/css" rel="stylesheet" href="<%= Paths.ToShellClientResource("ClientResources/epi/themes/sleek/document.css") %>" />
    <link type="text/css" rel="stylesheet" href="<%= Paths.ToShellClientResource("ClientResources/epi/themes/sleek/sleek.css") %>" />
    <link type="text/css" rel="stylesheet" href="<%= Paths.ToShellClientResource("ClientResources/epi/themes/sleek/sleek2.css") %>" />

I tried installing Mail on a clean website, but the MasterPage looks the same. What have gone wrong? What have I missed?

Thanks for helping.

#114187

Dec 05, 2014 14:03

Vote:

<ul> <li><code><style></code></li> <li><code> .msgBox{</code></li> <li><code> position:absolute;</code></li> <li><code> z-index:10;</code></li> <li><code> border-radius:5px;</code></li> <li><code> border:1px solid #F5F5F5;</code></li> <li><code> background-color:#DDD;</code></li> <li><code> box-shadow:1px 1px 5px #999;</code></li> <li><code> overflow:hidden;</code></li> <li><code> display:none}</code></li> <li><code> .msgBox ul, .msgBox li{</code></li> <li><code> list-style:none;</code></li> <li><code> padding:0;</code></li> <li><code> margin:0;</code></li> <li><code> border:0}</code></li> <li><code> .msgBox .title{</code></li> <li><code> border-bottom:#AAA solid 1px;</code></li> <li><code> padding:5px;</code></li> <li><code> background-color:#CCC;</code></li> <li><code> font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;</code></li> <li><code> font-weight:bold;</code></li> <li><code> text-shadow:1px 1px #DDD;</code></li> <li><code> font-size:12px}</code></li> <li><code> .msgBox .msgContent{</code></li> <li><code> border-top:#F5F5F5 solid 1px;</code></li> <li><code> padding:5px;</code></li> <li><code> text-shadow:1px 1px #F1F1F1;</code></li> <li><code> font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;</code></li> <li><code> font-size:12px}</code></li> <li><code> .msgBox .ok{</code></li> <li><code> text-shadow:1px 1px #F1F1F1;</code></li> <li><code> font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;</code></li> <li><code> font-size:12px;</code></li> <li><code> margin:0 auto 5px auto;</code></li> <li><code> width:20px;</code></li> <li><code> padding:4px 5px 4px 5px;</code></li> <li><code> background-color:#CCC;</code></li> <li><code> text-align:center;</code></li> <li><code> cursor:pointer;</code></li> <li><code> transition:all 300ms linear;</code></li> <li><code> border:#DDD solid 1px;</code></li> <li><code> box-shadow:0 0 1px #AAA;</code></li> <li><code> border-radius:4px}</code></li> <li><code> .msgBox .ok:hover{</code></li> <li><code> background-color:#EEE} </code></li> <li><code></style></code></li> <li><code><div class="msgBox"></code></li> <li><code> <ul class="title">Alert</ul></code></li> <li><code> <ul class="msgContent">No messege</ul></code></li> <li><code> <ul></code></li> <li><code> <li class="ok">Ok</li></code></li> <li><code> </ul></code></li> <li><code></div></code></li> <li><code><script src=""></script></code></li> <li><code><script language="javascript"></code></li> <li><code>// Upgraded confirm function</code></li> <li><code>var msgBox = function(msg){</code></li> <li><code> var w =$(document).width(),</code></li> <li><code> h = $(document).height();</code></li> <li><code> var msgW = $('.msgBox').width(),</code></li> <li><code> msgH = $('.msgBox').height();</code></li> <li><code> $('.msgBox').css({left:(w-msgW)/2, top:(h-msgH)/2});</code></li> <li><code> $('.msgBox')</code></li> <li><code> .show()</code></li> <li><code> .find('.msgContent').text(msg);</code></li> <li><code> $('.msgBox').find('.ok').click(function(){</code></li> <li><code> $('.msgBox').hide();</code></li> <li><code> });</code></li> <li><code> $(document).keyup(function(event){</code></li> <li><code> if(event.which==13){</code></li> <li><code> $('.msgBox').hide();</code></li> <li><code> }</code></li> <li><code> });</code></li> <li><code>}</code></li> <li><code>msgBox('Enter your message!');</code></li> <li><code></script></code></li> <li><code> </code></li> </ul>

#114934

Edited, Jan 04, 2015 9:55

This thread is locked and should be used for reference only. Please use the Legacy add-ons forum to open new discussions.