Is it possible to move node edit tabs links in some block. I want to hide them from the orignal position and want to create a floating block which may contains all those links which are available in tabs.


I think you want to do something like this?...


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
    // wait til everything loads before firing
        //insert edit icon into div.tabs
        $('div.tabs').prepend($("<i class=\"icon-edit\"></i>"));    
        //insert div.tabs into page title

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 {
    border: 0px none;
    border-radius: 4px 0 4px 4px;

/*this exposes the tabs when we hover over the icon!*/  
    div.tabs:hover ul,
    div.tabs:active ul {

/*position button - I want it to the left of the h1*/
    div.tabs {

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.

| improve this answer | |
  • Thank you very much though I was thinking to put those link in some sort of block and than manipulate that block. But this is even better. Thanks again. – Fahad Ur Rehman Nov 15 '13 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.