Jump to:

1385 Posts in 493 Topics by 522 members

Themes

SilverStripe Forums » Themes » Modifying the Site Search layout

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1657 Views
  • Sparrowhawk
    Avatar
    Community Member
    33 Posts

    Modifying the Site Search layout Link to this post

    Hi,

    I'm having some issues with modifying the way that the Site search box looks on my site. What I basically want is something very similar to this site: http://www.ktponline.org.uk/ (which is an aspx site)

    I have amended the CSS so that the text box is using the right attributes (colour, font, border, etc), but have the following issues which I can't figure out:

    - I can't get a label to show at the right place
    - My submit button is always on a new line, I can't get it to the right of the search box
    - I can't figure out how to change the button type to be an image submit button rather than a standard submit button. Specifying a background-image for the button ID simply super-imposes the image over the button, which is ugly

    eg: I can't figure out where the submit button is being added to the form, so cannot override it, nor how to get around the middlecolumn class being wrapped around the search fields thus causing the submit button onto a new line.

    My forte really is not front end CSS stuff (I'm more of a back-end developer than a UI one), so I am hoping that the answer to these questions is simple and that somebody can help me out.

    If you can, then thanks in advance - you'll be saving my sanity!

  • Willr
    Avatar
    Forum Moderator
    5511 Posts

    Re: Modifying the Site Search layout Link to this post

    All of those are CSS issues which depends on how you have structured your theme so a link to it would be useful. By default form styles are in themes/blackcandy/css/form.css

    - Can't get the label to show at the right place
    - My submit button is always on a new line, I can't get it to the right of the search box

    You will need to either position the elements via the position tag or float the elements see http://www.barelyfitz.com/screencast/html-training/css/positioning/ for a run down of how positioning elements via css works.

    - I can't figure out how to change the button type to be an image submit button

    You should simply be able to use a background property in the CSS. You will then also need to remove the borders and get rid of the text on the button. Removing borders is easy (border: none;) but removing text is a bit tricky - a couple tricks online http://css-tricks.com/snippets/css/remove-button-text-in-ie7/ http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution.

  • Sparrowhawk
    Avatar
    Community Member
    33 Posts

    Re: Modifying the Site Search layout Link to this post

    Hi Will

    Thanks for the CSS pointers. I generally have no problem with positioning - it's just this one set of elements (search) that for some reason foxed me.

    Thanks also for the tips re the button - that's very useful.

  • Sparrowhawk
    Avatar
    Community Member
    33 Posts

    Re: Modifying the Site Search layout Link to this post

    Got the button fixed using a combination of the two links you supplied. For anyone else interested, I used the CSS from the first link and added the width and height attributes (changed to my own image dimensions) from the drupal link, along with the background position values.

    For some reason, I could not use the shorthand 1-liner version for background, I had to use three attributes on separate lines, namely background-image, background-repeat and background-position. Doing it as I normally would on one line gave me a blank image on FF/Mac

    Here is the full CSS to change a submit button to a graphic button, as used on my site:

    #SearchForm_SearchForm_action_results{
    background-image: url('/assets/search_go.gif');
    background-repeat: no-repeat;
    background-position: left top;
    width: 25px;
    height: 25px;
    border: none;
    text-indent: -9000px; /* to hide the text */
    text-transform: capitalize; /* removes the text - capitalise needed for IE7. possibly other versions too */
    }

    Anyway, thanks again for your help.

  • Tonyair
    Avatar
    Community Member
    81 Posts

    Re: Modifying the Site Search layout Link to this post

    Here is my solution, try urs in Opera 8.5 and later, also if u'll made ur own search form it will have different id:

    ..
             #Search input[type="submit"] {
                position:absolute;
                display:block;
                top:0;
                right:0;
                background-image:url('../images/searchBtn.png');
                width:20px;
                height:18px;
                padding: 0 0 0 20px !important;
                color:transparent;
                overflow:hidden;
                cursor: pointer;
                font-size:0;
                line-height:0;
             }
    html:first-child #search input[type="text"] {height:18px;} /* exception Opera<9.5 (miss dependence between line-height, font-size and input height) */
    ...
    <div id='Search'>$SearchForm</div>

  • Sparrowhawk
    Avatar
    Community Member
    33 Posts

    Re: Modifying the Site Search layout Link to this post

    Sorry, I missed this latest update - many thanks, I'll take a look at your version too.

    1657 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.