Design and arrangement of navigation and title

currently, my page looks like this:

I am using the Themes Flamingo - Sandstone

There are a few things that I would like to change but could not figure out how to do that:

  1. I would like to compress the header (menu viewer, including logo, and header global) so that everything is just in one line instead of taking up so much space.
  2. there is an “hr” element between the id= document-header and the id=xwikicontent. The “hr” unfortunately does not belong to the id document header (nor the id = xwikicontent), so when I use css to remove the document-header I have a ugly large white space above the xwikicontent (marked with red in the picture below). It would be great to change this. Anyone has an idea?

Ideally, I would like to set up a page that looks similar to the screenshots presented here: https://www.xwiki.org/xwiki/bin/view/Blog/DocumentationFlavorExample

I would be happy if someone could help

You need to be specific as to exactly what you want which makes it easier to figure out what is actually needed to get the result you desire. It is not clear from the screenshot you’ve edited and given.

Have you considered altering the CSS to make your changes? If you just want to reduce the amount of whitespace between elements, then css should do the trick. Otherwise, if you want changes in the actual layout of the page, you will need to customize an xwiki skin to create the layout and look you want.

There is documentation on how to do this on the xwiki site.