Changing the appearance of the portal login links
Our requirements are that students and staff login via CAS but any external people must login directly to Sakai, using an account created for them.
I wanted to make the main login link larger than the secondary one. But I couldn't. The code only had a single div around both links so any change I made affected both. I went hunting and found where this part of the code is drawn from.
$SAKAI-SRC/portal/portal-render-engine-impl/pack/src/webapp/vm/defaultskin/macros.vm
In there are a bunch of macros which are used to render the portal. I found the offending block (loginLinks), and added id="loginLink1" and id="loginLink2" to each link.
This wraps each loginlink with its own id field so each can be styled individually.
The CSS for these divs is already in the portal, its just empty. Perhaps the corresponding macros.vm edit was just overlooked. Anyway I've asked for this to be committed to the main branch so hopefully this bit of text will be out of date eventually! in the meatime, edit that file, run maven sakai in the $SAKAI-SRC/portal/ directory to rebuild and deploy, restart Sakai, and style away!
Here's the whole macro block.
##------------------------------------------------------------------------------------------
##
## includeLogin
##
##------------------------------------------------------------------------------------------
## vcontext.put("loginTopLogin", Boolean.valueOf(topLogin));
## vcontext.put("loginLogInOutUrl", logInOutUrl);
## vcontext.put("loginMessage", message);
## vcontext.put("loginImage1", image1);
## vcontext.put("loginLogInOutUrl2", logInOutUrl2);
## vcontext.put("loginMessage2", message2);
## vcontext.put("loginImage12", image2);
## vcontext.put("loginPortalPath", ServerConfigurationService
## .getString("portalPath"));
## vcontext.put("loginEiWording", eidWording);
## vcontext.put("loginPwWording", pwWording);
## vcontext.put("loginWording", loginWording);
#macro( includeLogin )
#if (!${loginTopLogin})
<div id="loginLinks">
<a href="${loginLogInOutUrl}" title="${loginMessage}" id="loginLink1">
#if (${loginHasImage1})
<img src="${loginImage1}"/>
#else
${loginMessage}
#end
</a>
#if (${loginHasLogInOutUrl2})
<a href="${loginLogInOutUrl2}" title="${loginMessage2}" id="loginLink2">
#if (${loginHasImage2})
<img alt="${loginMessage2}" src="${loginImage2}"/>
#else
${loginMessage2}
#end
</a>
#end
</div>
#else
<form id="loginForm" method="post" action="${loginPortalPath}/xlogin" enctype="application/x-www-form-urlencoded">
<label for="eid">${loginEidWording}</label>
<input name="eid" id="eid" type="text" />
<label for="pw">${loginPwWording}</label>
<input name="pw" type="password" id="pw" />
<input name="submit" type="submit" id="submit" value="${loginWording}" />
<script type="text/javascript" language="JavaScript">
document.forms[0].eid.focus();
</script>
</form>
#end
#end