Search code examples
javascriptjquerygoogle-custom-search

How do you change the default refinement label in google cse?


I've been looking everywhere for a method that changes the default tab "All" into a label of one's choosing in the search results.

So far this is what I found, from "How to trigger specific Google Custom Search Engine refinement label?", but I don't think it's for my specific purpose.

var customSearchOptions =
{ 'defaultToRefinement' : 'refinement_label_name' };

var customSearchControl =
    new google.search.CustomSearchControl('YOUR_CSE_ID', customSearchOptions);

I also stumbled upon a post, with an unrelated topic, that seemed to have accomplished it - just run the code snippet and click the search button to see what I mean:Google site search catch search submit and trigger function - I've played around with it and found that it relates to engine ID which is: '017643444788069204610:4gvhea_mvga' in that example.

How can you change the default 'all' tab into something else while still being able to have other tabs?


Solution

  • I seemed to have solved this problem with CSS.

    div > div.gsc-tabHeader:nth-child(1) {
        visibility: hidden;
    }
    
    div > div.gsc-tabHeader:nth-child(1):after {
        content: "Insert_NewTab_Name";
        visibility: visible;
    }
    
    .gsc-tabHeader.gsc-tabhActive:after {
        border: 1px solid Insert_border_color;
        border-bottom-color: #fff !important;
        padding: 7px;
        visibility: visible;
    }