​How to emulate the WoltLab homepage?

1st Official Post
    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?

    I'm also interested by the answer ;)

    ___________________________
    Laurent Declercq (nuxwin)
    i-MSCP project director

    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 */
    • Official Post

    The large image on our homepage is nothing but a background image set on the .boxesHero element, you can use the Developer Tools of your browser to look up how it's done. No custom HTML was used, it is purely done with CSS.

    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?

    • Official Post
    Quote from PJK

    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.

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

    Quote from Alexander Ebert

    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.

    Thats a handy little trick thanks for shareing the answer also. so many dont bother telling you how they got the answer, really peas me off :D

Participate now!

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

Register Yourself Login