Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 15, 2013 at 11:09 am #23298
    timveach

    I have read the forum and cannot seem to find the solution for Enfold.

    Issue:

    I need to allow for the header and the content area (of course all other areas), to be able to show the body background image through the color. I am working with a client, a band, that wants a Grunge background, and a semi transparent body, header etc. I have been able to accomplish this with AVADA, but I would prefer to use Enfold. Can you send me some suggestions as to the css?

    Thanks

    Tim

    May 15, 2013 at 12:21 pm #119285
    Jasmine Lovelstzy

    I have the same question.

    Ismael helped me with the incarnation theme and it worked (*post: https://kriesi.at/support/topic/transparent-header-1#post-109588 )

    and i tried to use the same css with Enfold but its not working.

    so would also appreciate help with the css for Enfold to make both header and body transparent.

    thx

    jasmine

    May 16, 2013 at 6:47 pm #119286
    Nick

    Hi,

    You both are asking very abstract questions that are difficult to answer without seeing what you have on the pages, etc.. so there are multiple possible combinations with the theme. Could you provide a url please (you can mask it with http://www.goo.gl) so that we can give you the code for you to use with your designs.

    Here is the css code I use to make everything including header, body, footer, socket transparent. Please add this CSS below to Quick CSS or to /css/custom.css file.

    #top #main,#top .html_stretched #wrap_all,#top .alternate_color,#top .header_color,#top .main_color,#top .header_color div,#top #header,#top .header_color .container_wrap_meta,#top .header_color .header_bg,#top .footer_color,#top .footer_color,#top .socket_color {
    
background-color:rgba(255,255,255,0) !important;
    
}
    
#top .container_wrap {
    
border-top-width:0px !important;
    
}
    
#top #header_main {
    
border-bottom-width: 0px !important;
    
}

    Just please make sure that you add a background in Enfold > Styling > General. and remove the color from ‘Body Background color’ input box right above where you will upload the image on that page.

    Thanks,

    Nick

    May 16, 2013 at 7:16 pm #119287
    timveach

    Hi Nick,

    Thanks for the response!

    I am running locally on Desktop Server (mamp).

    What I can do is first try what you have given me, and tonight load this to a test site and post the credentials for you.

    Tim

    May 16, 2013 at 11:45 pm #119288
    andypeck

    Hi there,

    I just posted a similar question and I just tried your suggestion Nick. Thanks.

    However (and theres always a ‘but’) it only works in boxed mode. I want to replicate the following

    http://www.clipular.com/c?6029094=ElAiRoselI8riSzj5UpygB3eFx0&f=.png

    …….. which means the dark footer needs to reach edge to edge (left and right) with no margins and I guess the transparent slider would need to do the same. Is there no way to do the same effect without being in boxed mode but instead be in full width. It needs to be responsive too.

    The large oranges at the top would be in the transparent slider. Is it also possible to have the bottom oranges overlap between the main body and the footer.

    Cheers

    Andy

    May 17, 2013 at 7:14 am #119289
    Jasmine Lovelstzy

    Perfect Nick exactly what we needed :)

    Thanks so much,

    jasmine

    May 17, 2013 at 4:31 pm #119290
    Nick

    @andypeck try out the code first. boxed layout stops being boxed when one removes the box. (i guess that makes sense, lol). Yes it can be done how you indicated custom bg image with a transparent png of an orange inside a slider. Can use boxed layout and my css, just need to switch off the menus and logo with display:none;

    http://www.clipular.com/c?6131062=57q1pMA8XbQNfs_ZztPPtZj6a_0&f=.png

    @jasmine good. enjoy the theme.

    Thanks,

    Nick

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Transparent content and header’ is closed to new replies.