12. February 2021
Instructions for your own design of the wheel of fortune
How to create a wheel of fortune with your own HTML and CSS code
HTML and CSS for the wheel of fortune
Basic HTML layout
<main class="mlctr-underlayer ml-v-2" role="ml" style="background-color:rgba(0, 0, 0, 0.65)">
<form onsubmit="return mailocator.action.do('subscribe')">
<div class="mlctr-wheel mlctr-flex" style="width: 600px">
...
</div>
</form>
</main>
insert the base skeleton in the exact order of the tags below. This tag order is required.
<main> represents a background layer with transparency set<form> to send data to Mailocator through actions subscribe<div class="mlctr-wheel ... the default element that defines the type of campaign using the class .mlctr-wheel and with a default widthBasic CSS
@import url('https://www.cdn-ml.net/css/mailocator-v2.1.css');
/* background */
.mlctr-underlayer { position:fixed; z-index:99999; width: 100%; height: 100%; top:0px; left:0px; right:0px; bottom:0px;) }
/* campaign */
.mlctr-wheel {
position: relative;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow:hidden;
}
insert the recommended style set for Mailocator campaigns,
omitting this set can affect animation behavior, responsiveness, and cause unwanted behavior or display
add the necessary minimum of styles to render a centered element to display the contents of the window, at least for
mailocator-v2.1.css or lateromitting this set can affect animation behavior, responsiveness, and cause unwanted behavior or display
add the necessary minimum of styles to render a centered element to display the contents of the window, at least for
.mlctr-underlayer and .mlctr-wheelInserting your own wheel
Graphics and format
To prepare a wheel by a graphic designer, we recommend creating a default wheel divided into the required number of segments, downloading the SVG source and handing it over to the graphic designer for further editing.
The wheel must always have the same height and width, any shadows and other design elements must be inserted as separate elements with their own positioning.
We strongly recommend preparing the wheel in SVG vector format, but it is also possible to use raster formats JPG or PNG.
The wheel must always have the same height and width, any shadows and other design elements must be inserted as separate elements with their own positioning.
We strongly recommend preparing the wheel in SVG vector format, but it is also possible to use raster formats JPG or PNG.
Insertion method
The wheel can be inserted either as an image using a tag
You can place the wheel anywhere, eccentrically, partially hidden or otherwise.
The wheel does not require any mandatory styling.
Insert as image:
Insert SVG directly:
<IMG> or as an XML source in a tag <SVG>.You can place the wheel anywhere, eccentrically, partially hidden or otherwise.
The wheel does not require any mandatory styling.
Insert as image:
<img src="https://example.com/my-wheel.svg" id="mlctr_wheel" width="500" height="500" data-pointer_deg="0">Insert SVG directly:
<svg id="mlctr_wheel" width="500" height="500" data-pointer_deg="0" viewBox="20 20 460 460" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> ... </svg>Wheel marking
The wheel must be marked with an attribute
Example:
id="mlctr_wheel" Example:
<img src="https://example.com/my-wheel.svg" id="mlctr_wheel" ...<svg id="mlctr_wheel" ... Winning indicator setting
The payout indicator can be in any shape and you can place it anywhere around the circumference of the round. In order to show the winnings correctly, you need to tell Mailocator where the pointer is. The setting must be made using the attribute
if the pointer is located at 3 o'clock (center right), it is the default position and the attribute does not need to be set or set to 0
if the pointer is located at the top of the 12 o'clock (top center), set the number of degrees relative to the home position, that is
if the pointer is positioned at the bottom for 6 hours (bottom center), set the number of degrees relative to the home position, that is
if the pointer is located at the bottom of 9 o'clock (center left), set the number of degrees relative to the home position, ie
This way you can place the position of the pointer anywhere, you only have to enter the calculated position in degrees.
Example:
data-pointer_deg in the picture of the wheel, where you enter a number with the number of degrees, which differs from the starting position, which is located at 3 hours respectively 90 degrees.if the pointer is located at 3 o'clock (center right), it is the default position and the attribute does not need to be set or set to 0
if the pointer is located at the top of the 12 o'clock (top center), set the number of degrees relative to the home position, that is
-90 degrees: data-pointer_deg="-90"if the pointer is positioned at the bottom for 6 hours (bottom center), set the number of degrees relative to the home position, that is
90 degrees: data-pointer_deg="90"if the pointer is located at the bottom of 9 o'clock (center left), set the number of degrees relative to the home position, ie
180 degrees: data-pointer_deg="180"This way you can place the position of the pointer anywhere, you only have to enter the calculated position in degrees.
Example:
<img src="https://example.com/my-wheel.svg" data-pointer_deg="90" ...<svg id="mlctr_wheel" data-pointer_deg="90" ...