WordPress.org

Ready to get started?Download WordPress

Forums

Simple Notices
Conflict with Twenty Eleven 1.3 CSS (11 posts)

  1. bamajr
    Member
    Posted 2 years 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. Pippin Williamson
    Pippin's Plugins and Plugin Reviewer
    Plugin Author

    Posted 2 years ago #

    I'll check it out and update as necessary.

  3. Pippin Williamson
    Pippin's Plugins and Plugin Reviewer
    Plugin Author

    Posted 2 years 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 2 years 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. Pippin Williamson
    Pippin's Plugins and Plugin Reviewer
    Plugin Author

    Posted 2 years 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 2 years 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. Pippin Williamson
    Pippin's Plugins and Plugin Reviewer
    Plugin Author

    Posted 2 years 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 2 years 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?
    5. bamajr
      Member
      Posted 2 years 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.

    6. Pippin Williamson
      Pippin's Plugins and Plugin Reviewer
      Plugin Author

      Posted 2 years 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.

    7. Pippin Williamson
      Pippin's Plugins and Plugin Reviewer
      Plugin Author

      Posted 2 years 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.

    Topic Closed

    This topic has been closed to new replies.

    About this Plugin

    About this Topic