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

XF 1.2 .categoryStrip

wickedstangs

Well-known member
#1
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;
}
 

Shelley

Well-known member
#3
Solve it.. Just added !important to all of them and it worked..
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

Well-known member
#8
@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;
}
 

Brogan

XenForo moderator
Staff member
#9
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?
 

Shelley

Well-known member
#10
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?
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.
 

wickedstangs

Well-known member
#11
@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
 

Brogan

XenForo moderator
Staff member
#12
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.
 

Shelley

Well-known member
#13
@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..
View attachment 52611 View attachment 52612 View attachment 52613
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;}
 

Shelley

Well-known member
#14
@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..
View attachment 52611 View attachment 52612 View attachment 52613
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
 

wickedstangs

Well-known member
#15
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;}

@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;
}
 

wickedstangs

Well-known member
#16
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.
is there a color chart that shows what changes when messing around with the palette colors?
 

Shelley

Well-known member
#20
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. :)