1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Edit quicksearch textbox

Discussion in 'Styling and Customization Questions' started by Morgain, Oct 29, 2011.

  1. Morgain

    Morgain Well-Known Member

    I would like to edit the quicksearch box to make it more prominent.

    I've tried making changes to search_bar.css
    but it doesn't do anything.

    I want to change the colour of the border, make it thicker; and change colour of the background.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Add to EXTRA.css:
    Code:
    input[type=search]{
    border: 5px solid yellow;
    background-color: #cc0000;
    }
    Change the CSS to suit.

    Thread moved from template modifications to styling and customisation.
     
    Morgain likes this.
  3. Morgain

    Morgain Well-Known Member

    Brogan thank you. I am so enjoying all this learning with everyone being so helpful. Especially you, Dodgeboard and Jake Bunce.
     
    Fuhrmann likes this.
  4. Morgain

    Morgain Well-Known Member

    The text in the search box stays stubbornly grey.

    In EXTRA.css I have

    Code:
    /* search colours and position */
    input[type=search]{
    border: 1px solid #993333;
    background-color: #99cc99;
    color: #black;
    margin-left: 30px;
    }
    
    The background colour, border, and placing via margin all work. Not the font.
     
  5. Fuhrmann

    Fuhrmann Well-Known Member

    Change this:

    Code:
    color: #black;
    To this:

    Code:
    color: black;
    or

    Code:
    color: #000;

    So the final code:


    Code:
    /* search colours and position */
    input[type=search]{
    border: 1px solid #993333;
    background-color: #99cc99;
    color: black;
    margin-left: 30px;
    }
    
     
    Morgain likes this.
  6. Morgain

    Morgain Well-Known Member

    oops thank you
     
    Fuhrmann likes this.
  7. Morgain

    Morgain Well-Known Member

    Er no - tried both. Still grey not responding.
     
  8. Fuhrmann

    Fuhrmann Well-Known Member

    If you want to change only from the search box you can put this on the EXTRA.css:

    Code:
    #QuickSearchQuery::-moz-placeholder
    {
    font-style: italic;
    color: red !important;
    }
     
    #QuickSearchQuery::-webkit-input-placeholder
    {
    font-style: italic;
    color: red !important;
    }
    

    Sem título.png


    BUT, if you want to change all the placeholders of the forms in XenForo, go to AdminCP -> Appearance -> Styles Properties -> Forms

    And change:


    Sem título2.png


    Then the result:


    Sem título3.png
     
    viper357 and Morgain like this.
  9. Morgain

    Morgain Well-Known Member

    Fuhrmann thank you for all this thorough and clear information. So appreciated.
     
    Fuhrmann likes this.

Share This Page