Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 14, 2021 at 4:35 am #1310063
    BossBitch76

    Hi, I need some help with adding transparency to a layered background image on my client’s website. I’ve been unable to achieve certain requests yet for her but I’m optimistic you may be able to help me.

    I’m trying to recreate this look (https://prnt.sc/1ay99el) using rounded edges and transparency on all my main pages, yet still have a full-width video as the homepage, so using Boxed Layout or Fixed Frame won’t work, from what I tried. See links below for examples. Yet using color sections and layering columns has a limit and I’m unable to get enough layers in to create the transparency and the background image…

    Can you help me with CSS or coding to achieve the correct look from the screenshots where the white background is somewhat transparent over the big bubble background image? I’ve been unable to get it so far. I can also provide admin login below for faster assistance.

    For example, on this page: http://www.islandencoreentertainment.com/maui-musicians/pacifica/ it looks perfect except two problems: 1) the white background should be about 30% transparent showing the background underneath and 2) Edges should be slightly rounded and softer on the white transparent frame like in the “desired look” screenshots below.

    Thank you so much!! I appreciate your help.

    July 17, 2021 at 7:46 pm #1310524
    Mike

    Hey BossBitch76,
    Thank you for your patience, for your /about/ & individual artist pages this css seems to work:

    #main .entry-content-wrapper > .flex_column.av_one_full {
background-color: rgba(255, 255, 255, 0.3) !important;
}
#main .entry-content-wrapper > .flex_column.av_one_full img {
    border-radius: 50px;
}

    For your pages using the masonry element this seems to work:

    #main .main_color .av-masonry-outerimage-container {
    background-color: transparent;
}
#main .main_color .av-masonry-image-container,
#main .main_color .av-masonry-outerimage-container {
	border-radius: 50px;
}

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

    Best regards,
    Mike

    July 18, 2021 at 9:02 am #1310573
    Guenni007

    maybe it is a bit nicer if your whole masonry has a semitransparent background – and the upcomming titles will have a rounded corner on the bottom too:
    So try to replace the last code of Mike for the masonries and take this one:

    #main .main_color .av-masonry {
    background-color: transparent !important;
}

#main .main_color .av-masonry-image-container,
#main .main_color .av-masonry-outerimage-container {
	border-radius: 50px;
} 

#main .main_color .av-inner-masonry-content.site-background {
  border-radius: 0 0 50px 50px;
}
    July 18, 2021 at 2:10 pm #1310597
    Mike

    Hi,
    Thank you Guenni007

    Best regards,
    Mike

    July 18, 2021 at 11:27 pm #1310644
    BossBitch76
    This reply has been marked as private.
    July 21, 2021 at 1:13 pm #1311138
    Mike

    Hi,
    Thank you for your patience, to add extra padding around the easy slider on your /about/ page please try this css:

    #top.page-id-310 .avia-slideshow {
	padding: 50px;
}

    adjust the number to suit.
    For the masonry pages like /artists/ on mobile, mobile devices do not have a “hover” like a desktop does, this is why the theme shows the title like this. For an alternative we can adjust the title to take less space on mobile:

    @media only screen and (max-width: 767px) { 
#main .main_color .av-masonry-entry .av-inner-masonry-content {
    padding: 5px 25px;
}
#main .main_color .av-masonry-entry .av-masonry-entry-title+.av-masonry-entry-content {
    padding-top: 0px;
    line-height: 16px;
}
}

    2021-07-21_001.jpg
    For your audio players, they are rendering as two different players in the source code, and when I test on my site I get the light version, so I’m going to need to look at this some more before I make a recommendation. I see that you are merging and compressing your CSS + JS with the theme options and you are using Autoptimize, could you disable Autoptimize for a while while we test, the plugin can give odd effects when the theme & the plugin are both merging and compressing.

    Best regards,
    Mike

    July 22, 2021 at 1:06 am #1311276
    BossBitch76

    Thank you! I’ve disabled Autoptimize while you look into the audio players display.

    Thanks!!

    July 22, 2021 at 2:00 pm #1311481
    Mike

    Hi,
    I have investigated the audio styling further and found to force the light styling you would set Enfold Theme Options ▸ Performance ▸ Disable Features ▸ Disable self hosted video and audio features
    Using the default setting of Default ▸ only load when needed (recommended) will also work depending on other theme styling settings and the page/post type, but to force it uniformly choose to disable it. I have done this for you, please clear your browser cache and check.

    Best regards,
    Mike

    July 23, 2021 at 8:28 pm #1311970
    BossBitch76

    Thank you, Mike, this looks great!! I am so grateful for your help! Thanks you Kriesi team!

    July 23, 2021 at 8:42 pm #1311973
    Yigit

    Hi,

    Glad Mike could help! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Enjoy the rest of your day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Help with transparency and layering background images’ is closed to new replies.