fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] dw_styles2013-01-02 06:25 pm

Upcoming changes to contextual hover menu styling (beta)

For those of you on beta, expect some changes to the contextual hover menu styling. The changes are not live yet; this is just so you don't suddenly wake up to find your journals have changed with no explanation.

If you haven't turned on the JS on Journal beta, you won't notice any changes.

If you are on the beta, then you'll notice that the contextual hover menu will look like this:

The changes to appearance are relatively minor: we've spaced things out a bit more and given each link more room to breath; unshrunk the text; made the border less abrupt; increased the icon size.

The bigger change is in behavior, to trigger the menu only when you've hovered over a userhead / icon deliberately, rather than just passed your mouse over, and to get rid of some annoying bugs where the menu would show up when you might not want it / not show up when you did want it. Which isn't precisely relevant to this community, but just so you know!

What is more relevant: if you're interested in styling it further for your own styles, the soon-to-be new markup is under the cut.

The biggest change is that we no longer have an .Inner, and that some of the elements have been reordered.

Old markup:

<div class="ippu ContextualPopup">
    <div>
        <div class="Inner">
            <div class="Userpic">
                <a href=""><img src="" width="" height=""></a>
            </div>
            <div class="Content">
                <div class="Relation RelationshipStatus">
                    You have granted access to username
                    <br>
                    You have subscribed to username
                </div>
                <span>
                    <a href="">Send message</a>
                </span>
                <br>
                <span>
                    <span class="RemoveTrust">
                        <a href="">Remove access</a>
                    </span>
                </span>
                <br>
                <span>
                    <span class="RemoveWatch">
                        <a href="h">Remove subscription</a>
                    </span>
                </span>
                <br>
                <span>
                    <span class="SetBan">
                        <a href="">Ban user</a>
                    </span>
                </span>
                <br>
                <span>
                    View:
                </span>
                <a href="">Journal</a>
                <span>
                    &nbsp;|
                </span>
                <a href="">Profile</a>
                <div class="ljclear">
                    &nbsp;
                </div>
            </div>
        </div>
    </div>
</div>


New markup:

<div class="ui-tooltip ui-widget ... ContextualPopup">
    <div class="ui-tooltip-content">
            <div class="Userpic">
                <a href=""><img src="" alt=""></a>
            </div>
            <div class="Content">
                <div class="Relation">Current relationship status</div>
                <div class="Actions">
                    <div><a href="">Subscribe to username</a></div>
                    <div><a href="">Grant access to username</a></div>
                    <div><a href="">Ban username</a></div>
                </div>
            </div>
    </div>
</div>


Post a comment in response:

From:
Anonymous( )Anonymous This account has disabled anonymous posting.
OpenID( )OpenID You can comment on this post while signed in with an account from many other sites, once you have confirmed your email address. Sign in using OpenID.
User
Account name:
Password:
If you don't have an account you can create one now.
Subject:
HTML doesn't work in the subject.

Message:

If you are unable to use this captcha for any reason, please contact us by email at support@dreamwidth.org


 
Notice: This account is set to log the IP addresses of everyone who comments.
Links will be displayed as unclickable URLs to help prevent spam.