Siebel IP2014: How to Customize the Aurora Theme Positioning of Applet Buttons

In IP2013 and previous versions of Siebel users have gotten accustom to the positioning of buttons on list and form applets.  The Menu, New, Delete, and Query buttons appear at the top left on the list applet in the screenshot below.

After you upgrade to IP2014 you will notice that the buttons have moved to the right side of the list applet.  This is a small change that can become a nuisance and may take you a while to get used to.  

We decided to investigate how much effort would be involved to move those buttons back to the top left of the list applet.  To do so, we created a custom style sheet that can extend the out of the box Aurora theme.  In the future we plan to group any Aurora theme customization in this single css file.  

Step 1:  Create your css File

We named our css file bloomspire-aurora-customizations.css.  Feel free to use a different file name for your implementation.

We added this line of code to the file and saved into the <SWE Web Application root>\PUBLIC\enu\files\custom folder.

.siebui-btn-grp-applet {float: left !important;}

Normally, we wouldn't recommend using the !important directive; however, you will find that this is needed to customize the out of the box aurora theme stylings.  The theme-aurora.css file has 812 uses of the !important directive including the style setting to float the siebui-btn-grp-applet class to the right on line 70.  

If you would like to create a custom theme based off the aurora theme, then you could always copy the theme-aurora.css file and make your changes there.  Oracle documents this approach in the Configuring Siebel Open UI for IP2014 document.  The drawback to this approach would be that any future enhancements to the theme-aurora.css file will not be automatically incorporated in your custom theme stylings.

Step 2:  Create Manifest Administration Records to Add your Custom Styling to the Siebel Application

Navigate to  Administration - Application > Manifest Files

Create new record for "files/custom/bloomspire-aurora-customizations.css"

Navigate to  Administration - Application > Manifest Administration

Create new records for Type = Application, Usage Type = Theme, Name = PLATFORM DEPENDENT

Create entries in the Files child applet for "files/theme-aurora.css" and for "files/custom/bloomspire-aurora-customizations.css"

Step 3:  Log Out and In to Enjoy your Changes

Now when we log into the application our custom css is used along with the out of the box Aurora theme and you can see that the buttons appear on the top left of the list applet.

Hope this helps with your implementation.