Hide Those Drupal Node Edit Tabs!

Wouldn’t it be nice if you could have your node edit tabs (view, edit, manage display, etc.) without having them push your layout down 50-100 pixels? Well, good news: you can!

This is how the node tabs normally look (with my subtheme styles). Not even close to what my normal visitors will see..

Screen Shot 2013-11-14 at 10.37.50 PMThis is what I’m going to show you how to do in this post…

Screen Shot 2013-11-14 at 10.29.30 PMYou can get a better sense of it from this short video.

I did this with some jQuery and CSS.

jQuery to create and place “button” – in my case, this is a font-awesome icon. This may seem strange, but we’re placing the button inside the div.tabs tag, and then placing div.tabs tag inside the h1 tag…

// edit node buttons
(function($){
    // wait til everything loads before firing
    $(document).ready(function(){
        //insert edit icon into div.tabs
        jQuery('div.tabs').prepend(jQuery("<i class=\"icon-edit\"></i>"));  
        //insert div.tabs into page title
        jQuery('h1').prepend(jQuery('div.tabs'));
    }); 
})(jQuery);

Now, if this is all we did, it would look crazy! We need CSS to do the magic part…

/*first we hide div.tabs, but we also define properties for when we expose it later*/       
    div.tabs ul {
    display:none;
    position:absolute;
    padding:10px;
    margin-top:-10px;
    background:rgb(0,0,0);
    border: 0px none;
    width:260px;
    border-radius: 4px 0 4px 4px;
    z-index:100;
    }

/*this exposes the tabs when we hover over the icon!*/  
    a:hover.icon-edit,
    div.tabs:hover ul,
    div.tabs:active ul {
    display:block;
    }

/*position button - I want it to the left of the h1*/
    div.tabs {
    float:left;
    width:1em;
    }

Your selectors and styles may differ, but the essential thing is to have a trigger/button class (or id) that is inside the div you want to hide/show.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s