Snow effect in sidebar

Snow effect in sidebar v1

No permission to download

Shelley

Well-known member
Shelley submitted a new resource:

Snow effect in sidebar (version v1) - Snow effect in sidebar

This tip will allow you to display a snow or any other effect you desire to appear in your sidebar blocks. In this example were are decorating the sidebar for the festive season.

View attachment 26167
6DFhQ.png


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.

Code:
.sidebar .section:before {
    content: "";...

Read more about this resource...
 
Anyone know how to alter the code so the image can sit on top of the Categories?
Code:
.nodeList .node.level_1:before {
    content: "";
    display: block;
    height: 25px;
    margin-top: 5px;
    background: url("@imagePath/xenforo/overlay/sidebar_xmas.png") no-repeat scroll left transparent;
}

upload_2014-12-1_16-48-55.webp
 
What is a overlay?
overlay
verb
verb: overlay; 3rd person present: overlays; past tense: overlaid; past participle:overlaid; gerund or present participle: overlaying
əʊvəˈleɪ/
  1. 1.
    cover the surface of (something) with a coating.
    "their fingernails were overlaid with silver or gold"
    synonyms: cover, face, surface, veneer, inlay, laminate; More
    • lie on top of.
      "a third screen which will overlay the others"
  2. 2.
    (of a quality or feeling) become more prominent than (a previous quality or feeling).
    "his openness had been overlaid by his new self-confidence"
noun
noun: overlay; plural noun: overlays
ˈəʊvəleɪ/
  1. 1.
    something laid as a covering over something else.
    "a durable, cost-effective floor overlay"
    synonyms: covering, layer, face, surface, veneer, lamination, encrustation,carpet, blanket, sheet, curtain, canopy, cover, cloak, veil, pall,shroud, screen, mask, cloud, envelope; More

    antonyms: underlay, base
    • a transparent sheet placed over artwork or something such as a map, giving additional information or detail.
      "full-colour aerial photographs with overlays showing suggested routes"
  2. 2.
    COMPUTING
    the process of transferring a block of program code or other data into internal memory, replacing what is already stored.
    • a block of code or other data transferred during the overlay process.
 
These two words say so much about your Problem. Can you explain it a little bit more ??
Sorry i missed the second part of message, well i remember time ago it was working with older version, now it stopped to work, i am using 1.4.8, and UIX
icon: http://www.trollandia.it/styles/uix/xenforo/overlay/sidebar_xmas.png
code in EXTRA.CSS
Code:
.sidebar .section:before {
    content: "";
    display: block;
    height: 25px;
    margin-top: 5px;
    background: url("http://www.trollandia.it/styles/uix/xenforo/overlay/sidebar_xmas.png") no-repeat scroll left transparent;

site themed: Trollandia Network
 
I tested it in Xenforo 1.5.0 B1 and UI.X and it works, maybe you had forget to close the tag. Copy and Replace this one with yours..
Code:
.sidebar .section:before {
        content: "";
        display: block;
        height: 25px;
        margin-top: 5px;
        background: url("http://www.trollandia.it/styles/uix/xenforo/overlay/sidebar_xmas.png") no-repeat scroll left transparent;
}

Bildschirmfoto 2015-07-18 um 16.53.48.webp
 
Top Bottom