Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1015334

    How is the preference for the transparent background color of that. Found the hover color in backend but not a possibility to have a transparent color. No overlay color but a hover color, thats the goal.

    [av_button_big label='' description_pos='below' link='manually,http://.../' link_target='_self' icon_select='yes-left-icon' icon_hover='aviaTBaviaTBicon_hover' icon='ue82d' font='entypo-fontello' custom_font='#ffffff' color='' custom_bg='#444444' color_hover='theme-color-subtle' custom_bg_hover='#444444' custom_class='' av_uid='av-crell4']
    
    [/av_button_big]
    #1015375

    Hey AWZ,

    Please add more context to the question. Perhaps a link to the site/page in question so we can see what you need exactly.

    Best regards,
    Jordan Shannon

    #1015675

    Hey Jordan,

    roger. You find the example you need. This overlay image link to a pdf. I want to change two things
    – the top padding and
    – the grey overlay to totally transparent
    The hover is ok. In the backend you can edit this thing but not as wished.

    Thanks Sven

    #1016012

    Hi AWZ,

    Thanks for giving us the link.
    As for the grey overlay, try adding this css code in Quick CSS (located in Enfold > General Styling):

    #top .main_color .avia-button .image-overlay {
        background: transparent !important;
    }

    As for the top padding, are you referring on top of the image? since I could see there’s a button on top of it.
    Best regards,
    Nikko

    #1016479

    Thanks Nikko,

    I´ve tested it. It seems that it works but the image is still wishy washy (not saturated) and I don´t know why. Like there is still a layer above…
    Correct. There is a text button on top. Do you have the right selector for that. Can´t find it out – even with inspector.

    Thanks Sven

    #1016496

    Hello AWZ, try to add value directly (for example)
    rgba(255, 255, 255, 0)
    directly instead of (for example)
    #FFFFFF
    On my site it works :)
    Milan

    #1016501

    Hi,

    Thanks for sharing @Milan, much appreciated. Did you try that out @AWZ?

    Best regards,
    Rikard

    #1016525

    @Milan

    direct in backend preference or as CSS?

    #top .main_color .avia-button .image-overlay {
        background-color: rgba(255, 255, 255, 0);
    background: transparent !important;
    }

    Thanks

    #1016533

    I mean in beckend, code with no spaces.
    rgba(255,255,255,0)
    or
    rgba(255,255,255,0.01)

    See on this image:
    RGBA

    • This reply was modified 6 years, 2 months ago by Milan. Reason: grammar, code
    #1016564

    Cool & thank you Milan!
    This is a good hint and it works for the colors in the enfold backend. But in my case this is not the solution, because you set the menu links and I have a problem with linked image overlays. I have a german version. Maybe the translation doesn´t fit. You find it here:
    – extended styling
    – various
    – linked image overlay

    @enfold
    : This is a method to set transparent colors works, but the preview doesn´t show the color correctly in the backend. This is a display issue. Maybe you insert in a upcoming enfold theme update the possibility to set transparent colors correctly. I see only hexa and hsb.

    Conclusion
    I want to get rid of two things:

    • image overlay grey color (NOT hover)
    • button obove (for a equal padding)

    Screenshots
    1) Backend

    2) Testsettings. You can only edit the hover color, the symbol color and the symbol bg

    3) Result. Left is hover. Right is the overlay, that I want get rid of.

    BG Sven

    • This reply was modified 6 years, 2 months ago by AWZ. Reason: Screenshots doesn´t display
    #1016573

    @Rikard Is there a restriction about images? Screenshots doesn´t display…

    • This reply was modified 6 years, 2 months ago by AWZ.
    #1016577

    It should work, I tested it also for image overlay:
    overlay
    But as you said, you have overlay over images when they are not hovered? Or perhaps I should stay silent here not to make it messy because some thing are not clear to me :)

    Screenshot/images should be placed somewhere online, then post a link here.

    #1016597

    Displaying of the screenshots doesn´t work. Here are the links

    1) Backend
    BACKEND SELECTION
    2) Testsettings. You can only edit the hover color, the symbol color and the symbol bg
    TESTSETTINGS
    3) Result. Left is the hover image with the colors you can edit in the backend. Right is the overlay color and the symbol on top, that I want get rid of.
    RESULT

    #1017369

    Hi,

    The images look a little faded because the opacity of the button description is set to 0.7 by default. You should set it to 1.

    #top .avia-button-fullwidth .av-button-description {
        opacity: 1;
    }

    Best regards,
    Ismael

    #1017754

    Hi Ismael,

    thanks. Very interesting, it works. This is a setting from enfold.

    NOT SOLVED
    I want to get rid of the button obove for an equal padding of the background color of the linked overlay image.

    SOLUTION FOR OPACITY / COLOR (conclusion of the threads)
    Opacity of the image

    #top .main_color .avia-button .image-overlay {
        background: transparent !important;
    }
    

    Background Color transparent: two Versions

    .avia-button {background-color: rgba(255, 255, 255, 0);}
    
    #top .main_color .avia-button .image-overlay {
        background: transparent !important;
    }
    

    Best regards Sven

    #1018522

    Hi Sven,

    Can you try adding this css code:

    .page-id-4336 #after_full_slider_1 .avia-button.avia-button-fullwidth span.avia_button_icon, 
    .page-id-4336 #after_full_slider_1 .avia-button.avia-button-fullwidth span.avia_iconbox_title {
        display: none;
    }
    
    .page-id-4336 #after_full_slider_1 .avia-button.avia-button-fullwidth .av-button-description p {
        margin-top: 0;
    }
    
    .page-id-4336 #after_full_slider_1 .avia-button.avia-button-fullwidth {
        background: transparent;
    }

    Best regards,
    Nikko

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