Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #209047

    Hey Enfold community,
    thanks to the Enfold, the outstanding Kriesi support Team my music school finally got a website that is attractive, great to handle and successful. Since April 2013 our WordPress enfold based website is online – and i still love the look and feel of enfold, especially when it comes to its flexiblity providing content in so many different ways. And we have doubled our visitors since then. So here is the status quo: http://www.musikzentrale.net, but i am still doing improvements every day.

    By the time i got a little bored by the frontpage, some parents also said, the pictures are “too agressive” or “too cold”. Anyway, so i was looking for some ideas to provide stronger pictures. Since we have some pretty cool pics of our students on stage, i was looking around and found something cute: inspired by the Elision Theme i am currently using for a friend`s Website, i played arount with the Musikzentrale frontpage and came up with http://eli.nummer5.de/ – which i really love, <strong>but i do not want to switche themes.</strong>

    Some decent attempts later, trying to adopt the full screen idea with navigation, i used enfold`s blank template, that leads to: http://www.musikzentrale.net/test-home2/. I love the power of the full screen pics, but i am afraid, we loose visitors without the main menu right on the frontpage.

    So i set up version with the full screen slider AND main menu, which is http://www.musikzentrale.net/test-home/ – the pics loose so much of their power, no idea to follow.

    Here is my question: Does anybody has an idea how to set up a full screen slider AND keeping the main menu AND the logo on the frontpage, but the menu transparent? Or maybe you have another cool idea that did not came acrosse me by now? You are welcome!

    Cheers,
    Sebastian.

    #209339

    Hi Sebastian!

    I actually just did something like that for a client the other day and am planning to do a more full write up for the online docs since its such a popular home page style.

    The basics of what you need to do are simple: remove the header background, position it floating on top of the content and then give that first block of content extra padding to push it down below the menu.

    
    /*Removes
    ================================================== */
    
    #header_main {
      border: 0;
    }
    .header_color .header_bg {
      background: transparent;
      border: 0;
    }
    
    /* # Header
    ================================================== */
    
    #top .logo {
      left: -4px;
    }
    
    /*Navigation*/
    .header_color .main_menu ul:first-child > li > a {
      color: #fff; 
      font-size: 15px;
    }
    .header_color .avia-menu-fx {
        background: #aabdd3;
        border-color: #aabdd3;
        display: none;
    }
    /* # Home Page Specifics
    ================================================== */
    
    /*Header*/
    #top.home #header {
      position: absolute;
      padding-top: 40px;
    }
    
    /* #intro */
    #top.home #intro {
      padding-top: 128px;
      height: 710px;
      background: #e6e6e6;
      border: 0;
    }
    

    This assumes that on your home page you have that first item set inside of a color section with the developers field filled in with “intro” so that its wrapped in the #intro ID. On your demo page the first div is #fullscreen_slider_0 . So you would replace intro with that:

    
    #top.home #fullscreen_slider_0 {
      padding-top: 128px;
      height: 710px;
      background: #e6e6e6;
      border: 0;
    }
    

    If you don’t want the transparent background to be on the sub pages then you would prefix the selectors with #top.home just like I’ve done for the #intro section and the modified version for your site specifically.

    Best regards,
    Devin

    #209607

    At least on my page that gives a very strange look. I don´t get the header to be transparent AND the slider to be full page. Would be great if you could write a small manual about this.

    • This reply was modified 10 years, 5 months ago by Michael Oeser.
    #209625

    In addition: The way the menu and slider at http://demo.qodeinteractive.com/elision/ is exactly what I want to achieve. But of course I don´t want to go away from Enfold just because I love it ;-)

    Cheers
    Michael

    #209957

    Hi Devon,
    thank you so much for sharing your work. Unfortunatley it does not work for the musikzentrale website so far. Here is what i have done:

    – disabled custom.css so it does not interfere with the modifications
    – entered this to the Quick CSS field in Enfold -> Styling

    /*Removes
    ================================================== */
    
    #top.home #header_main {
      border: 0;
    }
    .header_color .header_bg {
      background: transparent;
      border: 0;
    }
    
    /* # Header
    ================================================== */
    
    #top.home #top .logo {
      left: -4px;
    }
    
    /*Navigation*/
    .header_color .main_menu ul:first-child > li > a {
      color: #fff; 
      font-size: 15px;
    }
    .header_color .avia-menu-fx {
        background: #aabdd3;
        border-color: #aabdd3;
        display: none;
    }
    /* # Home Page Specifics
    ================================================== */
    
    /*Header*/
    #top.home #header {
      position: absolute;
      padding-top: 40px;
    }
    
    /* #slider */
    #top.home #fullscreen_slider_0 {
      padding-top: 128px;
      height: 710px;
      background: #e6e6e6;
      border: 0;
    }

    It moves the header and the intro section down as supposed to and removes the borders, but header is still white and the full screen slider is to far underneath the header. I assume, i missed something in the styling, so any idea is welcome. Otherwise i am excited to read your tutorial on the Full Screen Homepage soon.

    Thanks again,
    Sebastian.

    #209960

    Hi!

    If you want something like the Elision header. You can use the Small Fixed Header then add this on Quick CSS:

    .header_color .header_bg {
    background-color: transparent;
    }
    
    .header_color div {
    border-color: transparent;
    }
    
    .fixed_header #main {
    padding-top: 0;
    margin-top: -1px;
    }
    

    Regards,
    Ismael

    #209967

    Basically that works but the slider isn´t full page then and the menu remains complete transparent even when the page is scrolled. That makes it almost invisible in fact.

    So this might be a good starting point but not a real solution. Thanks anyway.

    #209987

    Hi!

    Do you have the Fullscreen Slider? Edit js > shortcodes.js, find this code on line 687:

    slide_height = Math.ceil( (viewport / 100) * this.options.height );

    Replace it with:

    slide_height = Math.ceil( (viewport / 100) * this.options.height + 88 );

    Remove browser cache then reload the page.

    Regards,
    Ismael

    #211628

    Not to hijack this thread, but I am doing almost the same exact thing.

    I was wondering, what code can you add to make it so that when you move your mouse over a menu item, it highlights the entire section in that color – in elisions example site, moving your mouse over a menu item highlights the whole block in black. How do I do that instead of the default colored line under the menu item?

    #211669

    Ismael, I have been trying to do the same thing, thanks! You are my hero. The adjustments you made worked perfectly.

    #211808

    Hey!

    Glad it worked. :)

    Regards,
    Ismael

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Inspiration needed: Frontpage with fullscreen pic and alternative menu’ is closed to new replies.