Support » Theme: Twenty Seventeen » search box not displaying correctly

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The difference in the search field itself is caused by this boostrap CSS:

    
    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: 700;
    }
    

    In your Child Theme style.css file add this:

    
    body label {
        display: block;
        font-weight: 800;
        margin-bottom: 0.5em;
    }
    

    I recommend using Chrome’s developer toolbar for figuring things like this out: https://developers.google.com/web/tools/chrome-devtools/css/

    i added the code to my style.css but nothing changes.

    i can’t find bootstrap.css to remove the code.

    this is the custom css for the pages with the correct display search box

    #layerslider_19{
    background-color:#363433;
    padding-bottom:30px;
    }

    .ls-v6 .ls-bottom-nav-wrapper {
    top: 0 !important;
    }
    .panel-content .entry-header{
    display:none;
    }
    .wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top.vc_tta-o-shape-group .vc_tta-tab:last-child:not(:first-child)>a,
    .wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top.vc_tta-o-shape-group .vc_tta-tab:first-child:not(:last-child)>a{
    border-radius:0 !important;
    }
    .wpb-js-composer .vc_tta.vc_tta-style-modern .vc_tta-tab {
    margin-left: 0 !important;
    margin-top: 0 !important;
    }
    .vc_tta-panel-body .wpb_wrapper,.vc_custom_1505097361974 .wpb_wrapper{
    padding: 0 0;
    }
    .form-enquiry{
    padding-left:0;
    padding-right:0;
    }

    /*.vc_custom_1499045775183 .vc_column-inner{
    padding-left:-0 !important;
    padding-right:0 !important;
    }*/

    .wpb-js-composer .vc_tta-color-orange.vc_tta-style-modern .vc_tta-tab>a{
    min-height:71px;
    }
    .wpb-js-composer .vc_tta.vc_general .vc_tta-panels-container {
    width:100%;
    float:left;
    }
    .wpb-js-composer .vc_tta.vc_general .vc_tta-tab{
    float:left;
    }
    /*.wpb-js-composer .vc_tta.vc_general .vc_tta-panel-body{
    padding:0 !important;
    }*/
    .wpcf7-list-item-label{color:#fff;}
    .wpb-js-composer .vc_tta.vc_general .vc_tta-panels, .wpb-js-composer .vc_tta.vc_general .vc_tta-panels-container{
    overflow:hidden;
    }
    .entry-content{
    margin-top:0;
    padding-top: 0 !important;
    }

    .vc_tta-tab{
    width:20%;
    }
    .wpb-js-composer .vc_tta-color-orange.vc_tta-style-modern .vc_tta-tab>a {
    border: 0 !important;
    background-color: #000 !important;
    color: #fff;
    }

    .vc_tta-tab.vc_active>a,.vc_tta-tab>a:hover{
    color:#ff9402 !important;
    }

    @media screen and (max-width:767px){
    #layerslider_19{
    padding-bottom:40px;
    }
    }

    • This reply was modified 2 years, 7 months ago by coolsmurf.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You don’t want to remove the code because editing core files is bad practice. Just override it. That CSS I recommended isn’t in your Child Theme style.css file: https://creatz3d.com.sg/wp-content/themes/creatz3d/style.css?ver=4.9.6

    Thank you Andrew Nevins. it is almost where it is.

    How do i turn the magnifying glass icon white? and how do i make the black box align with the search box?

    how do i include this

    .single-product .search-form .search-submit .icon{
    color:#fff !important;
    }

    .search-form .search-submit .icon{
    height:18px;
    }

    in your code to make the search icon white?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The issue with the submit button is coming from the ‘normalize’ Bootstrap library here:

    
    button, input, optgroup, select, textarea {
        margin: 0;
        font: inherit;
        color: inherit;
    }
    

    Specifically this bit:

    
    button, input, optgroup, select, textarea {
        color: inherit;
    }
    

    To fix it, in your Child Theme style.css file add this:

    
    body input,
    body button {
        color: #fff;
    }
    

    Never use !important, just use more specific selectors like I’ve done with “body”

    almost there!

    this particular page has alignment issues on its own.
    https://creatz3d.com.sg/product/desktop-metal-studio-system/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Looks like that final alignment is done by using some negative position, i.e.:

    
    .search-form input {
        position: relative;
        top: -1px;
    }
    

    there’s one more imperfection. the boxes appear correct, but they are of different size.

    smaller black box
    https://creatz3d.com.sg/about-creatz3d/service-highlights/

    wider black box
    https://creatz3d.com.sg/about-creatz3d/customer-support/

    how to make the wider black box of the same size as smaller black box?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s a case of using a browser developer tool like the one that’s built into Chrome and inspecting both elements for CSS changes; spotting the difference into why one is styled the way it is.

    Appreciate your help Andrew Nevins, although I still can’t figure out how to use the browser development tool.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘search box not displaying correctly’ is closed to new replies.