ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Customise the look of simple seach in EE

August 04, 2013 8:33pm

Subscribe [1]
  • #1 / Aug 04, 2013 8:33pm

    danc

    3 posts

    Hi,

    Have set up the search parameters in a way that work. I would now like to implement a custom look to the input field. I have set it up as follows:

    <html>
    <head>
    <style>
    
    #keywords {
    
    }
    input:focus,
    select:focus,
    textarea:focus,
    button:focus {
        outline: none;
    }
    
    
    #keywords input[type="text"] {
        background: url(/images/sc-graphics/search-white.png) no-repeat 10px 6px #444;
        border: 0 none;
        font: bold 12px Arial,Helvetica,Sans-serif;
        color: #d7d7d7;
        width:150px;
        padding: 6px 15px 6px 35px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        -webkit-transition: all 0.7s ease 0s;
        -moz-transition: all 0.7s ease 0s;
        -o-transition: all 0.7s ease 0s;
        transition: all 0.7s ease 0s;
        }
    
    #keywords input[type="text"]:focus {
        background: url(/images/sc-graphics/search-dark.png) no-repeat 10px 6px #fcfcfc;
        color: #6a6f75;
        width: 200px;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
        }
    </style>
    </head>
    
    <body>
    {exp:search:simple_form channel="staff" result_page="staff/results"}
    <form method="get" id="keywords">
                    <input name="keywords" type="text" size="40" placeholder="Search…" >
    {/exp:search:simple_form}
    </form>
    </body>

    However the nice formatting to the input field is lost. The searches do still work.

    If I change the code to:

    <form method="get" id="keywords">
    {exp:search:simple_form channel="staff" result_page="staff/results"}
                    <input name="keywords" type="text" size="40" placeholder="Search…" >
    {/exp:search:simple_form}
    </form>

    Then the formatting is correct but the Search fails with:

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined index: result_page

    Filename: search/mod.search.php

    Line Number: 84

    Any Ideas.

    Thanks

     

     

  • #2 / Aug 05, 2013 7:25am

    zizther

    228 posts

    You don’t need the <form> tag around the EE search, this is generated automatically.

    See the example here:

    http://ellislab.com/expressionengine/user-guide/modules/search/simple.html

    You can give the form an ID by using the form_id.

    {exp:search:simple_form channel="staff" result_page="staff/results" form_id="keywords"}

  • #3 / Aug 05, 2013 10:57am

    danc

    3 posts

    Thank very much zizther

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases