Forked Lavender: added hero header with auto-sticking navbar



  • Hi there!

    Thanks for your great work with NodeBB. It is a very nice part of our site's next-generation feel. I did some slight modding of your Lavender theme to suit our style, and I thought I'd share the mods back with the community in case anyone else was trying to do similar things:

    https://github.com/Expii/nodebb-theme-expii

    (Also, if you would like to incorporate any of these things into Lavender, I'd be very happy to have been of help.)

    I added a few features:

    1. Large header image (for consistent branding with rest of our site)
    2. Navbar below large header image which auto-sticks to top of page when header image is out of view.
    3. In left side of navbar, the site logo sends user to main site (not forums), and the forum title sends user to forum front page.
    4. Navbar is inverted by default

    I look forward to watching NodeBB's continued evolution! 🙂


  • Admin

    Nice! You should post a screenshot as well 🙂



  • Thanks for the suggestion! Here's our front screenshot, with the full header image:

    Home | expii | concourse - Google Chrome_007.png

    When you scroll down, the header image disappears, and the navbar then sticks to the top, with a mini-logo that fades into view.

    Let's spread the word! | expii | concourse - Google Chrome_010.png

    The large header image made it easier to transition from the dark-colored branding on the rest of our site:

    expii - Google Chrome_012.png



  • I'm gonna have to yoink that.

    Nice work.



  • Thanks! I apologize that some of the names (e.g., expii.com) are hard-coded into the theme, but I documented all of my areas of change with comments that include "Po". 🙂



  • how does one install this theme?



  • Hi @po!

    How do you install this theme? Is it v0.6.0 compatible?



  • @po Question, is your home page and NodeBB installation concurrent? if so, how?


Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.