XF 2.1 Change the Font Colour.

[Catsmother]

hello.
I am working on a style and would like to know on how to change the font shown on the screenshot please. I have been through all the tabs I think but it won't change.

 

[gogo]

Add the following to extra.less

[data-template="forum_list"]
{
    .p-title-value {
     color: red;
    }
}

 

[Catsmother]

Add the following to extra.less

[data-template="forum_list"]
{
    .p-title-value {
     color: red;
    }
}

Thank you that worked

Do you also know how to change the colour of the font inside the pages at the bottom
where it says. I think it is the nav tree at the bottom.

• Forums
• Mental Health Matters
• Anxiety Disorders

 

[Catsmother]

Thank you that worked

Do you also know how to change the colour of the font inside the pages at the bottom
where it says. I think it is the nav tree at the bottom.

• Forums
• Mental Health Matters
• Anxiety Disorders
• Autism and Asperger's

 

[gogo]

Thank you that worked

Do you also know how to change the colour of the font inside the pages at the bottom
where it says. I think it is the nav tree at the bottom.

• Forums
• Mental Health Matters
• Anxiety Disorders

A screen cap might help.

 

[Catsmother]

A screen cap might help.

Also do you know how to add an image in the row where you add images and where the smiley box is?

 

[Catsmother]

The part that I want to change font is also below where I have circled but for some reason it won't allow me to screenshot it.

 

[gogo]

Add the following in extra.less

.p-breadcrumbs>li:last-child a {
    color: red;
}

Let me show you how to find it:




1) right-click on the part that you want to make change to
2) click Inspect
3) the related codes will be highlighted
4) you may try to change the values here, for this case, it's color.

5) copy the thing to extra.less

This is the basic. I got a lot to learn/ask too.

 

[Catsmother]

Add the following in extra.less

.p-breadcrumbs>li:last-child a {
    color: red;
}

Let me show you how to find it:

View attachment 235678


1) right-click on the part that you want to make change to
2) click Inspect
3) the related codes will be highlighted
4) you may try to change the values here, for this case, it's color.

5) copy the thing to extra.less

This is the basic. I got a lot to learn/ask too.

lol I have actually tried doing it that way but when I refresh my page it always returns to what it was before.

 

[Paul B]

but when I refresh my page it always returns to what it was before.

You nee to add the changed code to the extra.less template.

Doing it in the browser inspector is just temporary.

 

[Catsmother]

Thanks.
I think that I have worked out on how to do it.