WordPress.org

Ready to get started?Download WordPress

Forums

Pagely MultiEdit
[Plugin: Page.ly MultiEdit] Resolved: Admin menu buttons break in middle when line wraps (4 posts)

  1. trishahdee
    Member
    Posted 2 years ago #

    When I created 9 editable areas for one template the Admin area tabs broke in the middle because the CamelCase in the main php file was adding spaces between words. Here's the problem: Screen Shot of Broken Admin Menu

    I worked for over 2 hours trying all types of solutions, from removing the CamelCase to adding spaces between items to changing from span's to li's... ugh! I finally went back to the drawing board and found a pure CSS solution. The trick is telling the span to display: inline-block.

    Here is a screen shot of my Admin menu now: Screen /Shot of my CSS fix

    And here is the CSS:

    #multiEditControl {
        display: block;
        height: auto;
        margin: 0;
    }
    #multiEditControl span.multieditbutton {
        background: none repeat scroll 0 0 #F1F1F1;
        border: 1px solid #CCCCCC;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 1px 1px 1px 1px #CCCCCC inset;
        color: #21759B;
        cursor: pointer;
        display: inline-block;
        margin: 3px 5px 6px;
        padding: 6px 10px;
        -webkit-box-shadow: inset 2px 2px 3px 3px #ddd;
        -moz-box-shadow: inset 2px 2px 3px 3px #ddd;
        box-shadow: inset 2px 2px 3px 3px #ddd;
    }
    
    #multiEditControl span.multieditbutton:hover {
        background: none repeat scroll 0 0 #FFFFFF;
        border-color: #21759B;
        -webkit-box-shadow: 2px 3px 4px 1px #AAAAAA;
        -moz-box-shadow: 2px 3px 4px 1px #AAAAAA;
        box-shadow: 2px 3px 4px 1px #AAAAAA;
        padding: 6px 10px;
    }
    #multiEditControl span.multieditbutton.selected {
        background: none repeat scroll 0 0 #FFFFFF;
        border-color: #21759B;
        -webkit-box-shadow: 2px 3px 4px 1px #AAAAAA;
        -moz-box-shadow: 2px 3px 4px 1px #AAAAAA;
        box-shadow: 2px 3px 4px 1px #AAAAAA;
        padding: 6px 10px;
    }

    Hope this helps someone else.

    Trishah

    http://wordpress.org/extend/plugins/pagely-multiedit/

  2. joshua strebel
    Member
    Plugin Author

    Posted 1 year ago #

    thanks

  3. trishahdee
    Member
    Posted 1 year ago #

    Your welcome :D

  4. dmiranda9872
    Member
    Posted 1 year ago #

    Fantastic work, I was looking for another solution and found this. Thank you for making the world a better place.
    -

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic