Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • July 25, 2022 at 4:49 pm #1359397
    welswebmaster

    Hi Enfold team,
    Thank you for your support!

    It works, but I think I’m heading in the wrong direction. Using a fixed right background has been successful for me via color section. However, with the method I’m using, it requires CSS per page; per container. There must be a better way.

    Goals:

    – On all pages, except for the homepage, I want to float the logo top-right – Fixed so that it remains when scrolling.
    – When scrolling, I want to see the floating logo beneath the content, and not covering it up with each element container background.
    – I’d like to declare this once and not for each page so that blog posts also display the top right background, not just the pages.
    – Header transparent (which I selected, but mobile still displays background)

    I should also mention that I am using a fake PNG for the logo (top right) because I want to use the backgroumd watermark image instead.

    How can this be done in a better way using Enfold/CSS or ?? Thanks for your help with this logo/transparency.
    (See site URLs in private )

    July 25, 2022 at 4:50 pm #1359398
    welswebmaster
    This reply has been marked as private.
    July 25, 2022 at 8:42 pm #1359411
    Rikard

    Hi,

    So you are adding the background using a Color Section on each page, and you want to continue doing so? If so, then you might want to add a class to each section, and target your CSS that way? If the section is always the first on each page, then you should be able to use this ID in your CSS instead:

    #av_section_1

    Best regards,
    Rikard

    July 25, 2022 at 8:47 pm #1359414
    welswebmaster
    This reply has been marked as private.
    July 26, 2022 at 11:07 am #1359444
    Rikard

    Hi,

    Thanks for the update. So you want to add the background to all single posts? If so, then please try this CSS:

    .single-post div.container_wrap_first {
    background-image: url(YOUR IMAGE URL GOES HERE);
    background-repeat: no-repeat;
    background-position: top right;
}

    Best regards,
    Rikard

    July 26, 2022 at 1:03 pm #1359458
    welswebmaster

    Hi Rikard,
    That worked well for posts, but I want it for everything, pages, categories, archives. How do we include “all”? Use body? That didn’t work when I tried it.
    Also, one of the goals I listed was to have every ALB element and including the footer to have background transparent so that it is dealt with all at once, not individual CSS / element.

    Thanks for working with me.

    July 26, 2022 at 3:15 pm #1359474
    Rikard

    Hi,

    Thanks for the update. So maybe it would be better if you added the background image under General Styling->Main Content in the theme options?

    Best regards,
    Rikard

    July 26, 2022 at 3:36 pm #1359476
    welswebmaster

    Bingo! Thanks. But how to handle the transparency issue so that it doesn’t cover up the background image on each ALB element and the footer? Also – Header transparent (which I selected, but mobile still displays background).

    July 26, 2022 at 7:18 pm #1359492
    Rikard

    Hi,

    It seems to work as expected on all the pages you linked to, is there a page where we can see the problem you are referring to? Or is the problem that you want a transparent header on mobile? If any element has a background, the that will cover the background image, so you would need CSS for remove each background. If the footer is covering the background, then it might help by simply making the page taller.

    Best regards,
    Rikard

    July 26, 2022 at 7:39 pm #1359494
    welswebmaster

    Hi Richard,
    Thanks for your response. Yes, the footer. And, I was asking for a global CSS for all ALB backgrounds to be transparent rather than assigning to each element.

    July 26, 2022 at 10:27 pm #1359499
    welswebmaster
    This reply has been marked as private.
    July 27, 2022 at 10:43 am #1359529
    Rikard

    Hi,

    Please refer to this on how to make the header transparent on mobile: https://kriesi.at/documentation/enfold/header/#transparent-header-on-mobile

    We don’t have code to remove all backgrounds from ALB elements unfortunately. If you need help with custom CSS like that, then please create a test page where we can see the elements where you want to remove the backgrounds.

    Best regards,
    Rikard

    July 27, 2022 at 3:46 pm #1359567
    welswebmaster

    Thanks for your help, Rikard and the header documentation : )
    Regarding CSS for ALB global transparency – ok, understandable. I’ll live with it.
    RE: Transparent footer, I’ll live with that as well.

    July 27, 2022 at 4:50 pm #1359577
    Rikard

    Hi,

    Thanks for the update. We’ll leave this thread open in case you should need any further help on the topic.

    Best regards,
    Rikard

    July 31, 2022 at 1:30 pm #1359998
    welswebmaster

    Hi again, per your suggestion, I added the background image under General Styling->Main Content which is working. What about making the background image responsive though? Its giant on mobile view, how can I scale that down to 50%?
    Thanks

    July 31, 2022 at 8:08 pm #1360019
    Mike

    Hi,
    Thanks for your question, for the background image on your page /faq/ you can change the background size of it on mobile devices with this css:

    @media only screen and (max-width: 770px) { 
#main > .main_color {
  background-size: 50%;
}
}

    After applying the css, please clear your browser cache and check and let us know of any pages this is not working for you, so we can investigate.

    Best regards,
    Mike

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.