RTL’ng Sakai from portal to tools

Some things we left disheveled in a previous post about the RTL Sakai Portal, I will address these below. We are modifying a pre-existing portal in case this is useful to a context where the LTR and the RTL experiences need to coexist – then you can just modify the existing LTR portal skin. If the context is strictly RTL, you might be better off starting from scratch. I will provide a starter RTL skin at the end.

Site navigation

Some portal clean up: the pipes between site links still reflect a LTR orientation.

Change the location of the borders:

/*links to other sites*/
#siteLinkList a,#siteLinkList a:link,#siteLinkList a:visited{
    color: #fff;
    padding: 2px 6px 2px 4px;
    text-decoration: none;
    /*border-right: 1px solid #fff;*/border-left: 1px solid #fff;
}

and take borders away from the last link (which is the left-most one):

#siteLinkList li:last-child a{
    border:none
}

Portlet titles

The portlet titles also need sorting, flip the floats and text directions :

.portletTitle .title{
	/*float: left;*/float: right;
}
.portletTitle .title a{
	/*float:left;*/float:right;
}
.portletTitle .action{
	/*text-align: right;*/text-align: left;
}

So now the direction is correct:

Presence

Presence also shows the old LRT orientation:

On the portal level – adjust the title:

#presenceTitle{
   font-size: .7em;
   /*text-align: left;*/text-align: right;
   margin-left: .5em;
}

The presence list is inside of an iframe – and as such it is a tool, so it will be a useful segue to RTL’ng the tools. As with the portal we are adding the direction attribute to the first child of body (.portletBody).

.portletBody{
   direction:rtl
}

This will get us a lot of LTR > RTL changes for free in all of the tool descendants as we will see later. Except in the presence list as that doc does not have a .portalBody wrapper!!! Since presence does not have a .portletBody we need to add direction attribute to the list itself and fiddle with the paddings:

/*below for "presence in chat" functionality*/
.presenceList{
   font-size: .8em;
   list-style: none;
   margin: 0;
   direction:rtl;
   text-align:right;
   /*padding-left: .1em*/padding-right: .1em;
}

.presenceList li {
    /*padding: 0 0 0 .7em;*/padding: 0 .7em 0 0;
    margin-bottom: .2em;
}

Looks better now:

The results this far:

Next post – the tools in all their glory.