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:21pm

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

    danc

    3 posts

    SORRY I HAVE MOVED THIS TO EE2 forum. My bad!

    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

     

     

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

ExpressionEngine News!

#eecms, #events, #releases