Navigation
Archive / Transparent Icon
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • January 12, 2017 at 6:12 am #1327073
    Blupace
    Participant

    Blupace.com

    Hi,

    So I would like to make an ESS skin Icon transparent by around 30%. The icon is on the following page
    http://blupace.com/portfolios/

    I would like to icon to be slightly transparent, then go darker on hover.
    I just cant find out where I set this transparency.

    I would also like to change the border on the ESS Grid filter.
    Can this be removed / changed.

    Kind regards,

    Pace

    January 12, 2017 at 8:52 am #1327240
    Darshana
    Moderator

    Hi there,

    You can add this under Custom > CSS in the Customizer.

    
.esg-filterbutton {
    opacity: 0.4;
}

.esg-filterbutton:hover {
    opacity: 1;
}

    Hope that helps.

    January 12, 2017 at 10:19 am #1327361
    Blupace
    Participant

    Hi, this doesn’t change the border of the filter button, it only changes the transparency of the entire group.

    January 12, 2017 at 12:48 pm #1327564
    Rupok
    Member

    Hi there,

    Thanks for writing back. Do you want to change the border color for normal and hover state? In that case you can try this :

    .esg-filters .esg-filterbutton {
  border-color: #ddd !important;
}
.esg-filters .esg-filterbutton:hover {
  border-color: #666 !important;
}

    Let’s use your own color code. If you are referring something else then kindly clarify with a screenshot.

    Cheers!

    January 12, 2017 at 1:21 pm #1327602
    Blupace
    Participant

    This is partially what I needed to do… 🙂

    I have now set the border colour to white, and also white on the hover.
    This means the border is invisible.

    I would like the ess grid filter text to go bold on hover.

    Kind regards,

    Pace

    January 12, 2017 at 3:15 pm #1327746
    Jade
    Moderator

    HI Pace,

    Please update this code:

    .esg-filters .esg-filterbutton:hover {
  border-color: #666 !important;
}

    to

    .esg-filters .esg-filterbutton:hover {
  border-color: #666 !important;
  font-weight: bold !important;
}

    Hope this helps.

    January 13, 2017 at 2:42 am #1328477
    Blupace
    Participant

    Hey and thanks, that kind of works, the issue now is that when I hover over a filter item, the item goes bold which is correct, but the other filter items also move due to the size increase of the bold filter item.

    I would like the font weight to change, so either bold or just the line weight, without moving the other items.

    January 13, 2017 at 2:44 am #1328478
    Blupace
    Participant

    Maybe I can just change the font colour instead of the weight, which may stop the movement of the other items.?

    January 13, 2017 at 4:15 am #1328571
    Paul R
    Moderator

    Hi,

    Lets make the button have fixed width.

    Add this in custom > Edit Global CSS in the customizer

    
.esg-filters .esg-filterbutton {
   min-width:165px;
}

    Hope that helps.

    January 13, 2017 at 5:16 am #1328611
    Blupace
    Participant

    Perfect Paul, you da man!

    🙂

    Have a superb day….

    January 13, 2017 at 6:38 am #1328669
    Paul R
    Moderator

    Glad to know it worked. Thanks 🙂

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1327073 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>