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

XF 1.2 .categoryStrip

Discussion in 'Styling and Customization Questions' started by wickedstangs, Jul 28, 2013.

  1. wickedstangs

    wickedstangs Well-Known Member

    How do you change the .categoryStrip color using Extra.css and not the @PrimaryLighter?

    Code:
    .nodeList .categoryStrip {
    color: #0C226B;
    background: #0C226B;
    border-top: 1px solid #0C226B;
    border-bottom: 1px solid #0C226B;
    border-bottom-color: #0C226B;
    }
    
     
  2. wickedstangs

    wickedstangs Well-Known Member

    Solve it.. Just added !important to all of them and it worked..
     
  3. Shelley

    Shelley Well-Known Member

    Dunno if the following will suit you better (same result) but without the !important

    Code:
    .nodeList .categoryNodeInfo.categoryStrip {
    background: #0C226B;
    border-top: 1px solid #0C226B;
    border-bottom: 1px solid #0C226B;
    border-bottom-color: #0C226B;
    }
    .nodeList .categoryNodeInfo.categoryStrip .nodeDescription, .nodeList .categoryNodeInfo.categoryStrip .nodeTitle a { color: #0C226B; }
     
    wickedstangs likes this.
  4. Brogan

    Brogan XenForo Moderator Staff Member

    You could just do it in Style Properties -> Forum / Node List
     
    wickedstangs likes this.
  5. wickedstangs

    wickedstangs Well-Known Member

    @Brogan how can I fix this
    upload_2013-7-29_22-32-26.png upload_2013-7-29_22-32-26.png
     
  6. Shelley

    Shelley Well-Known Member

    Add the following in extra and adjust the colour to your preference. I'm sure this can be done in style properties also.

    Code:
    .titleBar .muted a {color: red; }
    
     
  7. wickedstangs

    wickedstangs Well-Known Member

    Awesome it worked.. I had to add !important or else it wouldn't take... Thank you Shelley..
     
  8. wickedstangs

    wickedstangs Well-Known Member

    @Shelley have one more issue:) Also just saw there is an edit under Start Date and Time and Date under admin:( How to change them individually?
    test2.JPG
    .muted, body a.muted, body .muted a {
    color: rgb(244, 245, 240) !important;
    }
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    This may sound like a daft question but have you considered changing the muted text colour in the palette?

    Or did you specifically change it to white for a reason?
     
  10. Shelley

    Shelley Well-Known Member

    That's originally what I thought and was going to suggest modifying which would be the better option if they didn't modify it for something specifically.
     
  11. wickedstangs

    wickedstangs Well-Known Member

    @Brogan
    was trying to do all template edits in the Extra.css (my first skin) so that I wont have to mess with any of the core.. I will try messing with the palette later, when I feel comfortable doing it:).

    .muted, body a.muted, body .muted a {
    color: red !important;
    }

    Changes all of the below..
    em1.JPG Em2.JPG Em3.JPG
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    Quite honestly, using EXTRA.css to override the palette colours is the wrong way to go about it.

    Just edit the palette to the colours you want and any elements which use that particular @colour will automatically use the new colour.
     
    wickedstangs likes this.
  13. Shelley

    Shelley Well-Known Member

    You wasnt to remove that as it will apply it to all classes. You will want to be more specific and apply something like the following:

    Code:
    .nodeLastPost .DateTime {color: red;}
     
  14. Shelley

    Shelley Well-Known Member

    Here's a quick reference for the lastpost area if it's of any help to you.

    Code:
    .nodeLastPost .DateTime {color: red;}
    .nodeLastPost .username {color: green;}
    .nodeLastPost .lastThreadTitle {color: purple;}
    .nodeLastPost .lastThreadTitle a {color: lime;}
    Screenshot_14.png
     
  15. wickedstangs

    wickedstangs Well-Known Member


    @Shelley how do you find the above code? I am using mozilla's Web Developers tool and get the below when looking at the area? How can you get real specific...??

    Code:
    .muted, body a.muted, body .muted a {
    color: red !important;
    }
     
  16. wickedstangs

    wickedstangs Well-Known Member

    is there a color chart that shows what changes when messing around with the palette colors?
     
  17. Shelley

    Shelley Well-Known Member

    I'm using firebug a firefox plugin which would be more use to you to find all the classes you require. https://getfirebug.com/
     
    wickedstangs likes this.
  18. Brogan

    Brogan XenForo Moderator Staff Member

    Not really as there are so many different elements.

    I normally change it to a bright, garish colour and then check the various pages to see what is affected.
     
    Shelley and wickedstangs like this.
  19. wickedstangs

    wickedstangs Well-Known Member

    @Shelley firebug shows the same thing.. Doesn't show .
    Code:
    .nodeLastPost .DateTime
    coding.JPG
     
  20. Shelley

    Shelley Well-Known Member

    I don't like personally using the color palette because each page I do has it's own specific styling but generally for consistency I colour links the same. If I do use the color palette I will use it towards the end of whenever I build a style for the links i've missed and rather than specify a colour for them I'll use the color palette to make the global change rather than faffing around.

    Totally misread your question but as what brogan does I would do the same and use a garish colour so I know what areas are inheriting the color. if that area doesn't suit the colour from the palette I'll then be specific in applying a colour to that area. Hopefully that makes more sense than my previous post. :)
     
    wickedstangs likes this.

Share This Page