WordPress.org

1. bamajr
   Member
   Posted 4 months ago #

   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/

2. mordauk
   Member
   Posted 4 months ago #

   I'll check it out and update as necessary.

3. mordauk
   Member
   Posted 4 months ago #

   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.

4. bamajr
   Member
   Posted 3 months ago #

   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.

5. mordauk
   Member
   Posted 3 months ago #

   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.

6. bamajr
   Member
   Posted 3 months ago #

   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.

7. mordauk
   Member
   Posted 3 months ago #

   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.

8. bamajr
   Member
   Posted 3 months ago #

   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?

9. bamajr
   Member
   Posted 3 months ago #

   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.

10. mordauk
    Member
    Posted 3 months ago #

    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.

11. mordauk
    Member
    Posted 3 months ago #

    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.

Reply

You must log in to post.