Styling fail on Login page.

2
Hello, I've been having difficulty with changing the Mendix logo to another logo on the login page. Eventhough I have changed it in my login.css and login.html in my files and Dreamweaver, it does not show the changes when deploying and viewing the login theme. Would appreciate any assistance. This is my login. css: /* layout*/ body { font-size: 12px; } a, a:link, a:active, a:visited { color: #0285FF; text-decoration: none; } a:hover, a:focus { color: #333; text-decoration: underline; } .mainTable { width: 100%; height: 100%; } .mainCell { text-align: center; } .mainContainer { width: 250px; margin: auto; text-align: left; } /* top */ .topPane { padding-bottom: 30px; } .logoPane { height: 77px; background:url(images/sasol-logo2.jpg) no-repeat scroll center center; } /* content */ .contentPane { } .scriptWarning { } .loginForm { display: none; } .loginTable { width: 100%; } .loginTable th { width: 30%; } .loginTable td { width: 70%; } .loginTable th, .loginTable td { padding: 5px; } .loginResult { } .formResult { padding-bottom: 5px; } .formLabel { font-weight: normal; } .formInput { width: 100%; padding: 2px; border: 1px solid #999; } .loginButton { text-align: right; } .formButton { cursor: pointer; } /* bottom */ .bottomPane { padding-top: 20px; } .footerPane { text-align: center; } /* rtl */ .dijitRtl .mainContainer { text-align: right; } .dijitRtl .loginButton { text-align: left; } And this is my login.html: <html> <head> <title>Sasol Login</title> <meta name="robots" content="noindex, nofollow"> <script type="text/javascript" src="ui/js/login_i18n.js"></script> <script type="text/javascript" src="ui/js/login.js"></script> <script type="text/javascript"> window.mxconfig = { xasBase : '/xas/' } </script> <style type="text/css"> @import "ui/yui/reset-fonts.css"; @import "ui/theme-sasol/login.css"; </style> <!--[if IE 6]> <style type="text/css"> @import "ui/ie6/banner.css"; </style> <![endif]--> </head> <body onLoad="setup()"> <!--[if IE 6]> <div class="ie6banner"> <img src="ui/ie6/ie6banner.png" width="280" height="90" border="0" usemap="#ie6banner" /> <map name="ie6banner"> <area shape="rect" coords="35,34,75,74" href="http://www.mozilla-europe.org/" target="_blank" title="Mozilla Firefox" /> <area shape="rect" coords="82,34,122,74" href="http://www.google.com/chrome/" target="_blank" title="Google Chrome" /> <area shape="rect" coords="129,34,169,74" href="http://www.apple.com/safari/" target="_blank" title="Apple Safari" /> <area shape="rect" coords="176,34,216,74" href="http://www.microsoft.com/windows/internet-explorer/default.aspx" target="_blank" title="Microsoft Internet Explorer" /> </map> </div> <![endif]--> <table cellpadding="0" cellspacing="0" class="mainTable"> <tr> <td class="mainCell"> <div class="mainContainer"> <div class="topPane"> <div class="logoPane"></div> </div> <div class="contentPane"> <div id="jscheck" class="scriptWarning"> This application requires JavaScript.<br /> If you have JavaScript enabled, please contact the administrator. </div> <form id="login" class="loginForm"> <table cellpadding="0" cellspacing="0" class="loginTable"> <tr> <td colspan="2"><div id="result" class="loginResult"></div></td> </tr> <tr> <th><label for="username" class="formLabel">Name</label></th> <td><input type="textfield" name="username" class="formInput" /></td> </tr> <tr> <th><label for="password" class="formLabel">Password</label></th> <td><input type="password" name="password" class="formInput" /></td> </tr> <tr> <td colspan="2" class="loginButton" id="trigger"> <input id="submit" type="submit" value="Login" class="formButton" /> </td> </tr> </table> </form> </div> <div class="bottomPane"> <div class="footerPane"> Powered by <a target="_blank" href="http://www.mendix.com">Mendix</a> </div> </div> </div> </td> </tr> </table> </body> </html>
asked
2 answers
6

Just add to your login.css width,

.logoPane {
   width: the width of the logo;
}

it should help.

Regards,

Vincent.

answered
3

alt text

Tell the guys using your theme to, clear their cache.

I sat down with Chantelle and she did everything correctly.

Also, when updating a skin, its useful to use a feature that some browsers have, called incognito or private browsing, that bypasses your browser's cache if you don't want to lose your browsing history, or keep your browsing history apart from cache, for instance while accessing your online banking information. Don't let caching cramp your style ;)

answered