[Solved]Hover display views-icons and allow to grab header

Those icons are the same, not necessary to display, and then looks very clean, more focus on content by eyes.

I checked the most of themes, no one try to solve these problem ,in other words, these are the common problem in the all custom themes.

There are 2 problems that I can’t solve :

1. hover display that 3 icons

.view-actions {
    visibility:hidden;
    padding: 4px 10px;
    display: flex;
    justify-content: flex-end;
}

.view-actions:hover {
    visibility:visible;    
}

This code don’t work, I have no idea anymore.

2 . allow to grab header

it’s still don’t work, add " cursor:grab into “.view-header” , and hidden it on “.view-header-icon”. )

.view-header-icon {   
    visibility:hidden;
}

.view-header {
    border-top: 1px solid #202020 !important;
    border-bottom: 1px solid #202020 !important;
    background-color: #202020 !important;
    **cursor: grab;** 
    z-index: 1;
}

Please help , Thanks.

.view-action {
  opacity: 0;
}

.view-action:hover {
  opacity: 1;
}

I know this is resolved, but fyi Meta Post - Common CSS Hacks is what I do for this. Same basic idea, just targeted across the whole header, and also a bit more dynamic :slight_smile:

1 Like