Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #6820

    In Corona theme, how can I make the header transparent in boxed layout, while then keeping an assigned background color to the submenu div and the main menu container?

    I want the tiled body background image to continue through the header with a transparent .png logo over it. I have moved down the main menu to be like tabs on the bottom edge of the header container wrap, which I will keep a certain background color.

    #55592

    Hey,

    you can change the menu background color with:

    #header .container.main_menu {
    background: #fff;
    }

    and the submenu color with:

    #header .submenu {
    background: #000000;
    }

    You can add this code to css/custom.css or the quick css field.

    #55593

    Thanks.

    How about the overall header? After making these adjustments, I am left with white. I have checked Avia settings and tried

    #header{ background:transparent;}

    thanks in advance.

    #55594

    It appears the header, even when assigned transparent, is inheriting the following on the minimum skin:

    #wrap_all, #main{ background: #fff; }

    I took out the #wrap_all from this and also kept the #header style noted in previous comment, and this worked.

    #55595

    I need help with this now. Since the slider is called from the header, the background of the slider is now transparent. Is there any way to address this? I really would like to have the header transparent, which I achieved as above, but then when I returned to my home page saw that the slider background is now also transparent. Can I contain the slider php code in its own div or span and then assign a background color? Any help is much appreciated.

    Thanks.

    #55596

    OK. I figured out a fix. I enclosed the slider php in header file in its own div class and then added css to that class and it worked.

    <div class="hero">

    <?php

    //display slideshow big if one is available

    if(!empty($avia_config)) echo "<div class='container slideshow_big'>".$avia_config."</div>";

    //if we dont are located on the frontpage and if there is no big slideshow availabel display breadcrumb

    if(!is_front_page() && empty($avia_config))

    {

    echo "<div id='breadcrumb_wrapper' class='container'>";

    new avia_breadcrumb(array('delimiter' => '/'));

    echo "</div>";

    }

    ?>

    </div>

    Then I added style:

    .hero{

    background-color:#ffffff;

    }

    All appears to work. Is this an okay fix or a hack that will cause me issues? Thanks.

    #55597

    Hey,

    I think the solution is great. You shouldn’t experience any conflicts, flaws, etc.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘How do I make the header transparent?’ is closed to new replies.