XF 1.2 .categoryStrip

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;
}
 
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; }
 
@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.webp
.muted, body a.muted, body .muted a {
color: rgb(244, 245, 240) !important;
}
 
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?
 
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.
 
@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.webp Em2.webp Em3.webp
 
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.
 
@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;}
 
@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.webp
 
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;
}
 
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?
 
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. :)
 
Top Bottom