Pumpkins effect in sidebar [Halloween] 1.4

[Velli]

Velli submitted a new resource:

Pumpkins effect in sidebar [Halloween] - Pumpkins

Following the resource of snow @Shelley, I add pumpkins for sidebar.

View attachment 59208

First, upload the image found in the attachment into your /overlay folder then paste the following css into your EXTRA.CSS template and your done.

.sidebar .section:before {
content: "";
display: block;
height: 25px;
margin-top: 5px;
background:...

Read more about this resource...

 

[tommydamic68]

Would it matter that I use widget framework http://xenforo.com/community/threads/bd-widget-framework.28014/page-108#post-654574 - it will not show in my sidebar.

 

[Velli]

Would it matter that I use widget framework http://xenforo.com/community/threads/bd-widget-framework.28014/page-108#post-654574 - it will not show in my sidebar.

No problem ^^

 

[Shelley]

Would it matter that I use widget framework http://xenforo.com/community/threads/bd-widget-framework.28014/page-108#post-654574 - it will not show in my sidebar.

I'm quite sure it's using a different class so the classname or an additional class will need entered. I can't 100% recall since I used this FW a while back.

 

[tommydamic68]

Anyone?

 

[Shelley]

Anyone?

I've noticed in the code the incorrect path or rather the filename is present. You'll have to rename the background path name to point to the image.

.sidebar .section:before {
content: "";
display: block;
height: 25px;
margin-top: 5px;
background: url("@imagePath/xenforo/overlay/sidebar_xmas.png") no-repeat scroll left transparent;
}

it should be the following

.sidebar .section:before {
content: "";
display: block;
height: 25px;
margin-top: 5px;
background: url("@imagePath/xenforo/overlay/halloweenczbar.gif") no-repeat scroll left transparent;
}

 

[Shelley]

Confirmed.

Simply upload the image to your style /overlay folder and in EXTRA.CSS paste the following.

.sidebar .section:before {
content: "";
display: block;
height: 25px;
margin-top: 5px;
background: url("@imagePath/xenforo/overlay/halloweenczbar.gif") no-repeat scroll left transparent;
}

 

[Shelley]

Because the visitorPanel doesn't have a container and the image looks kind of odd on it I thought I'd share the css to have that hidden on the chance some might want to not display it on the visitiorpanel.

.sidebar .visitorPanel:before {display: none!important;}

Image Hidden......................................................Image displayed

 

[Velli]

Thanks @Shelley for all the help.
I would not be able to simply followed your addon.

 

[tommydamic68]

I've noticed in the code the incorrect path or rather the filename is present. You'll have to rename the background path name to point to the image.

.sidebar .section:before {
content: "";
display: block;
height: 25px;
margin-top: 5px;
background: url("@imagePath/xenforo/overlay/sidebar_xmas.png") no-repeat scroll left transparent;
}

it should be the following

.sidebar .section:before {
content: "";
display: block;
height: 25px;
margin-top: 5px;
background: url("@imagePath/xenforo/overlay/halloweenczbar.gif") no-repeat scroll left transparent;
}

So this code will work with widget framework!

 

[Shelley]

So this code will work with widget framework!

Yeah, this will work with the widget framework I installed it and tested it on my testing site you just have to change the filename of the image in the css.

 

[CallieJo]

This is a cute resource. Thanks to all who shared. I can see doing the same thing for other holidays.

 

[CoZmicShReddeR]

Anybody know how to update this to work with XenForo 2.0??

 

[Russ]

Anybody know how to update this to work with XenForo 2.0??

.p-body-sidebar .block:before {
    display: block;
    height: 25px;
    margin-top: 5px;
    content: "";
    background: url(styles/stylefolder/xenforo/overlay/halloweenczbar.gif) no-repeat 10px 0 transparent;
}

Should work in extra.less

 

[CoZmicShReddeR]

.p-body-sidebar .block:before {
    display: block;
    height: 25px;
    margin-top: 5px;
    content: "";
    background: url(styles/stylefolder/xenforo/overlay/halloweenczbar.gif) no-repeat 10px 0 transparent;
}

Should work in extra.less

Works wonderfully thank you!