Change Sort-Portfolio selection "buttons" background

Support
#1

Dear Support
Am trying to modify the sort-portfolio buttons default behavior. Firstly, change the text “ALL” selection text name and then be able to change the default behavior of transperent appearance and with white text, becasue with white text on a white background it is difficult to see. I suceeded to change the format, with some CSS once selected, but not this one I can not find any other support cases. Thank you so much!
http://www.nanokliniken.se/nano-portfolio/

#2

Hello Eide,

Thanks for asking. :slight_smile:

You can add following CSS under Pro > Theme Options > CSS:

.x-portfolio-filters, .x-portfolio-filter {
    background-color: #ab3836;
    color: #ddd;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Thanks that works fine, when selected it is also transperant, what is the shortcode for that please?

#4

Hi Edie,

Please kindly also add the CSS code below:

.x-portfolio-filters-menu .selected {
    color: black;
    background-color: white;
}

The code above changes the color of the text to black and background color to white in case the button is selected. You are welcomed to use whatever color code that you like for the background and text color in the code.

Thank you.

#5

Thank you, off course! And the follow up question to it, how do I change the portfolio-sorting button called in English ALL to the swedish name ALLA. Thanx

#6

Hi,

To change it, you can add the code below in your child theme’s functions.php file

// Translate Strings
add_filter( 'gettext', 'translate_x_strings', 20, 3 );

function translate_x_strings( $translated_text, $text, $domain ) {

        switch ( $translated_text ) {

            case 'ALL' :

                $translated_text = __( 'ALLA', '__x__' );
                break;

         
        }

    return $translated_text;
}

Hope that helps

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.