Essential grid customization of dropdown filter

Support
#1

Can you please tell me which of these items will change the color of the word FILTER that, when hovered over, drops a menu down with categories to choose from. I only need to change the color of the resting state, not the hover. I’ve been able to change it in developer mode in my browser by modifying .esg-selected-filterbutton settings but no matter what I change in the content below (from skin editor in EG), it does not take. I wish to change the color to black. Please help, I am pulling out my hair. Thanks!

/********************************
- FLAT DARK BUTTONS -
*********************************/
.flat-dark .navigationbuttons,
.flat-dark .esg-pagination,
.flat-dark .esg-filters {
text-transform:uppercase;
text-align: center;
}

.flat-dark .esg-filterbutton,
.flat-dark .esg-navigationbutton,
.flat-dark .esg-sortbutton,
.flat-dark .esg-cartbutton {color:#fff;
margin-right:5px;
cursor:pointer;
padding:1px 30px;
border:none;
line-height:38px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-size:12px;
font-weight:600;
font-family:“Open Sans”,sans-serif;
display: inline-block;
background:#3a3a3a;
background: rgba(0,0,0,0.2);
margin-bottom:5px;
}

.flat-dark .esg-navigationbutton { padding:1px 18px; }
.flat-dark .esg-navigationbutton * { color:#fff; }
.flat-dark .esg-pagination-button:last-child,
.flat-dark .esg-filterbutton:last-child{ margin-right: 0; }
.flat-dark .esg-left, .flat-dark .esg-right { padding:1px 12px; }

.flat-dark .esg-sortbutton-wrapper,
.flat-dark .esg-cartbutton-wrapper { display:inline-block; }
.flat-dark .esg-sortbutton-order,
.flat-dark .esg-cartbutton-order { display:inline-block;
vertical-align:top;
border:none;
width:40px;
line-height:40px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-size:12px;
font-weight:700;
color:#000;
cursor: pointer;
background:#eee;
background: rgba(0,0,0,0.2);
margin-left:5px;
}

.flat-dark .esg-cartbutton {color:#fff;
cursor: default !important;
}
.flat-dark .esg-cartbutton .esgicon-basket {color:#fff;
font-size:15px;
line-height:15px;
margin-right:10px;
}
.flat-dark .esg-cartbutton-wrapper { cursor: default !important; }

.flat-dark .esg-sortbutton,
.flat-dark .esg-cartbutton { display:inline-block;
position:relative;
cursor: pointer;
margin-right:0px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.flat-dark .esg-navigationbutton:hover,
.flat-dark .esg-filterbutton:hover,
.flat-dark .esg-sortbutton:hover,
.flat-dark .esg-sortbutton-order:hover,
.flat-dark .esg-cartbutton-order:hover,
.flat-dark .esg-filterbutton.selected { color: #fff;
border-color:none;
background:#4a4a4a;
background: rgba(0,0,0,0.5);
}

.flat-dark .esg-navigationbutton:hover * { color:#fff; }
.flat-dark .esg-sortbutton-order.tp-desc:hover { color:#fff; }
.flat-dark .esg-filter-checked {padding:1px 3px;
color:transparent;
background:#000;
background: rgba(0,0,0,0.2);
margin-left:7px;
font-size:9px;
font-weight:300;
line-height:9px;
vertical-align: middle:
}

.flat-dark .esg-filterbutton.selected .esg-filter-checked,
.flat-dark .esg-filterbutton:hover .esg-filter-checked {padding:1px 3px 1px 3px;
color:#fff;
background:#000;
background: rgba(0,0,0,0.2);
margin-left:7px;
font-size:9px;
font-weight:300;
line-height:9px;
vertical-align: middle
}

#2

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thanks.

#3

I didn’t get to see the response to this one, but I have the same question. I’d like to change the font size of the drop down filter title to make sure it’s more readable. To see an example check out https://safetyboothq.com/store/mens-safety-boots-footwear/

I would like to increase the font size of the drop down text, “What type of men’s footwear are you shopping for? Click this dropdown to refine your search” to be larger.

Thanks in advance!

#4

Hi There,

Please add the following code to Theme Options CSS

.minimal-light .esg-filterbutton {
font-size: 26px !important;
}

Hope it helps

#5

Joao

Thanks for the fast response. Unfortunately this CSS makes the items in the drop down larger, but not the initial drop line remains the same size. I would like the top of the dropdown “What type of men’s footwear are you shopping for? Click this dropdown to refine your search.” to be increased, not the interior items. Here’s the web page once more for reference.
If you look at the page linked above you’ll see the What type of men’s footwear… is still small and now drop down items are too large.

Here is a screen shot as well.

#6

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!