Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #865465

    Howdy,
    You all we kind enough to show me how to add some more descriptive text to the filter items, but the client still thinks that it’s not intuitive to click on item to filter results (for reasons I do not understand!) and they’ve asked to incorporate buttons into the mix.

    Can I make the text white and make it appear as though the white text is over colored buttons like so:

    Filter by: [normal text] All [white text over color button][small space] Articles [white text over color button][small space] Industry Knowledge [white text over color button]

    Below is the custom css we have implemented and in the private content section is everything else you may need.

    PHP
    // custom script
    add_action( ‘wp_footer’, ‘ava_custom_script’ );
    function ava_custom_script() {
    ?>
    <script type=”text/javascript”>
    (function($) {
    $(‘.sort_by_cat’).prepend(‘<span class=”filter”>Filter by: </span>’);
    })(jQuery);
    </script>
    <?php
    }

    Quick CSS
    .sort_by_cat .filter {
    display: block;
    float: left;
    margin-right: 10px;
    font-size: 20px!important;
    }

    #865656

    Hey raisonbrands,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    #865803

    Hi Victoria,
    Sure thing, please excuse the sloppy microsoft paint, but you get the picture: https://imgur.com/a/yqynu
    Screen Shot
    Just trying to put an orange “box” (R: 243 / G: 110 / B: 33 or #f36e21) around the filter item text (in white) that people can click on. Text would have to be centered and it would be a bonus if the “box” for each item were all the same size, but that’s not critical.

    Thanks,

    #866386

    Hi raisonbrands,

    Thank you for the clarification.
    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    .sort_by_cat a span  {
        display: block;
        background-color: #f36e21;
        color: #fff;
        padding: 5px 7px;
        border-radius: 5px;
       
    }
    .sort_by_cat  a {
    	 margin-left: 10px;
    }
    .filter {
    	 padding: 5px 7px;
    	 line-height: 32px;
    }
    .all_sort_button {
    	background-color: #f36e21;
    	border-radius: 5px;
    
    }
    #av_section_1 .sort_by_cat a.active_sort span.inner_sort_button span {
    	color: #666;
    }
    
    #av_section_1 .text-sep {
    	display: none;
    }
    .sort_by_cat a.active_sort span  {
        background-color: #f36e21 !important;
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #866513

    Hi Victoria,

    Thank you so much, it looks exactly as we asked for. But, once implemented, I saw that their color for buttons (that bright orange) overpowered any choice of color for active link text from their color palette.

    So, I figured out how to change the box color on hover and the color when active. The one catch that I have is having the box and border radius change color on hover at the same time. The border changes color before the box if you hover over slowly (but I really like the rounded corners).

    Here’s what I mean: Screenshot 4

    How can I get the entire object to change color at once, like so?
    Screenshot 5

    Here’s the changes to code that I made just in case that helps.

    .sort_by_cat .filter {
    display: block;
    float: left;
    margin-right: 10px;
    font-size: 20px!important;
    }

    .sort_by_cat a span {
    display: block;
    background-color: #f36e21;
    color: #fff;
    padding: 5px 7px;
    border-radius: 5px;

    }

    .sort_by_cat a span:hover {
    display: block;
    background-color: #0f9daf !important;
    color: #fff;

    }

    .sort_by_cat a {
    margin-left: 10px;
    }
    .filter {
    padding: 5px 7px;
    line-height: 32px;
    }
    .all_sort_button {
    background-color: #f36e21;
    border-radius: 5px;

    }

    #av_section_1 .sort_by_cat a.active_sort span.inner_sort_button span {
    color: #fff;
    }

    #av_section_1 .text-sep {
    display: none;
    }
    .sort_by_cat a.active_sort span {
    background-color: #0f9daf !important;
    }

    Thanks again!

    #867418

    Hi,

    The border radius is the same when the sort button is hovered or active. Please provide a screenshot of the issue on imgur or dropbox.

    Best regards,
    Ismael

    #867665

    Hi Ismael,

    I provided a screenshot with the “img” button, guess it didn’t work. Here is one straight from Imagur: https://imgur.com/a/O0FyA

    If you mouse over slowly, you’ll see that the border changes color (from orange to blue) independently of the box interior itself. The border does stay blue however (which is good!) once you hover over the interior box.

    We would like the entire box to turn blue a when the border does, just couldn’t figure out how to do that on my own.

    Thanks!

    #867694

    Hi raisonbrands,

    I think the hover and the basic styles should be applied to the link element, and not to the spans inside, that’s why there are those side effects.

    Best regards,
    Victoria

    #867858

    Hi Victoria and thanks,

    Yes indeed, that’s what I thought I was doing here, with “.sort_by_cat” being the element:

    .sort_by_cat a span:hover {
    display: block;
    background-color: #0f9daf !important;
    color: #fff;

    }

    Any ideas on how I can apply the hover styles to the whole element?

    Thanks and sorry, just trying to figure these things out as I go!

    #867997

    Hi,

    Thank you for the info. Please replace the css code with the following.

    .sort_by_cat a:hover span {
        display: block;
        background-color: #0f9daf !important;
        color: #fff;
    }

    Best regards,
    Ismael

    #868243

    Hi Ismael,

    Thank you and also Victoria, it’s looking good and working like a charm.

    #868261

    Hi,

    Glad to hear that. Thanks for using Enfold :)

    Best regards,
    Nikko

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘How to Style Portfolio / Blog Filter Items’ is closed to new replies.