[Easy Blogging] Bug: Quirks and overlaps in display of step titles in Wizard Mode

This appears in all browsers I used (Chrome, IE, Safari, FF). I have multisite.

Using latest version of Easy Blogging (v.3.0.4)

  • Strategerizer
    • Site Builder, Child of Zeus

    Update: Issue seems to not reproduce consistently. Right now I have two Chrome windows open to the same URL of a wizard mode page from a subsite... one displays the overlap quirk, the other one displays fine. Cleared cache and still one the two window display the wizard mode menu differently.

  • Strategerizer
    • Site Builder, Child of Zeus

    OK, after doing a bit of investigation, here is what I think is happening...

    The display of the menu elements are governed by CSS inline in the php file and external CSS. So depending on order in which CSS instructions load and get processed, the results can vary.

    Specifically looking at the code for the blue double-arrow "next" image here are the two versions of the CSS:

    From line 186 of /wp-admin/options-general.php:

    #menu ul li a img {
    height: 22px;
    margin: 1px 4px 4px 4px;
    width: 22px;
    }

    From line 187 of /wp-content/plugins/easyblogging/themes/default/style.css:

    #menu ul li a img {
    clear: both;
    float: left;
    width: 32px;
    height: 32px;
    margin: 4px;
    }

    Both are addressing same selector...

    The solution that comes to mind is to use "!important" on the latter. Maybe there are other better solutions also.

  • Vladislav
    • Dead Eye Dev

    Hello,

    I guess the issue was probably more window size related - when viewed under 1280px width, the menu goes into "small mode", where the item sizes are reduced. Unfortunately, this didn't sit too well with the wizard menu items. The issue should be fixed with the latest plugin release (v3.1.5, just released).

  • Strategerizer
    • Site Builder, Child of Zeus

    VeBailovity, I installed the update. There is no longer the weirdness of the overlap. One thing that I notice now (testing different window widths based on your feedback) that as the screen is wider, the steps are labeled with two lines of text and when window is narrower, one line.

    EXAMPLE
    My first wizard step is labeled "Change Your Website Title".

    Narrow screen displays just the label showing the step title:
    Change Your Website Title

    Wide screen displays two lines of text:
    Step 1:
    Change Your Website Title

    I assume this is by design but I think I should just double-check that with you... is that right?

    Otherwise it looks great; your update resolves the overlap display issue.

  • Vladislav
    • Dead Eye Dev

    Hi,

    Indeed, that is by design. The Wizard steps titles will typically be probably longer then just a word or two and having two lines is not really a good option with such limited space. I'm glad the issue is sorted for you, as well as our other users.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.