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

XF 1.2 How can I change the colors in the forum?

Discussion in 'Styling and Customization Questions' started by Tarzan, Feb 12, 2014.

  1. Tarzan

    Tarzan Member

    Red circles: I want them to be gray as the background
    Yellow: I want it lighter gray if possible

    Where can I change this? I've seen ALL the Styre property groups, I can't find it. Drives me crazy.
     

    Attached Files:

  2. Amaury

    Amaury Well-Known Member

    1. Edit @primaryLightest in the color palette.
    2. Edit @contentBackground in the color palette.
     
  3. Tarzan

    Tarzan Member

    Thanks.

    Editing @contentBackground worked.
    Editing @primaryLightest did not work, does anything override this?
     
  4. Amaury

    Amaury Well-Known Member

    You might have customized the style properties for those areas, which, by default, pull styling from @primaryLightest.

    Do you have the Breadcrumb and Secondary Content style properties customized?
     
  5. Tarzan

    Tarzan Member

    No, I do not believe so.

    These are the settings: Uploads.
     

    Attached Files:

  6. Amaury

    Amaury Well-Known Member

    If you put your cursor inside the box below Background, what does the little popup say?
     
  7. EQnoble

    EQnoble Well-Known Member

    add this to the extra.css template and change the color to suit
    Code:
    .discussionListItems .discussionListItem {
    background-color: #E7E7E7;
    }
     
  8. Amaury

    Amaury Well-Known Member

    No need for custom CSS. This can be accomplished with style properties.
     
  9. EQnoble

    EQnoble Well-Known Member

    That is an opinion. I see no need to use the style properties, it can be accomplished quicker with css (opinions work 2 ways). And technically editing a style property IS customizing css...there is no difference.
     
  10. Tarzan

    Tarzan Member

    Yes, Amaury fixed it. Thanks! There was actually a color inside that box in Secondary Content - Background. I've changed it to my likings, and it worked!

    Now. The white in this picture is still there, where to edit this?
    And for the Search box, where to change that from black to white?

    I have tried in EXTRA.css:

    #QuickSearch .textCtrl:focus
    {
    background-color: #ffffff !important;
    }
     

    Attached Files:

  11. Amaury

    Amaury Well-Known Member

    Custom CSS can potentially break styles, either because you update to a newer version of the forum software or because you made a mistake. There is no way that can happen with style properties.

    Looking at your earlier screenshot, it looks like your Breadcrumb style property is set to a clear value. Click on the background box, select Color Palette, and select @primaryLightest.
     
  12. EQnoble

    EQnoble Well-Known Member


    Changing a color on .discussionListItem is not going to break anything... what are you trying to imply?
     
  13. Tarzan

    Tarzan Member

    Changed, without success.
     

    Attached Files:

  14. Tarzan

    Tarzan Member

    Please do not high jack the thread. Thanks for your input, but I found the other solution better at choice.
     
    Amaury likes this.
  15. Amaury

    Amaury Well-Known Member

    If you want to send me a personal conversation with a temporary administrator account, I can take a look.
     
  16. EQnoble

    EQnoble Well-Known Member

    LOL this is not highjacking a thread.

    I supplied an answer and someone else replied for you instead of letting you explore the option for yourself. He also said something that is not true and I stood my ground. By all means continue with your show here.
     
  17. Amaury

    Amaury Well-Known Member

    Fixed. The issue was in the breadcrumb.css template.

    Code:
    .breadcrumb
    {
       font-size: 11px;
       background-color: rgb(221, 221, 221);
       background-repeat: repeat-x;
       background-position: top;
       overflow: hidden;
       zoom: 1;
       max-width: 100%;
       height: 30px;
     
    }
    He had the white background hard-coded as #DDDDDD, as seen above. I changed it to @primaryLightest.
     
  18. Tarzan

    Tarzan Member

    Red Circles: Change the colors

    The search box on the forum: Current background inside the box=black, want: white.
     

    Attached Files:

  19. Amaury

    Amaury Well-Known Member

    1. For the links, edit the Primary Content Link and Secondary Content Link style properties.
    2. For the search bar, edit @textCtrlBackground in the color palette.
     
  20. Tarzan

    Tarzan Member

    1. Changed, but there is no effect.
    2. Worked!
     

Share This Page