CSS Randomizer
To buy this -- wait a minute, you don't need to buy this! This is FREE! Though, it's still limited to only those with Grandmaster or above membership, because it uses containers.
Stats at a glance
RANDOMIZATION USING CSS
Have you always wanted a random article button? Maybe a little bit of interactive flair to give your readers a chance to pull something from a hat/chest/shelf at random in your stories? Well then today's the day, here's a working randomizer that's actually fairly light-weight and easy to use :D There's a few limitations with it. One, this one only works by having 10 different options, each which must be filled out in the BBCode section. They don't all have to be unique, but they do all need content in them. Two, the different "choices" should each be the same relative size -- this is easily done with CSS, or you can just attempt to type the same amount in each one. Three -- sometimes it fails. But that's okay, there's a reset button to try again. Essentially, it works like a big slot machine wheel. It cycles all 10 options very quickly via animation (all while hidden away), and then when you click the button, it pauses the animation and brings the wheel container up, displaying whichever choice wound up on top. It's delightfully simple!Randomized Article Blocks
Randomized Container Blocks
blank
Select!
Reset!
This is Choice 1
And some filler text to go along with it. You likely want all of these random choices to be about the same length of content, so that they all cover eachother up. Or, you can do what I've done here, and add overflow scrolling to this container, and manually set the same height for each, so that they all line up perfectly.This is Choice 2
And some filler text to go along with it. You likely want all of these random choices to be about the same length of content, so that they all cover eachother up. Or, you can do what I've done here, and add overflow scrolling to this container, and manually set the same height for each, so that they all line up perfectly.This is Choice 3
And some filler text to go along with it. You likely want all of these random choices to be about the same length of content, so that they all cover eachother up. Or, you can do what I've done here, and add overflow scrolling to this container, and manually set the same height for each, so that they all line up perfectly.This is Choice 4
And some filler text to go along with it. You likely want all of these random choices to be about the same length of content, so that they all cover eachother up. Or, you can do what I've done here, and add overflow scrolling to this container, and manually set the same height for each, so that they all line up perfectly.This is Choice 5
And some filler text to go along with it. You likely want all of these random choices to be about the same length of content, so that they all cover eachother up. Or, you can do what I've done here, and add overflow scrolling to this container, and manually set the same height for each, so that they all line up perfectly.This is Choice 6
And some filler text to go along with it. You likely want all of these random choices to be about the same length of content, so that they all cover eachother up. Or, you can do what I've done here, and add overflow scrolling to this container, and manually set the same height for each, so that they all line up perfectly.This is Choice 7
And some filler text to go along with it. You likely want all of these random choices to be about the same length of content, so that they all cover eachother up. Or, you can do what I've done here, and add overflow scrolling to this container, and manually set the same height for each, so that they all line up perfectly.This is Choice 8
And some filler text to go along with it. You likely want all of these random choices to be about the same length of content, so that they all cover eachother up. Or, you can do what I've done here, and add overflow scrolling to this container, and manually set the same height for each, so that they all line up perfectly.This is Choice 9
And some filler text to go along with it. You likely want all of these random choices to be about the same length of content, so that they all cover eachother up. Or, you can do what I've done here, and add overflow scrolling to this container, and manually set the same height for each, so that they all line up perfectly.This is Choice 10
And some filler text to go along with it. You likely want all of these random choices to be about the same length of content, so that they all cover eachother up. Or, you can do what I've done here, and add overflow scrolling to this container, and manually set the same height for each, so that they all line up perfectly.I've attempted to make the overall CSS design of this particular free add-on to fit to as many different themes as possible. I've also tried to make the CSS as clear as possible, so that it's easy for you other CSS wizards to go in and modify what you like or don't like about it! Adapt it to your own theme, go wild with it. All I ask is that credit is provided to me! A link back to this article is LOVELY, but if it doesn't fit, it's not required. Please check out the code below!
The Code
Note: There will be a small amount of fiddling needed to be done to match the randomizer to your theme. The select/reset text, the spoiler button width, or transparent backgrounds all may need to be changed. I've tried to put examples in the CSS so it's easy to see what needs to be modified.CSS
Note: You will need to remove the space between the / and the * on the comments in the CSS. The space needed to be added so that they'd show up on here. Or, just delete em./ *This is an added bit of CSS for the randomizer with text blocks within, rather than article blocks* /
.randomizer .blockchoice {
height: 300px;
display: block;
background: black;
padding: 15px;
overflow-y: auto;
position: relative;
top: -30px;
border: 2px solid;
border-radius: 5px;
box-shadow: 0 0 75px rgba(250,250,250,0.2) inset;
}
/ *THIS CODE IS FOR THE RANDOMIZER* /
/ *This small bit at the top is for customizing the overall height/positioning of the randomizer as a whole* /
.randomizer {
width: 100%;
height: 420px;
position: relative;
}
/ *You will need to modify some of these depending on what theme you are using, and if you are using article blocks.* /
.randomizer .spoiler-button {
width: 100px;
}
.randomselect,
.randomreset {
position: absolute;
margin-top: -30px; / *moves the select/reset text to align w/ the button* /
color: white;
}
.randomizer .article-panel {
height: 275px; / *easiest to set a constant height* /
}
.randomizer .article-panel .excerpt {
display: none; / *the article block excerpts are always different lengths, I just hide them* /
}
/ *This is to slightly better position the randomizer within sidebar sections* /
.user-css .panel .randomizer {
width: 95%;
left: 8px;
}
/ *Positioning of the random choices within the randomizer, can be modified if need be* /
.randomizer *[class^=choice] {
margin-top: 55px;
}
/ *Hiding the pesky spoiler box, we only want the button functionality* /
.randomizer .well,
.randomizer .collapse.in,
.randomizer .collapsing,
.randomizer .card {
display: none;
}
/ *Styling of the spoiler button. Note, colour MUST remain as transparent, as we don't care what the text on it is.* /
.randomizer .spoiler-button {
color: transparent !important;
text-shadow: none;
left: 50%;
transform: translateX(-50%) ;
position: relative;
}
/ *Styling of the select/reset text you set within the BBCode. You can change the color and font of it, but I wouldn't fiddle with the positioning too much.* /
.randomselect,
.randomreset {
position: absolute;
margin-top: -38px;
left: 50%;
transform: translateX(-50%) ;
pointer-events: none;
}
/ *Now we get into the mechanics of it. This switches between select and reset text when the button is pushed* /
.randomizer .spoiler-button:nth-child(1)[aria-expanded$=true] ~ .randomselect,
.randomreset {
display: none; }
.randomizer .spoiler-button:nth-child(1)[aria-expanded$=true] ~ .randomreset {
display: block; }
/ *This is the background of the overall container. It switches to another background upon button press. This new BG is usually hidden by whatever choice appears, but it's there just in case the randomizer fails.* /
.randombg {
position: absolute;
left: 50%;
transform: translateX(-50%) ;
background: url(https://www.worldanvil.com/uploads/images/436c1a11e1010f8999c66ce9fdadbbd1.png) no-repeat, rgba(150,150,150,0.2) ;
background-position: 50%;
z-index: 0 !important;
width: 325px;
height: 350px;
border: 2px dashed;
border-radius: 10px;
pointer-events: none;
}
.randomizer .spoiler-button:nth-child(1)[aria-expanded$=true] ~ .randombg {
background: url(https://www.worldanvil.com/uploads/images/ec34a66e563c8ddb116bdb4b17f54659.png) no-repeat, rgba(150,150,150,0.2) ;
background-position: 50%;
z-index: 0 !important;
}
/ *This section leads into the mechanics and stylings of each "choice". You shouldn't have to fiddle with anything else below this comment, as it's mostly just mechanics.* /
.randomizer *[class^=choice] {
animation: randomizer .1s infinite;
position: absolute;
left: 50%;
transform: translate(-50%) ;
width: 315px;
pointer-events: none;
opacity: 0%;
}
.randomizer .spoiler-button:nth-child(1)[aria-expanded$=true] ~ *[class^=choice] {
animation-play-state: paused;
opacity: 100%;
pointer-events: auto !important;
}
/ *Just for your reference, this is how the randomizer works. Each choice has the same animation "randomizer" that cycles quickly through Z-index. Each choice then also has a delay proportional to the animation length set above.* /
.randomizer .choice1 {
animation-delay: 0s;}
.randomizer .choice2 {
animation-delay: .01s;}
.randomizer .choice3 {
animation-delay: .02s;}
.randomizer .choice4 {
animation-delay: .03s;}
.randomizer .choice5 {
animation-delay: .04s;}
.randomizer .choice6 {
animation-delay: .05s;}
.randomizer .choice7 {
animation-delay: .06s;}
.randomizer .choice8 {
animation-delay: .07s;}
.randomizer .choice9 {
animation-delay: .08s;}
.randomizer .choice10 {
animation-delay: .09s;}
@keyframes randomizer {
0% {z-index: -1;}
10% {z-index: 45;}
10.1% {z-index: -1;}
20% {z-index: -1;}
30% {z-index: -1;}
40% {z-index: -1;}
50% {z-index: -1;}
60% {z-index: -1;}
70% {z-index: -1;}
80% {z-index: -1;}
90% {z-index: -1;}
100% {z-index: -1;}
}
BBCODE
The BBcode is (super) simple. You've got two sections where you can input your "select" and "reset" text, if you want to modify it, and then 10 places where you can put article blocks, or other containers.
This BBCode is how I have my Article Block randomizer set up.
[container:randomizer]
[spoiler] |blank [/spoiler]
[container:randomselect] Select! [/container]
[container:randomreset] Reset! [/container]
[container:choice1]
[articleblock:YOUR BLOCK GOES HERE]
[/container]
[container:choice2]
[articleblock:YOUR BLOCK GOES HERE]
[/container]
[container:choice3]
[articleblock:YOUR BLOCK GOES HERE]
[/container]
[container:choice4]
[articleblock:YOUR BLOCK GOES HERE]
[/container]
[container:choice5]
[articleblock:YOUR BLOCK GOES HERE]
[/container]
[container:choice6]
[articleblock:YOUR BLOCK GOES HERE]
[/container]
[container:choice7]
[articleblock:YOUR BLOCK GOES HERE]
[/container]
[container:choice8]
[articleblock:YOUR BLOCK GOES HERE]
[/container]
[container:choice9]
[articleblock:YOUR BLOCK GOES HERE]
[/container]
[container:choice10]
[articleblock:YOUR BLOCK GOES HERE]
[/container]
[container:randombg] [/container]
[/container]
For reference, this is how i have the Randomizer with text blocks inside it set uip. It's simply another container inside (I've provided the CSS for said container in the CSS portion of this as well).
[container:randomizer]
[spoiler] |blank [/spoiler]
[container:randomselect] Select! [/container]
[container:randomreset] Reset! [/container]
[container:randombg] [/container]
[container:choice1]
[container:blockchoice]
[h1]This is Choice 1[/h1]
YOUR TEXT GOES HERE -
[/container]
[/container]
[container:choice2]
[container:blockchoice]
[h1]This is Choice 2[/h1]
YOUR TEXT GOES HERE -
[/container]
[/container]
[container:choice3]
[container:blockchoice]
[h1]This is Choice 3[/h1]
YOUR TEXT GOES HERE -
[/container]
[/container]
[container:choice4]
[container:blockchoice]
[h1]This is Choice 4[/h1]
YOUR TEXT GOES HERE -
[/container]
[/container]
[container:choice5]
[container:blockchoice]
[h1]This is Choice 5[/h1]
YOUR TEXT GOES HERE -
[/container]
[/container]
[container:choice6]
[container:blockchoice]
[h1]This is Choice 6[/h1]
YOUR TEXT GOES HERE -
[/container]
[/container]
[container:choice7]
[container:blockchoice]
[h1]This is Choice 7[/h1]
YOUR TEXT GOES HERE -
[/container]
[/container]
[container:choice8]
[container:blockchoice]
[h1]This is Choice 8[/h1]
YOUR TEXT GOES HERE -
[/container]
[/container]
[container:choice9]
[container:blockchoice]
[h1]This is Choice 9[/h1]
YOUR TEXT GOES HERE -
[/container]
[/container]
[container:choice10]
[container:blockchoice]
[h1]This is Choice 10[/h1]
YOUR TEXT GOES HERE -
[/container]
[/container]
[/container]
In Article Use Examples
The Comprilith ('Venture Within' module)by Stormbril
This is awesome :O Would be a nice addition to some articles of my world :D
Thank you! :D I hope it proves useful and easy enough to implement!
Well, I done it. Now a little randomizer decorates my Homepage. Pretty neat if you asked me.
That is very exciting to hear :D