Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 26, 2020 at 2:11 am #1178422
    smarta-brett

    I have made a background image on my woocommerce template generated pages with the css shown below

    how can I make the header of this page “transparent & glassy” as my other pages are set to appear (or just plain transparent would do)

    .template-shop {
    background-image: url(https://aussiehiddentreasures.com/wp-content/uploads/2020/01/bg5-light.jpg);
    background-repeat: repeat;
    background-position: top left;
}
    January 27, 2020 at 11:26 pm #1178830
    Basilis

    Hey smarta-brett,

    Show us your page please

    Best regards,
    Basilis

    January 27, 2020 at 11:28 pm #1178832
    smarta-brett

    front end password is
    aussie

    category page
    https://aussiehiddentreasures.com/product-category/fabrics/

    single product page
    https://aussiehiddentreasures.com/product/fly-nets-for-hats/

    January 29, 2020 at 7:56 pm #1179530
    Victoria

    Hi smarta-brett,

    Could you please attach a mockup of what you’re trying to achieve?

    The website is not loading on my end.

    Best regards,
    Victoria

    January 29, 2020 at 10:11 pm #1179616
    smarta-brett

    Hi Victoria
    Thats weird it’s not loading
    maybe the server (located in the US) has blocked your IP for some reason
    can you get to any of these other sites?
    https://jindilli.com.au/
    https://harrietjane.com.au/

    if not it would appear you IP has been blocked – can you let me know your IP address so i can whitelist it

    if you can get to those other sites let me know and I’ll ask my server techs to see why
    in this case location & IP would be helpful too

    February 1, 2020 at 8:03 pm #1180540
    Mike

    Hi,
    Sorry for the late reply and thanks for the links, I see one is a single product page and the other is an archive page and they have different background images, so I worked those images into this css for the transparent headers.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.woocommerce-page #header {
    position: absolute;
    background: rgba(255,255,255,0.6);
}

#top.woocommerce-page #header .header_bg  {
    background: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
}
#top.archive.woocommerce-page .template-shop,#top.archive.woocommerce-page #main {
	top:-116px !important; 
    background-image: url(https://aussiehiddentreasures.com/wp-content/uploads/2020/01/bg5-light.jpg);
    background-repeat: repeat;
    background-position: top left;
}
#top.single-product.woocommerce-page .template-shop,#top.single-product.woocommerce-page #main {
	top:-116px !important; 
    background-image: url(https://aussiehiddentreasures.com/wp-content/uploads/2020/01/bg1.jpg);
    background-repeat: repeat;
    background-position: top left;
}

#top.woocommerce-page .template-shop > .container {
	margin-top: 116px !important;
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    February 2, 2020 at 11:08 pm #1180713
    smarta-brett

    no sorry – that did not work
    it moved the displaying elements up underneath the menu header

    it’s ok – I can live with it as it is

    February 3, 2020 at 2:24 am #1180737
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘transparent header for woocommerce pages’ is closed to new replies.