XF 1.2 .categoryStrip

[wickedstangs]

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

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

 

[wickedstangs]

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

 

[Shelley]

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

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

 

[Paul B]

You could just do it in Style Properties -> Forum / Node List

 

[wickedstangs]

@Brogan how can I fix this

 

[Shelley]

@Brogan how can I fix this
View attachment 52545View attachment 52545

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

.titleBar .muted a {color: red; }

 

[wickedstangs]

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

.titleBar .muted a {color: red; }

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

 

[wickedstangs]

@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?

.muted, body a.muted, body .muted a {
color: rgb(244, 245, 240) !important;
}

 

[Paul B]

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]

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]

@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..

 

[Paul B]

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]

@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:

.nodeLastPost .DateTime {color: red;}

 

[Shelley]

@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.

.nodeLastPost .DateTime {color: red;}
.nodeLastPost .username {color: green;}
.nodeLastPost .lastThreadTitle {color: purple;}
.nodeLastPost .lastThreadTitle a {color: lime;}

 

[wickedstangs]

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:

.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...??

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

 

[wickedstangs]

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]

@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...??

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

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

 

[Paul B]

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

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.

 

[wickedstangs]

@Shelley firebug shows the same thing.. Doesn't show .

.nodeLastPost .DateTime

 

[Shelley]

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.