XF 2.2 Help page CSS extra.less - change h3 title color

[philmckrackon]

I would like to change the h3 title color only on the template help_index without affect other templates. I can do this my using html in the title field but the html code is displayed in the tab - example:
Title: <font color ="brown">Insert a Video as an attachment.</font>


Page inspect shows:

and


I tried editing help_index line <h3 class="block-textHeader"> to <h3 class="block-textHeader-custom-brown"> an tried both these in extra.less but I must have the format wrong.

.block-textHeader-custom-brown
{
color: brown
}


.block-row block-row--separated.block-textHeader-custom-brown
{
color: brown
}

I pretty sure I need to incorperate a:link, a:visited, a:hover, and a:active but not sure.

Any thoughts or ideas?
Thanks,

 

[Davyc]

Try this:

[CODE][data-template="help_index"] .p-title {
    color: blue;
}

[data-template="help_page"] .p-title {

    color: blue;

}

Change the color to what you want, either by name, hex or RGB. you may have to add both to your extra.less template

 

[philmckrackon]

Thank you, that worked great.
Is it possible to change the link colors as well?

 

[Davyc]

Try this:

[data-template="help_page"] a {
    color: #443e32;
    text-decoration: none;
}

If you want it on the index page for Help change the data-template to "help_index"

 

[philmckrackon]

Thanks again, I'm learnin...

The CSS you supplied does only affect the link color but it changes ALL on the page. Can it be limited to just the DIV blocks below?

 

[mjda]

Thanks again, I'm learnin...

The CSS you supplied does only affect the link color but it changes ALL on the page. Can it be limited to just the DIV blocks below?

You could probably do something like this:

[data-template="help_index"],
[data-template="help_page"]
{
    .p-body-main a
    {
        color: #443e32;
        text-decoration: none;
    }
}

 

[philmckrackon]

@mjda That was it. Thank you and thanks @Davyc for the help.

Is there any particular resource that is recommended besides W3 (I read that)?

 

[Paul B]

You can replace:

[data-template="help_index"],
[data-template="help_page"]

With:

[data-template*="help"]

That will match all templates with help in the name.

 

[mjda]

Is there any particular resource that is recommended besides W3 (I read that)?

You mean a resource for learning CSS? For me, most of what I've learned is just from asking questions and I don't even want to know how many hours of searching Google until I figure out something that works.