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

Search window colours

Discussion in 'Styling and Customization Questions' started by Neil E., May 8, 2012.

  1. Neil E.

    Neil E. Active Member

    Totally new to xenForo...
    I need to change the colours of the search box that comes up when a user types in text. I couldn't find a suitable spot to make changes anywhere in Style Properties. Is there a document that graphically illustrates the naming of each "area" of the forum layout? This would better help me locate items. I find the text description (including pop-ups) is hard to match up to what I'm looking for. For example I can't find the settings for the navigation tab hover settings. I had no problem finding the selected tab hover settings.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This popup?

    Screen shot 2012-05-08 at 1.07.07 AM.png

    Here is some CSS you can use:

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

    Add this code:

    Code:
    #QuickSearch
    {
    	background-color: green !important;
    }
    
    .formPopup
    {
    	background-color: blue !important;
    }
    
    .formPopup .controlsWrapper
    {
    	background-color: red !important;
    }
    
    The result:

    Screen shot 2012-05-08 at 1.18.10 AM.png

    Most areas have their own style properties, but these elements don't have properties. They reference colors from the palette. CSS is required to change just those specific instances without having to change the palette.

    I actually don't know of a color map. That's a good idea.
     
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This post shows the navbar CSS:

    http://xenforo.com/community/threads/change-the-color.8749/#post-120671

    Some of them have style properties, others don't. In either case you can always duplicate that CSS into the EXTRA.css template and set any colors you want using your own CSS definitions. It's best to use EXTRA.css instead of modifying the other .css templates.
     
  4. Neil E.

    Neil E. Active Member

    Wow, thanks, that's exactly what I needed!
     
  5. Neil E.

    Neil E. Active Member

    Jake, I used your example and could see the change. A great first step to learning more. Life got in the way and I'm only now back looking at XenForo.

    A few notes: I understand that all aspects of the forum are built on code. I see that changes can be made grapically through "style properties" or directly by editing code in a specific template. What is the most suitable method for colour changing? Keep in mind I'm totally new to this and the biggest problem is identifying what each area of the forum is called. It seems bizarre to me that other areas pick their colours from the primary or secondary settings. Although tedious I would prefer to just edit each component with no consequence to other components.

    My biggest concern is totally messing up something that will break how the forum operates when I'm just altering a colour or style. Being methodical should reduce this possibility. It seems to me that editing templates is more efficient. Using your example of the search popup, instead of just "green", can I use a hex value of "008C00" to define what green I want?

    I think I see the value of using EXTRA.css to leave original templates unmolested. Would it be best to have every single template copied into EXTRA and modified there? I need to determine a modification 'philosophy' before getting started.
     
  6. Neil E.

    Neil E. Active Member

    xenforo3.jpg

    Studying this more I see the customized style components shows what's been modified. Thus any editing can be reverted back to the default setting. Does this also reflect any code changes made directly to a template?
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Yes.
     

Share This Page