Google Custom Search

  • Place Google Custom code into embed media widget
  • Place EM widget into layout
  • Also in Layout view, place OS Search widget below GCS widget
  • Add the CSS
    Add the following to the stylesheet:

    <style>
    .gcsc-find-more-on-google-magnifier {
        fill: #215990;
    }
    .gcsc-find-more-on-google {
        color: #215990;
    }
    .googlesearch .gs-webResult.gs-result a.gs-title:link b, .googlesearch .gs-webResult.gs-result a.gs-title:link {
        color: #215990;
        font-weight: bold;
    }
    .block-os-search-solr {
        display: none !important;
    }
    .region-header-third .googlesearch .gsc-thumbnail-inside {
        text-align: left;
    }

    .googlesearch .gsc-search-button-v2, .googlesearch .gsc-search-button-v2:hover, .googlesearch .gsc-search-button-v2:focus {
        border-color: #666666;
        background-color: #4384C4;
        background-image: none;
        filter: none;
    }
    .googlesearch form tbody {
        border-top: 0;
    }
    ::-webkit-input-placeholder { color:transparent; }

    :-moz-placeholder { /* Firefox 18- */ color:transparent; }

    ::-moz-placeholder { /* Firefox 19+ */ color:transparent; }

    :-ms-input-placeholder { color:transparent; }

    div#block-boxes-solr-search-box {
        display: none;
    }
    .googlesearch input#gsc-i-id1[style] {
        background: none!important;
    }
    .googlesearch #gsc-i-id1 {
        left: 0;
        position: relative;
    }
    .googlesearch #gsc-i-id1 {
        height: 17px;
        margin-right: 0;
        padding: 3px 0 2px 5px;
        width: 155px;
    }
    .googlesearch table.gsc-search-box .gsc-input-box td {
        vertical-align: top;
        padding-top: 0;
    }

    .googlesearch table.gsc-search-box td {
        vertical-align: top;
    }
    .googlesearch .gsib_a {
        width: 100%;
        padding: 2px 6px 0!important;
    }
    .googlesearch .gsc-input-box {
        height: 25px;
    }
    .googlesearch table.gsc-search-box td {
        vertical-align: top;
    }

    .googlesearch .gsc-search-box-tools .gsc-search-box .gsc-input {
        padding-right: 0;
    }
    .googlesearch table.gsc-search-box {
        left: 3px;
        position: relative;
    }
    .googlesearch .gsc-control-cse {
        background-color: transparent!important;
        border-color: transparent!important;
        padding: 0;
    }
    @media (max-width:1008px){
    .googlesearch {
        left: inherit;
    }
    .region-header-third .block-boxes-os_boxes_media.open {
        background-color: #1E1E1E;
        display: block!important;
        padding: 17px 0 5px 12px!important;
        position: absolute;
        right: 10px;
        top: 41px;
        width: 305px!important;
    }
    .googlesearch{
    display:none;
    }
    }
    @media (max-width: 950px){
    .region-header-third .block-boxes-os_boxes_media.open {
        background-color: #1E1E1E;
        display: block!important;
        padding: 17px 0 5px 12px!important;
        position: absolute;
        right: 10px;
        top: 41px;
        width: 305px!important;
    }
    .region-header-third .block-boxes-os_boxes_media {
        display: none;
    }
    }
    </style>

  • Add the JS
    Create an embed media widget and via edit trick add the following script:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.link-count-mobi-search a').click(function() {
  jQuery('.region-header-third .block-boxes-os_boxes_media' ).toggleClass('open');
});
});
</script>

See also: Search