Customizing sidebar block

[Liam23]

Hello Xenforo community

I would like to ask how to customize the sidebar blocks

I want to add images for the background of the title box.

Example:



I also want to have different background images for different blocks

Example:





Can an amazing soul please tell me how to do this?

Thank you soooooooo MUCH!

 

[Shelley]

Haven't tested but you could try for board stats

#boardStats h3 {
background: csscodetoyourimage;
}
.membersOnline h3 {
background: csscodetoyourimage;
}
.staffOnline h3 {
background: csscodetoyourimage;
}

I can't tell you the donate block as I don't know the class name from an image.

 

[Liam23]

Haven't tested but you could try for board stats

#boardStats h3 {
background: csscodetoyourimage;
}
.membersOnline h3 {
background: csscodetoyourimage;
}
.staffOnline h3 {
background: csscodetoyourimage;
}

I can't tell you the donate block as I don't know the class name from an image.

Only board stats worked

Could you keep trying and repost code for sharepage,members online, staff online? Thanks!

 

[Shelley]

Did you try adding !important just before the ";" see if that gets it working?

 

[Shelley]

Only board stats worked

Could you keep trying and repost code for sharepage,members online, staff online? Thanks!

I've tested the following and it works. Where you would alter the css "repeat" and "color" within the code to your preference and path to each specific image.

edit: infact it works without the !important needing added maybe there's some conflict over-riding it somehwere in your css.

#boardStats h3 {
background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top red !important;
}
.membersOnline h3 {
background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top green !important;
}
.staffOnline h3 {
background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top orange !important;
}
.sharePage h3 {
background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top purple !important;
}

 

[Liam23]

I've tested the following and it works. Where you would alter the css "repeat" and "color" within the code to your preference and path to each specific image.

edit: infact it works without the !important needing added maybe there's some conflict over-riding it somehwere in your css.

#boardStats h3 {
background: url("styles/test2/xenforo/gradients/category-23px-light.png") repeat-x scroll center top red !important;
}
.membersOnline h3 {
background: url("styles/test2/xenforo/gradients/category-23px-light.png") repeat-x scroll center top green !important;
}
.staffOnline h3 {
background: url("styles/test2/xenforo/gradients/category-23px-light.png") repeat-x scroll center top orange !important;
}
.sharePage h3 {
background: url("styles/test2/xenforo/gradients/category-23px-light.png") repeat-x scroll center top purple !important;
}

View attachment 31398

Ty <3