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

Setting the searchbar background color

Discussion in 'Styling and Customization Questions' started by Trover, Oct 20, 2012.

  1. Trover

    Trover Member

    Could someoneone help me out with changing the background color of the searchbar? I was messing around with form.css and that changed all text input areas. I want to change ONLY the searchbar.

    thanks in advance !
     
  2. Arty

    Arty Well-Known Member

    There aren't any style properties for it, you'll need to edit #QuickSearch in search_bar.css
     
  3. Trover

    Trover Member

    I tried that before trying to edit form.css, im not sure why it's not working
     
  4. Arty

    Arty Well-Known Member

    If you are talking about input, not background around it, you'll need to customize #QuickSearchQuery. It uses default input style, you'll need to create new rules for it.
     
  5. Trover

    Trover Member

    where would I include this?
    Code:
     
    #QuickSearchQuery{
     
    //css
     
    }
     
    
     
  6. Arty

    Arty Well-Known Member

    Ether search_bar.css or extra.css.

    It is safest to add all your changes to extra.css instead of editing other .css templates. When you'll be updating forum other templates will be overwritten, but extra.css won't be touched.
     
    Trover likes this.
  7. Trover

    Trover Member

    for some reason it's still not showing correctly. I just went ahead and manually set the other input areas back to "normal" individually instead. Wasn't too bad as I customized each a bit anyway.
     
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  9. Trover

    Trover Member

  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Code:
    #QuickSearch .textCtrl
    {
    	background-color: #ffffff !important;
    }
    
     
    Trover likes this.
  11. Trover

    Trover Member

    Do you know how I could get it to change when selected ? when I use this method, the color is static.
     
  12. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Code:
    #QuickSearch .textCtrl:focus
    {
    	background-color: #ffffff !important;
    }
    
     
    Trover likes this.
  13. Trover

    Trover Member

    that !important made all the difference. I had tried that before and wasn't sure why I was having problems.thanks jake!
     

Share This Page