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

Customizing sidebar block

Discussion in 'Styling and Customization Questions' started by Liam23, Jul 9, 2012.

  1. Liam23

    Liam23 Active Member

    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!
     
  2. Shelley

    Shelley Well-Known Member

    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 likes this.
  3. Liam23

    Liam23 Active Member

    Only board stats worked :(

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

    Shelley Well-Known Member

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

    Shelley Well-Known Member

    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
     
    0xym0r0n and Liam23 like this.
  6. Liam23

    Liam23 Active Member

    Ty <3
     

Share This Page