XF 2.2 Changing the text color of node titles

[RobynLJ]

I"m sure this question has been asked and answered many times, but I just can't seem to find it.

So please forgive me if I ask again. How can I change the text color of the node titles please. Your help would be much appreciated. Thanks.

 

[Ozzy47]

All the same or each one different?

 

[RobynLJ]

All the same or each one different?

All the same color.

 

[Ozzy47]

That is controlled by the style property Block header

 

[RobynLJ]

Sorry, it's not that header I'm talking about. It's the node CHILD titles.

 

[Ozzy47]

Screenshot please

 

[RobynLJ]

Here you go......

 

[l3ta]

.node-title a {color: black;}

 

[Ozzy47]

Add to extra.less

/* NODE TITLE COLOR */
.node-title a
{
    color: red;
}

Change color as desired.

 

[RobynLJ]

.node-title a {color: black;}

Add to extra.less

/* NODE TITLE COLOR */
.node-title a
{
    color: red;
}

Change color as desired.

Worked like a charm! Thank you. Black is a bit too harsh though. What can I specify..........just GRAY?

in extra.less?

 

[l3ta]

in extra.less?

Yes!

 

[RobynLJ]

Thank you both so much. I really appreciate your help VERY MUCH!

 

[Ozzy47]

Not a problem, glad to help.

 

[El Chapo]

@Ozzy47 help me out I'm not understanding your code.

 

[MrPink]

What about changing the text of the description under the title? I'm a dunce. Suppose I wanted both the node title and description to be white. Can someone show the code I would paste? And does it go anywhere in that file?

 

[Davyc]

What about changing the text of the description under the title? I'm a dunce. Suppose I wanted both the node title and description to be white. Can someone show the code I would paste? And does it go anywhere in that file?

Add this to your extra.less file; append with !important if you see no change. Change color and text size to suit.

.node-description {
    font-size: 13px;
    color: #c8d5ef;
}

Appended with !important if required:

.node-description {
    font-size: 13px;
    color: #c8d5ef !important;
}

 

[MrPink]

Thanks for this, I'll try it out.

 

[MrPink]

Well, I goofed on my request. When you look at the list of nodes, you have the titles and descriptions. Then, when you enter the node, the title and description is repeated and the threads are under that. The code above changes the first one (and it works, with important added). The second instance, inside the node above the threads is what I am looking to change color on. The must be a different identifier for that, and that's what I need. I'm sorry!

Is there some sort of style guide for this sort of thing? "This is called that, and that is called this...!"

 

[Davyc]

Is there some sort of style guide for this sort of thing? "This is called that, and that is called this...!"

Are you using any particular style, or the default style that comes with XF? If you are using a PixelExit theme you may find the developer mode useful in identifying the items you want to change. It may be worth the effort to go for a PixelExit theme as there are so many different style options, some of which may be unique to a style, that it's impossible to cover them all. This is why it's useful to helpers to have a much information as possible, generally using screenshots to point precisely what is required to be changed, and a URL to the site so the identifiers can be nailed down to the theme being used.



In the meantime, the code to change the title color and descriptor is this:

.p-title-value {
    color: #39d9c0 !important;
}

And the description

.p-description {
    color: #c8d5ef;
}

If you want different colors for different nodes then you need to add this as a prefix:

[data-container-key="node-X"]

X being the node you are changing. So it would look like this:

[data-container-key="node-X"] .p-title-value {
color: #39d9c0 !important;
}

 

[MrPink]

Sorry I know so little about this. Yes, it is a PixelExit theme, and I like it a lot. I am always wary of diving into the nuts and bolts of something I don't understand well, so I have been reluctant to turn DM on.

I do now see that there's some documentation for that, so I have a look there before I leap. In the meantime, I'll try your new code and report results.

Thank you!