topic Re: How to modify the nuxeo theme in the nuxeo 5.5 tomcat version? in Nuxeo Forum

How to modify the nuxeo theme in the nuxeo 5.5 tomcat version?

fernandogr_ — Wed, 28 Mar 2012 18:18:28 GMT

Hello,

I want to modify the nuxeo theme, for example, that all the words that are a h1 can be red, all the h2 can be green , that the buttons can be gray and when the mouse is over they change to blue. I had the nuxeo 5.4.1 tomcat version , in this version I can do those modifications in the file nxserver/web/root.war/modules/org.nuxeo.admin.center/themes/theme-galaxy-admin.xml.

Now I have the nuxeo 5.5 tomcat version, and the theme-galaxy-admin.xml doesn't exist anymore, now there is a file called admin-center.xml, but is not the same.

Do you know which file I need to modify in order go make some changes to the nuxeo theme??

Thanks in advance

Re: How to modify the nuxeo theme in the nuxeo 5.5 tomcat version?

Benjamin_Jalon1 — Fri, 30 Mar 2012 04:31:21 GMT

We trying to move to an easier solution for theme management through the new flavor system. I'm far to be a specialist, but look around this notion.

Re: How to modify the nuxeo theme in the nuxeo 5.5 tomcat version?

Lise_Kemen — Mon, 02 Apr 2012 12:28:02 GMT

Hello,

Since Nuxeo 5.5 we've extracted the all the styles from the layout file (theme-*.xml). It was hard to maintain, and most of all not really meaningful anymore.

There is still a theme file, like admin-center.xml, but it now only defines the name of the pages, how they are split and cut, and which fragments are called, etc .. The styles are now CSS written, stored in theme/css/ The presets are still there too.

You can read this documentation page about it: http://doc.nuxeo.com/x/N4AO

So now if you want to change your styles, the better way is to define your custom CSS (detailed in the page i've linked below). You can edit the CSS stored in the server but it's risky, you can lose your changes.

Note that a CSS editor will be available in Nuxeo Studio soon.

Re: How to modify the nuxeo theme in the nuxeo 5.5 tomcat version?

fernandogr_ — Tue, 03 Apr 2012 00:27:37 GMT

Thank, the information that you gave me has been useful.

I already saw the CSS file that I think is the one that specify how the theme looks (nxserver/web/root.war/modules/org.nuxeo.admin.center/themes/css/nuxeo_admincenter_specific.css).

Also In the link that you posted, there is information about how to migrate the custom theme that was done by modifying huge xml file. http://doc.nuxeo.com/display/NXDOC/Migrating+my+customized+theme#Migratingmycustomizedtheme-ThemeXMLfile

Regarding this link, they make reference that the new default theme is document-management.xml, but I don't have this file. As I only need to modify the colors, I think the default theme would be very useful to me because all the class attribute are already defined so I can easily translate to the CSS file.

Is the document-management.xml the real default theme? or is there other file that I ca use to get the predefined attributes classes? Is the nxserver/web/root.war/modules/org.nuxeo.admin.center/themes/css/nuxeo_admincenter_specific.css file the one that I have to modify or add my information?

Thanks in advance .

Re: How to modify the nuxeo theme in the nuxeo 5.5 tomcat version?

Lise_Kemen — Wed, 04 Apr 2012 11:33:02 GMT

Hello,

I didn't notice it in your first comment, but you are looking in the wrong directory. In web/root.war/modules/ are listed all the webengine packages.

The files you are looking for are included in jars, as it is related to JSF interface, in nxserver/bundles/

The CSS are working this way:

a set of default CSS common to all (basics.css, body.css, breadcrumb.css, buttons_and_actions, drag_and_drop, etc ..)
css from a corresponding module (i.e. if you download a marketplace package you need to have the styles embedded with it.)
css for specific pages. Like the nuxeo_admincenter_specific, or the usercenter_specific, ...

You're viewing an admincenter css in the webengine part as we use webengine to bring back all the information from Nuxeo Connect, Nuxeo Marketplace, packages installation and update.

There is no real 'default theme' that manage all the platform, as it depends on what do you install.

There are:

theme layout files that define the several pages (document-management.xml, admin-center.xml, user-center.xml, dam.xml, etc ..)
a set of CSS, called in their corresponding OSGI-INF/theme-contrib.xml file
a set of flavor, variables, called in the CSS, defining the main colors and fonts.

To solve your problem, you need to open the nxserver/bundles/nuxeo-platform-webapp-core-5.6-SNAPSHOT.jar

Title colors are defined in themes/css/basics.css Buttons are defined in themes/css/buttons_and_actions.css

Don't forget to restart your server.

But once again, it is just a fallback, and i don't recommend this solution, as:

modify the sources files is dangerous for upgrades, you can have conflict errors
you have no clean way to get back the original files
you can lose your changes.

As the platform is modular, the best way to keep your project safe and stable is to add your own module on ours. To know how to extend the platform in adding your own component, take a look at http://doc.nuxeo.com/x/E4AO

Re: How to modify the nuxeo theme in the nuxeo 5.5 tomcat version?

fernandogr_ — Fri, 06 Apr 2012 00:07:57 GMT

Thanks Lise for your last answer.

I already tried to expand the nxserver/bundles/nuxeo-platform-webapp-core-5.6-SNAPSHOT.jar and I modified navigation.css file, then I create a jar file again and inserted it into nuxeo, but when I restart the server I get a "HTTP Status 404" page with a description "The requested resource () is not available." . Even If I only expand the original jar file and then I compress all the file again into a jar file, without modify any file , I get the same error.

Also I already tried to add my own module. I followed the information in this page http://doc.nuxeo.com/display/NXDOC/Component+model+overview to create my own component. I have a plug in that I created for nuxeo, so this is not the first time that I create a module, and extension points, but this time I have some questions about how to create my own module.

In my project's folder tree I have a my OSGI-INF/theme-contrib.xml (it is basically a copy from the theme-contrible.xml that I took from nuxeo-platform-webapp-core-5.6-SNAPSHOT.jar), also I have a themes/CSS/navigation.css file, this file is also a copy from the navigation.css that was in nuxeo-platform-webapp-core-5.6-SNAPSHOT.jar, I just changed the color for the tabs. Finally in my manifest file I added the lines: Nuxeo-Component: OSGI-INF/theme-contrib.xml, and in the section "Require-Bundle:" I put all the required bundles that I found in the manifest file that is inside nuxeo-platform-webapp-core-5.6-SNAPSHOT.jar, also I have tried without all those required bundles. So far I cannot see any change in mu nuxeo server.

So if i follow the solution where I only have to expand the jar file and modify the file and create the jar file again. Why does the server fail? Do you use some special way to create those jars files, any kind of key or something similar?

If I follow the solution to create my own component, Am I doing it in the right way? Do I have to create a a extension point? or do I have to do something different ?

Thanks

Re: How to modify the nuxeo theme in the nuxeo 5.5 tomcat version?

Lise_Kemen — Fri, 06 Apr 2012 16:20:30 GMT

Hello,

First of all, i'm glad you tried many solutions, and thanks for your interest in our platform.

You're doing it right, it can be a small thing: when looking at your description, there are several factors that can disrupt the smooth running of your task.

By probability order:

1/ Your jar is overrided by another one (ours). Your way to require a bundle is not used anymore. You don't need to add it in the Manifest.MF anymore. Once your theme-contrib.xml file is called in the manifest, be sure your component name is unique, and add a require tag on ours. You can see that on the 2nd and 3rd lines from this theme-contrib.xml file example: http://doc.nuxeo.com/display/KB/Adding+your+own+CSS#AddingyourownCSS-Declarethefile

2/ Your component name is not unique. Check the server.log, it will be noticed that there is a duplicate, you will see which jar is picked by the server. Same solution than previously, be sure your component name is unique, and add a require with the name of the component you want to override.

3/ The tool you use to unzip and zip your .jar file doesn't do the job correctly. We made the test (on linux and mac OS), unzip, make a change and zip a .jar, restart the server, it's working well. It can be a Windows tool issue, i don't know what kind of tool you're using.

If none of these solutions resolve your issue, try to describe your environment, check if you see something related in the log even if the server starts and tell us.

Thanks

Re: How to modify the nuxeo theme in the nuxeo 5.5 tomcat version?

fernandogr_ — Fri, 06 Apr 2012 17:50:10 GMT

I followed the step 1 from you last answer, now it is working. Thanks a lot Lise.

Re: How to modify the nuxeo theme in the nuxeo 5.5 tomcat version?

Edgar_ — Mon, 14 May 2012 12:18:10 GMT

How can I apply structural changes to the default galaxy theme layout? How can I register a new theme layout?

Using 5.6-SNAPSHOT.

Tried something like this in my theme-contrib.xml after copying themes from nuxeo-platform-webapp-core to my customization project: [..] org.nuxeo.theme.nuxeo.default themes/my-document-management.xml [..]

themes/my-document-management.xml is a copy of the original document-management.xml.

After Nuxeo-IDE's hot-deploy and refresh of the Nuxeo-DM website I've gotten the following warning/errors: [..] 2012-05-14 10:44:57,204 WARN [org.nuxeo.theme.html.ui.ThemeStyles] Could not resolve theme descriptor for name 'galaxy' 2012-05-14 10:44:57,449 ERROR [org.nuxeo.ecm.platform.web.common.exceptionhandling.DefaultNuxeoExceptionHandler] javax.servlet.ServletException: java.io.IOException: Theme not found: galaxy [..]

The Nuxeo-DM website appears without any styling.

Thanks

Moved to:
/> Nuxeo 5.5: How can I apply structural changes to the default galaxy theme layout?

Re: How to modify the nuxeo theme in the nuxeo 5.5 tomcat version?

Lise_Kemen — Mon, 14 May 2012 12:47:47 GMT

Can you create 2 separate questions ( structural changes + theme layout registration ) ?

Re: How to modify the nuxeo theme in the nuxeo 5.5 tomcat version?

Edgar_ — Tue, 15 May 2012 11:10:14 GMT

Thanks for your advice.