XF 2.2 Is it possible to make my forum change header depending on what node category you clicked in?

[NandorHUN]

Hi Guys!

I want to change picture or header pic. based on the category my users chosen. I think it's pretty stylsish
Is it possible?

 

[Mr Lucky]

This might be what you want in extra.less (where XX is the node ID )

[data-container-key="node-xx"]
{
.p-header
    {background:url(PATH_TO_IMAGE);}}

 

[NandorHUN]

This might be what you want in extra.less (where XX is the node ID )

[data-container-key="node-xx"]
{
.p-header
    {background:url(PATH_TO_IMAGE);}}

Wow! This is GREAT! I would give you 10 likes if i could. Just what I was looking for. Couldnt belive that I have to creat custom themes every single time I want to change a header!

Just one extra thing: what to do in mobile view?
In mobile wiew (android) it is not usable, only a small part of the pic is visible.
Also I have to resize all my pictures (2000x300) because they are too big.

 

[Mr Lucky]

See here

CSS background-size property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

CSS background-position property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[Mr Lucky]

Wow! This is GREAT! I would give you 10 likes if i could.

Might be good to mark the answer as solution so useful for others with same question

 

[NandorHUN]

Might be good to mark the answer as solution so useful for others with same question

One last thing.
If I have a category with like 50 forums and 100 threads. What's the best way to do it?
Do I really need to copy this line 150 times in extra.less or can I make a list that works? Something like:

[data-container-key="node-1,2,3,4,6,7,8"]
{
.p-header
{background:url(PATH_TO_IMAGE_01);}}

[data-container-key="node-45,34,64,34"]
{
.p-header
{background:url(PATH_TO_IMAGE_02);}}


??

Thnaks

 

[Mr Lucky]

One last thing.
If I have a category with like 50 forums and 100 threads. What's the best way to do it?
Do I really need to copy this line 150 times in extra.less or can I make a list that works? Something like:

[data-container-key="node-1,2,3,4,6,7,8"]
{
.p-header
{background:url(PATH_TO_IMAGE_01);}}

[data-container-key="node-45,34,64,34"]
{
.p-header
{background:url(PATH_TO_IMAGE_02);}}


??

Thnaks

Try it and see. But I think this will work:

[data-container-key="node-1"],[data-container-key="node-2"],[data-container-key="node-3"]
{
.p-pageWrapper
    {background-image:PATH_TO_IMAGE}}