Customization of Web interface in Jasperserver

[sreejukb]

Hello!

I have been trying to customize the web interface of Jasperserver 4.0.  So far, I have been able to manage to change the logo by placing the custom log in the themes folder and by updating the JIFileResource table in the database.  I am not sure what I did to get the custom logo entry created in database, but I could find it there.   As a next step I would like to make changes to the CSS file, which I did.  However, the changes are not being effected.  Looking at the JIFileResource, I see the hexadecimal values of CSS listed there.  But I am not sure what should be done to make my changes in the CSS file update the database.

Any information in this regard or approach/method to customize the web interface would of great help!

Thank you!

[sreejukb]

 folks, I have figured this out.  It was not as difficult as I thought and we can make this custom changes through the options provide in the Jasperserver web interface.  However, I have just started working on this and would appreciate if anybody could point me towards any good documentation or video available on the cusotmization.  Thanks!

[f_chas01]

jasperforge.org/uploads/mwiki/5/5a/JaspersoftThemes.pdf

[sreejukb]

 Thank you for the link.  I have this document, but this provides information at a very high level.  I was wondering if there is some documentation that explains customization in detail.  What needs to be changed in which CSS file if I need to make some custom changes on the web interface.  

[tsheiner]

The best 'documentation' for understanding how to change the UI via the theme is experimenting with CSS changes in the live application and then transferring those changes into your custom theme files.

 

I prefer to use the Firefox browser and the Firebug extension for it to do this kind of experimentation, but Safari/Chrome and IE8/9 have their own built in 'developer tools' that provide similar functionality to Firebug.

 

This workflow is discussed in section 4.2 of the document referenced above.

 

Tim

[sreejukb]

 Thanks Tim.  This is exactly the way we have been doing.  We use firebug to understand the CSS that needs to be changed and then make necessary changes.  

[vin0th]

hope I am not too late in replying...Jasper loads the themes from the DB at mySql...to be precise from "jifileresource", tried to update the value with my custom logo it still did not work. Some more information on this problem would be greatly appreciated

[shivareddyk]

hi,

these words are as per above link(jaspersoft theme.pdf) "A theme is a collection of
CSS files and associated images that specify the appearance for all or part of the user interface. A theme only controls how the
interface appears, for example fonts, colors, spacing, lines, and image elements of the UI. It does not control what appears,
such as the contents of menus or the effect of clicking a button."

 

MY QUESTION???

if we want to change the content of the menus and effects of the clicking a buttion(expand/collapse by buttion),where/which  files want to be change,how to be change???

 

pls update any one,ur help is most appreciatble... :)

[sreejukb]

 I presume you are using Jasper 4.  If that is the case what you need to do is to upload your logo using the web interface.  Here is how it works.  Launch Jasperserver application.  On the tree menu, click on themes to expand.  By default you will find two themes viz., Default and Pod Summer.  The application does not allow you to change anything to the default theme. However you can create your own them by rt clicking on the themes and creating a new folder.  Once you do that you can copy all the css files under default theme to the folder you created.  Create an image folder and copy all the image files as well.  After the copying is completed, you can rt click on the folder to set the newly created folder as the active theme.  Next step would be to make custom changes.  You can download the images and CSS files to your local drive using the download option.  Make necessary changes to CSS files and upload them.  Similarly you can also upload new logo.png file.  You may have to refresh the browser couple of times for the new changes to take effect.  Hope this helps.