WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
[resolved] Colorbox z-index Pops Under Branding Element (5 posts)

  1. dwdallam
    Member
    Posted 1 year ago #

    Hi guys and gals,

    I have a problem with j Query Colorbox popping under the branding/menu. I tried:
    Had no effect.
    #branding {
    position: relative;
    z-index: 5000;
    With no effect.

    http://www.dwdallam.com

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    A higher z-index makes an element stack on top of another -- so that z-index seems to be doing the opposite of what you want?

    http://www.w3schools.com/cssref/pr_pos_z-index.asp

  3. dwdallam
    Member
    Posted 1 year ago #

    It seem that the theme's z index for that element is 99999 (who knows why so high) while colorbox is the same--so you get conflicts.

    I understand how z index works, but what I can't understand is why lowering that z index in the twenty-eleven theme css doesn't solve the problem.

  4. dwdallam
    Member
    Posted 1 year ago #

    OK here is the fix. This allows you to leave the ColorBox css intact.

    The JQuery ColorBox's z-index is 999 and I know for sure the header css z index for the twenty-eleven theme is 9999. I changed the header css to 990 and it worked. (I couldn't find the CB css to change it, as each theme has it's individual css file, and I'd have to change them all. No Idea why each CB theme has its own zindex).

    In any event, there is no reason for the WP theme to have an index of 9999. No idea why they did that.

    #branding {
    border-top: 2px solid #BBBBBB;
    padding-bottom: 10px;
    position: relative;
    z-index: 9999; <--original
    }

    Fix:
    #branding {
    position: relative;
    z-index: 990;
    }

    For those looking to fix this, change that in your child>style.css file. Search for "child folder" on WP site if you are not familiar with it.

  5. dwdallam
    Member
    Posted 1 year ago #

    I need to say also that this is not a problem unless I use Fotomoto buy buttons under the images. It seem to now be some conflict with the twenty-eleven theme and the dynamic output of the colorbox java.
    Although he pop-under solution is fixed, the Colorbx is still not working as it should when the FM buy buttons are enabled.

    Although changing the z index of the theme solved the pop under problem, there is another problem now--when the Fotomoto buttons are enabled.

    The problem, as I didn't notice till now, is that the Colorbox overlay dimming the website page isn't working for the header image. It does not get dimmed.

    Colorbox jquery code itself is applying

    "element.syle"

    which is why I could not find it in any of the CB css files. It gets applied dynamical on run.

    I just wanted to update this for anyone who might be trying to solve a similar problem.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic