How to add and style search box

Hello wpmudev team, I am trying to make a search page and I want to have the whole page background color to be: #3893b5. It should look something like this:
http://codepen.io/jarnovanrhijn/full/obPLOY/
OR like this:
http://codepen.io/kristyjy/full/zGOXYb/
The problem I have is I want the page to be the height of the browser screen, and I want the the search box to be centered vertically. I know how to center vertically but I don't know how to make the background height the same as the screen height. I would also like to apply some animations like the ones above, but most of them have scss:
How do I add SCSS? And how do I add a search form without using widgets?
My page is here: http://app.databoy.space/cloud/

  • Jude

    Hey there Schmirts

    Hope all is well with you and you are keeping fine !

    how to make the background height the same as the screen height. I would also like to apply some animations like the ones above, but most of them have scss:

    The background needs to be applied to the sorrounding areas as well. Take a look at my code, this should color the whole page unifromly.

    div#content_TesseractTheme {
        background: #3893b5;
    }
    
    div#page {
        background: #3893b5;
    }

    As for SCSS, its just pre processed CSS, anything you can do with it can be done with the processed CSS output.

    And how do I add a search form without using widgets?

    You can simply copy paste the search form HTML into any post / page if you want to avoid widgets. In your case the code is

    <div class="search-wrapper">
    
        <form role="search" method="get" class="search-form" action="http://app.databoy.space/">
    
            <label>
    
                <span class="screen-reader-text">Search for:</span>            	
    
                <input type="search" class="search-field placeholdit watermark" value="" name="s" title="Search for:">
    
            </label>
    
            <input type="submit" class="search-submit" value="Search">
    
        </form>
    
    </div>

    Make sure you are using the Text mode when pasting that in and not the Visual mode.

    Hope that clarifies.

    Thank you for being a WPMU DEV member and have a fantastic day !

    Cheers
    Jude

  • Dimitris

    Hey there Schmirts ,

    hope you're doing good and don't mind chiming in! :slight_smile:

    How do I center the box horizontally on desktop? I have tried margin: auto. Also Why does search box size change when clicked?

    I just inspected your website and in order to surpass these issues I had to use the following CSS rules. I can't tell if these were set differently by you or your theme but should do the trick.

    #mkmain-cloud-wrapper {
      position: inherit;
    }
    input.search-field.placeholdit {
      width: 100%;
    }

    If this still gives you troubles, please grant us with support access to your website so we could dig in and resolve this for you. Here you can find detailed information on how to do so (if you don't know already) https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Take care,
    Dimitris