Horizontal navigation menu like the one on xwiki.org

Hey, I’m new to xwiki and am looking to deploy it for a local nonprofit makerspace. the view source button on xwiki.org has been very helpful to see how one might build up a xwiki page.

Unfortunately I can’t find the source for the menu on xwiki.org. I’ve managed to build something by using the menu application and styling it via the advanced section under color theme:

2020-08-14-144123_2559x260_scrot

I’d like to have the menu (and logo) items start on the further to the right, above the content similar to how it is on the front page of xwiki.orgis, but I can’t seem to figure out how to accomplish this.

Have tried searching around the forums, but I might be using the wrong terms.

Thank you in advance

Hi @dali99,

Welcome! Hope you are liking XWiki. :slight_smile:

Nice seeing you getting this far with the menu. Just simple easy steps now.

I will explain how xwiki.org does it. Please follow the following steps.

  1. Make sure you are logged in as admin and can edit all pages.
  2. Go to the home page and click the arrow beside “Edit” button and choose “Objects” from the dropdown.
    image
  3. Add a new “StyleSheetExtension” object to the page by searching “StyleSheetExtension” and clicking “Add”.
  4. Add this code in the “Code” property of the object.
    #xwikimaincontainer {
        width: 970px;
    }
    
  5. Make “Use this extension” property “On page or on demand” if you only want the changes on home page (as in xwiki.org) or “On this wiki” if you want the changes to affect the entire website.
  6. Changing the right and left padded background of the menu and the top bar with logo is kind of a workaround using CSS as well. Append the following styles to the “Code” property again.
    #menuview {
        box-shadow: #000000 -75rem 0px 0px, #000000 75rem 0px 0px;
    }
    .menu.navigation-menu { /*You can also get an ID selector by inspecting the menu through dev tools*/
        box-shadow: #10000 -75rem 0px 0px,#10000 75rem 0px 0px;
    }
    
    Replace “#00000” with the top bar with logo background color and “#10000” with the menu background color.

That should do it I think. Let me tell you that it doesn’t look very good right of the bat unless you have a custom home page.

Hope this helps. Let me know if you come across any problem.

1 Like

Thanks Ginpachi, I was wondering how to do that.

Dal99, I have been building a site for a local not for profit organization for the last six months. Lots of challenges and frustrations with XWIKI because it is so flexible and powerful in my opinion. So be prepared to lots of frustration when you start to populate your site. There is a huge amount of documentation. The trick is to find the applicable ones and then figuring it out. I am old and so my brain is likely not as flexible as it once was.

Before you get too invested in time here are some items to consider:

  1. Bakup and Restore is a challenge. XWIKI calls it export & import which works but not for all pages you create in the Global Administration area. In short, assume that anything you enter in the Global Administration: xxxxx may get backed up and it may be restored

  2. You will go crazy trying to figure out rights – the actual input is simple, but how the system figures out the rights on a specific is, politely, perverse and non intuitive.

  3. If your site will be open to the public (unregistered users) or different levels of “who can see” “who can edit” then figure this out FIRST because you will want (in my opinion) to create a file structure where, for example, public pages are all in a folder called “public” (or whatever) and you might have a donations team that have exclusive access to the donors information or names. By putting pages into a structured by rights file system, it will be much easier for you to assign rights to a page and siblings.

Ignore XWIKI’s sales pitch that managing rights right down to the page is easy. Well it is easy to do, but you have NO CLUE how the system figures out the real rights of a page without doing experimentation logging in as normal user, admin or member of a group. It is huge work.

If you want help send me an email at soswv@cjman.com

Oh, that is much better than changing the color theme to add the css!

That gives me more insight in how to accomplish these kinds of things.

When I try to add a stylesheet to the Home object I get

2020-08-16 10:47:33,240 [http://127.0.0.2:8080/bin/preview/Main/?diff=1&version=6.2] ERROR c.x.x.XWiki                    - Error while evaluating velocity template [previewdiff.vm] 
org.xwiki.rendering.RenderingException: Failed to execute renderer
	at org.xwiki.rendering.async.internal.DefaultAsyncRendererExecutor.syncRender(DefaultAsyncRendererExecutor.java:267)
	at org.xwiki.rendering.async.internal.DefaultAsyncRendererExecutor.render(DefaultAsyncRendererExecutor.java:247)
	at org.xwiki.rendering.async.internal.block.DefaultBlockAsyncRendererExecutor.render(DefaultBlockAsyncRendererExecutor.java:154)
	at com.xpn.xwiki.internal.template.InternalTemplateManager.render(InternalTemplateManager.java:772)
	at com.xpn.xwiki.internal.template.InternalTemplateManager.renderFromSkin(InternalTemplateManager.java:745)
	at com.xpn.xwiki.internal.template.InternalTemplateManager.renderFromSkin(InternalTemplateManager.java:725)
	at com.xpn.xwiki.internal.template.InternalTemplateManager.render(InternalTemplateManager.java:711)
	at com.xpn.xwiki.internal.template.DefaultTemplateManager.render(DefaultTemplateManager.java:78)
	at com.xpn.xwiki.XWiki.evaluateTemplate(XWiki.java:2490)
	at com.xpn.xwiki.web.Utils.parseTemplate(Utils.java:179)
	at com.xpn.xwiki.web.XWikiAction.execute(XWikiAction.java:516)
	at com.xpn.xwiki.web.XWikiAction.execute(XWikiAction.java:218)
	at org.apache.struts.action.RequestProcessor.processActionPerform(RequestProcessor.java:425)
	at org.apache.struts.action.RequestProcessor.process(RequestProcessor.java:228)
	at org.apache.struts.action.ActionServlet.process(ActionServlet.java:1913)
	at org.apache.struts.action.ActionServlet.doPost(ActionServlet.java:462)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:652)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:733)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at com.xpn.xwiki.web.ActionFilter.doFilter(ActionFilter.java:112)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.xwiki.wysiwyg.filter.ConversionFilter.doFilter(ConversionFilter.java:109)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.xwiki.container.servlet.filters.internal.SetHTTPHeaderFilter.doFilter(SetHTTPHeaderFilter.java:63)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.xwiki.container.servlet.filters.internal.SavedRequestRestorerFilter.doFilter(SavedRequestRestorerFilter.java:208)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.xwiki.container.servlet.filters.internal.SetCharacterEncodingFilter.doFilter(SetCharacterEncodingFilter.java:111)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.xwiki.resource.servlet.RoutingFilter.doFilter(RoutingFilter.java:132)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:199)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)
	at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:543)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:81)
	at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:690)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:87)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343)
	at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:615)
	at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65)
	at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:818)
	at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1626)
	at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
	at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
	at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
	at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
	at java.base/java.lang.Thread.run(Thread.java:834)
Caused by: org.xwiki.rendering.RenderingException: Failed to evaluate template
	at com.xpn.xwiki.internal.template.TemplateAsyncRenderer.evaluateContent(TemplateAsyncRenderer.java:219)
	at com.xpn.xwiki.internal.template.TemplateAsyncRenderer.renderVelocity(TemplateAsyncRenderer.java:180)
	at com.xpn.xwiki.internal.template.TemplateAsyncRenderer.render(TemplateAsyncRenderer.java:137)
	at com.xpn.xwiki.internal.template.TemplateAsyncRenderer.render(TemplateAsyncRenderer.java:53)
	at org.xwiki.rendering.async.internal.DefaultAsyncRendererExecutor.lambda$syncRender$0(DefaultAsyncRendererExecutor.java:264)
	at com.xpn.xwiki.internal.security.authorization.DefaultAuthorExecutor.call(DefaultAuthorExecutor.java:98)
	at org.xwiki.rendering.async.internal.DefaultAsyncRendererExecutor.syncRender(DefaultAsyncRendererExecutor.java:264)
	... 54 common frames omitted
Caused by: org.xwiki.velocity.XWikiVelocityException: Failed to evaluate content with id [/skins/flamingo/previewdiff.vm]
	at org.xwiki.velocity.internal.DefaultVelocityEngine.evaluate(DefaultVelocityEngine.java:227)
	at com.xpn.xwiki.render.DefaultVelocityManager.evaluate(DefaultVelocityManager.java:358)
	at com.xpn.xwiki.internal.template.VelocityTemplateEvaluator.evaluateContent(VelocityTemplateEvaluator.java:95)
	at com.xpn.xwiki.internal.template.TemplateAsyncRenderer.evaluateContent(TemplateAsyncRenderer.java:217)
	... 60 common frames omitted
Caused by: org.apache.velocity.exception.MethodInvocationException: Invocation of method 'mergeDocument' in  class org.xwiki.store.merge.MergeScriptService threw exception java.lang.NullPointerException at 394:/skins/flamingo/previewdiff.vm[line 5, column 42]
	at org.apache.velocity.runtime.parser.node.ASTMethod.handleInvocationException(ASTMethod.java:243)
	at org.apache.velocity.runtime.parser.node.ASTMethod.execute(ASTMethod.java:187)
	at org.apache.velocity.runtime.parser.node.ASTReference.execute(ASTReference.java:280)
	at org.apache.velocity.runtime.parser.node.ASTReference.value(ASTReference.java:567)
	at org.apache.velocity.runtime.parser.node.ASTExpression.value(ASTExpression.java:71)
	at org.apache.velocity.runtime.parser.node.ASTSetDirective.render(ASTSetDirective.java:142)
	at org.apache.velocity.runtime.parser.node.SimpleNode.render(SimpleNode.java:342)
	at org.xwiki.velocity.internal.DefaultVelocityEngine.evaluateInternal(DefaultVelocityEngine.java:259)
	at org.xwiki.velocity.internal.DefaultVelocityEngine.evaluate(DefaultVelocityEngine.java:222)
	... 63 common frames omitted
Caused by: java.lang.NullPointerException: null
	at org.xwiki.store.merge.MergeScriptService.mergeDocument(MergeScriptService.java:82)
	at jdk.internal.reflect.GeneratedMethodAccessor2215.invoke(Unknown Source)
	at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.base/java.lang.reflect.Method.invoke(Method.java:566)
	at org.apache.velocity.util.introspection.UberspectImpl$VelMethodImpl.doInvoke(UberspectImpl.java:395)
	at org.apache.velocity.util.introspection.UberspectImpl$VelMethodImpl.invoke(UberspectImpl.java:384)
	at org.apache.velocity.runtime.parser.node.ASTMethod.execute(ASTMethod.java:173)
	... 70 common frames omitted

and it doesn’t successfully save (using the docker image)

Thank you for these warnings! Ill be sure to make my structure represent the viewing and editing rights!

Im not sure what you meant by backup however. Do you mean I shouldn’t assume pages in the global administration area are properly backed up via the export/import functionality?

Thank you kindly for your offer of help!

Not really sure about this error.
You can try setting “Parse content” property of the object to be “No”. It might be trying to parse some invalid velocity (non-existent) syntax.

It seems to work fine for this page (https://playground.xwiki.org/xwiki/bin/view/Sandbox/) with the following object.
image

Hm

It does work on my sandbox page as well, just not the homepage.

Yes

I discovered that many Global admin settings do not import into a new install. Have been unable to find documentation

May be the selector is not #xwikimaincontainer in that case. Can you check the source? Or if you are not familiar with HTML, share the source here by right clicking and selecting “View source” on the home page.

there is indeed a <div> with xwikimaincontainer as it’s id directly under <body> on the home page.
It’d also be pretty surprising to me if css that doesn’t apply to anything but was otherhwise valid would stop you from saving it :confused:

It’d also be pretty surprising to me if css that doesn’t apply to anything but was otherhwise valid would stop you from saving it

I am pretty sure that’s not how it works in XWiki as well.

You can try adding !important to that CSS property. And debug if any other width is specified for the element.

unfortuantly I still can’t save these edits

2020-08-16-202400_2559x1285_scrot

Really no idea why this error is there.

According to this issue, it’s hard to reproduce.

What version of XWiki are you on? I think the best bet would be to hard refresh (Ctrl + F5) the page and clear the website’s cache.

This is not correct. XWiki export will export everything you tell it to export, see https://extensions.xwiki.org/xwiki/bin/view/Extension/Administration+Application#HExport

As an added data point I find it a little suspicious that when I go into edit mode on the Home page it looks like this:

2020-08-17-145434_1872x355_scrot

Its calling it “Home” even though the real title seems to be “Velkommen til Horten Folkeverksted!”
in addition the page’s “body” doesn’t have an object associated with it in the object editor page, even though I do definitely have a written body in the normal WYSIWYG editor.

Perhaps this is a bug with the object editor and translations?

Would be good to open a different thread for different topics. Thanks!

The title seems to be used correctly (XS 12.6.1) in object edit mode:

image

It seems you’re editing in object mode for some reason. This is why you don’t see the content. You must have some xobject forcing the mode.

Maybe you brought changes to the home page?

Im clicking edit>object on the home page so that I can add a XWikiStyleSheet extension.

As I’m new to xwiki I don’t know what to expect, so it might be completely normal for the content to not be in the object editor. I just know that the content is available when going into object mode of the menus and such.

I’ve managed to work around this by just adding a style sheet to the navigation menu rather than the , but the error 4001 is still present when trying to save css on the home page

ahhhh ok then it’s perfectly normal!

You said:

[…] when I go into edit mode on the Home page […]

But that was not precise at all. It was impossible for me to understand that you meant edit>objects.

Understandable, I figured the conversation above served as enough context for what I was trying to accomplish :smile:

Apologies for not being familiar with the correct terminology