You are here

How to move Icons left?

Submitted by phillies40 on Wed, 09/24/2014 - 14:33

Hi all

Some students of our school complaining about scrolling right in order to logout of luminis system, clicking on Email or Blackboard icons. School instructs me to see if we can move all icons left (Email, BB, Groups, Logout).

I'd been searching Ellucian website but could not find any instructions for this, could anyone help or share experience? (I done it in 3.3 by changing uPortal) thanks!

Alan
PCOM

Luminis Version:

Channels:

General:

Hack Type:

How-To:

Modification:

Comments

Alan, I can't say that I've ever personally moved the icons, but I've done a lot of theme customizations in the past. If you are using a custom template via the 'deployskintemplate' utility, check out your custom.xsl file. I'd take a look at the section of code involving

You may also want to consider modifying CSS to reposition the elements. Lastly, we try to limit the tab name length and even the # of roles/tabs a user may have. Generally, only our power users have the scrolling issue, and that is why we haven't done anything to move the icons.

Greg

I just realized that this first response of me had my code snippet chopped out. What I was trying to say was, look in your custom.xsl file for where it defines your 'cpicons', 'logoutIcon', and 'helpIcon'. Notice that it's doing a "call" template. When I mention the nested-tables.xsl in my later post, that's the file that actually defines the template. It's a little confusing, and takes a bit to understand how the two files relate to each other.

Greg

Hi Greg

We tried to tell that to the students but they demand us to do something, so...

We migrated from 3 to 4 so I believe we did not make any changes on the icons. So if I need to move icons left where should I start? Please help, thanks!

Alan

I'd definitely suggest reading up on the deployskintemplate command and look at creating your own 'theme'. I'm pretty sure details are mentioned in the admin guide. It might sound like a lot to have your own theme, but if my memory is correct, you can create a copy of the existing ellucian theme so than essentially all your doing is looking at having to move the icons and not having to start from scratch.

The advantage of having your own theme is that it won't get blown away by a patch/upgrade. Beyond the custom.xsl in your custom theme, you can also look at customizing your $CP_ROOT/webapps/luminis/WEB-INF/uPortal/org/jasig/portal/layout/tab-column/nested-tables/nested-tables.xsl. This file defines things like the xsl template for "logoutIcon". Keep in mind that nested-tables.xsl could get modified during patches, so document any changes you would make and be ready to put them back in place if you were ever to patch. One typo in the files could cause your entire layout to display improperly after a portal restart, so make sure to do your testing on a test server, and be ready to roll back if need be.

I was hoping I could give you some easy CSS to include to reposition the icon without needing to edit the xsl files. I couldn't come up with one easily enough. If I was personally working on it, my next step would be to try to wrap the icons with some span or div tags with a unique ID within the xsl files and then use CSS to position it wherever I wanted. There might be a better way to go about it, and since I've customized our layout plenty already, I can't be certain if any working code for me would work for you. I hope that helps and I hope you are comfortable with your HTML/CSS/XSLT coding :-) Good luck!

Greg

Download lp40000uicstg.pdf (Luminis Platform IV User Interface Customization Guide). It will explain all the steps for creating a new skin. You will likely only need to edit the one file: custom.xsl. Wrap the various sections in div's (or whatever you want) with id's, and then use css to place them wherever you want.

You probably should put div's around lots of things (logo, links,etc...). But here's how just our icon sections looks in custom.xsl:

div id="pcc-icons">
ul>
xsl:call-template name="cpicons" />
xsl:call-template name="helpIcon" />
xsl:call-template name="logoutIcon" />
/ul>
/div>

Wheat's guide is also good:
https://www.lumdev.net/sites/www.lumdev.net/files/Hacking_Luminis_v0-06.pdf