CSS for Custom Tab w/ 100% opacity while remaining flybox is partly transparent?

  • Resolved Jane

    (@jstepak)


    9 years ago

    Hi – I really like your plugin and it’s working perfectly except for one styling option that I’d like to implement. I’ve defined a custom tab using a .png file at: https://www.jswebstudio.com/files/images/blue-edge.png. I have defined the wp-flybox to be partially transparent using:

    .wp-flybox_tab {
    opacity: 0.75!important;
    filter:alpha(opacity=75)!important;
    }

    I want the custom tab image to be 100% opaque (i.e. not transparent at all). I tried to achieve this by defining:

    .wp_but {
    opacity: 1!important;
    filter:alpha(opacity=100)!important;
    }

    but the custom tab is still partially transparent like the rest of the flyout area.

    Can you suggest CSS that would allow me to display the custom tab as fully opaque and the rest of the flyout box as partially opaque (75%)?

    You can view this example at https://www.jswebstudio.com

    Thanks in advance for your help!

    https://www.ads-software.com/plugins/wp-flybox/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author cconoly

    (@cconoly)

    Oh I see. There are ways we can do it that require placing CSS in several locations, or maybe even editing the code, but then when it updates you will lose it. Here is what I would do…

    Remove all your CSS for transparency and under your custom tab settings, under the option “Background Color (if visible):” change it from #ffffff to #ffffff;opacity:.75;filter:alpha(opacity=75) . This adds it directly into the html markup and is only applied to the box, not the tab. It will also stay on any future updates.

    Try that and let me know how it works.

    Thread Starter Jane

    (@jstepak)

    Hi CConoly – Thanks so much for your suggestion to achieve the opacity for the tab but not the background of the flyout. Your suggestion worked perfectly!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS for Custom Tab w/ 100% opacity while remaining flybox is partly transparent?’ is closed to new replies.