Support » Plugin: Simple Notices » [Plugin: Simple Notices] Conflict with Twenty Eleven 1.3 CSS

  • If a person is using the Twenty Eleven 1.3 theme from WordPress and chooses to use your plugin, the CSS Code:

    #branding {
     border-top: 2px solid #0A0A0A;
    }

    in dark.css and

    #branding {
    border-top: 2px solid #BBB;

    in style.css appears over the top of the notice, created by your plugin, making it look like a dark or light horizontal rule, is splitting the Notice area in half.

    http://wordpress.org/extend/plugins/simple-notices/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Pippin Williamson

    (@mordauk)

    Pippin's Plugins and Plugin Reviewer

    I’ll check it out and update as necessary.

    Plugin Author Pippin Williamson

    (@mordauk)

    Pippin's Plugins and Plugin Reviewer

    I actually was not able to replicate the issue, but I have just updated the plugin to fix some text colors when using the dark theme.

    I can duplicate this issue over and over again. I’ve tried it on several WordPress installations including clean installs.

    Step 1: Install WordPress
    Step 2: Log in to WordPress
    Step 3: Go to: Appearance > Theme Options
    Step 4: Set “Color Scheme” to dark and “Default Layout” to content on right.
    Step 5: Click the “Save Changes” button
    Step 6: Install “Simple Notices” plugin.
    Step 7: Activate “Simple Notices” plugin.
    Step 8: Go to: Notices > Add New & create a new notice
    Step 9: Click on the “Publish” button
    Step 10: Navigate to the homepage of the WordPress Site (I.E. http://yourWordPressSite.tld) to see the problem.

    Even after your update, it still does not work correctly.

    Each time I have verified this issue, it is a basic install of WordPress v3.3.1 with the default 2011 Theme. I do not activate any of the default plugins and I immediately install your plugin. So, with no customization at all, except for your plugin, I’m able to see that your plugin isn’t working as it should.

    Plugin Author Pippin Williamson

    (@mordauk)

    Pippin's Plugins and Plugin Reviewer

    I just tested with your exact steps and still don’t see it. See the image below for how it shows up to me.

    Screenshot

    Can you post a screenshot of what you see? I’d like to fix it.

    ScreenShots for Firefox:

    1. Firefox-Logged Out
    2. Firefox-Logged In

    ScreenShots for Google:

    1. Google-Logged Out
    2. Google-Logged In

    ScreenShots for Opera:

    1. Opera-Logged Out
    2. Opera-Logged In

    Notice how the text in the “Notice Bar” is all crowded to the left and the Big BLACK LINE in the middle.

    Plugin Author Pippin Williamson

    (@mordauk)

    Pippin's Plugins and Plugin Reviewer

    Ah interesting. Yeah, that definitely has never happened for me, but I think I know what it is.

    The notification area has a z-index of 999; #branding has a z-index of 2.

    For some reason on your installs, the z-index: 999 is not getting applied. Can you confirm that it is there? use the inspector in Chrome.

    The z-index of your notification area is 999;

    However, the z-index of #branding is 9999;

    Here’s what I’ve done, to help verify:

    1. When I change the #branding z-index to 999 or less, the Big BLACK LINE in the middle goes away, but it does not address the text in the “Notice Bar” being crowded all the way to the left.
    2. I looked at the CSS code, for the default installation of the 2011 Theme (by WordPress) and the z-index of #branding (when the “Color Scheme” is set to dark and “Default Layout” is set to content on right.) is 9999, no matter how many times it is deleted, downloaded and re-activated.
    3. I’ve verified my steps on three different, clean WordPress installations, with the same result. When the steps I outlined above, are followed and a person doesn’t see the issues I reported, they either have another plugin/mod, which is interfering or they don’t have the 2011 Theme installed/activated in the manner I outlined. The z-index setting of #branded is what comes built-in to the WordPress 2011 Theme, when downloaded from WordPress.
    4. I question why the z-index of branding is set to 9999 but cannot find a real reason. However, a point of interest: The entire header is styled with the #branding css, and only the border-top is being affected by the z-index. Why isn’t the entire header area displaying on top of the notifications area, since it has been assigned a z-index, higher than the notification area?

      I would like to update my last post…

      The z-index of #branding, is 9999 regardless of which “Color Scheme” is selected or “Default Layout” is chosen.

      Meaning, the issue I reported, occurs on all “Color Scheme” and “Default Layout” combinations, when using the 2011 theme.

      Plugin Author Pippin Williamson

      (@mordauk)

      Pippin's Plugins and Plugin Reviewer

      Ok I’ve just done another completely fresh install and do see the z-index this time.

      It’s interesting that my regular up-to-date install (including latest version of 2011) does not have the 9999 z-index issue.

      The text being over to the left is the correct display. The notification area is built to be full width, with padding on either side for the text.

      I’m going to see about fixing the 999 z-index issue in 2011.

      Plugin Author Pippin Williamson

      (@mordauk)

      Pippin's Plugins and Plugin Reviewer

      Ok by setting the #notification-area to 9999, the problem should be fixed. The HTML for the notification is below the #branding area, so it shows on top.

    Viewing 10 replies - 1 through 10 (of 10 total)
    • The topic ‘[Plugin: Simple Notices] Conflict with Twenty Eleven 1.3 CSS’ is closed to new replies.