• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Customizing sidebar block

Liam23

Active member
#1
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:

download (3).png

I also want to have different background images for different blocks

Example:

download (4).png



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

Thank you soooooooo MUCH!
 

Shelley

Well-known member
#2
Haven't tested but you could try for board stats

Code:
#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

Active member
#3
Haven't tested but you could try for board stats

Code:
#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

Well-known member
#5
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.

Code:
#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;
}
block-h3.png
 

Liam23

Active member
#6
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.

Code:
#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