​How to emulate the WoltLab homepage?

  • Affected Version
    WoltLab Suite 3.0

    I'm trying to get a large image to show up in the header area on the Dashboard page like what is done here https://www.woltlab.com/ but I'm not having any luck (although I have done it before, I just can't remember how I did it right now :/). How is the WoltLab homepage set up?

  • It's using a box in the hero position internally, which has the properties as following:

    Code
    background-image: url(path/to/image.jpg);
    background-size: cover;
    display: flex;
    min-height: calc(100vh - 50px); /* Info: The menu at the top is 50pixels height */
  • I've gotten a background image to show up but I'm sure I am doing it incorrectly.

    I created a new box and placed it in the hero position. I assigned the box to just the Dashboard page. I left the class name blank because adding a class name will not show the background image at the width of the page, And in the contents I added an empty div, like so <div></div>. In my style's Advanced Settings field I added:

    Edited to add: the extra spaces in the css code box were not added by me. This happened while using the latest version of Firefox.

    The background image does not cover the header and logo area, and I'm sure that anything else that I add to the hero position will receive the same styling that I added. What am I doing wrong?

  • Have you pasted the code and then added the code formatting, or was the code pasted into an existing code block?

    I added the opening code css tag and then pasted the code, doing that gave me some added spaces which I removed before adding the closing tag. When I made the post the spaces were back.

  • Still looking for some help with the background image if anyone is willing to share how to do it.

    This should probably be added to the 'Help Guides" since it is something that helps sell the product.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!