UI CUSTOMIZATION GUIDELINES
1
LOTTOTECH UI customization guidelines
2
OVERVIEW Dear Customer,
these guidelines will lead you trough the basic visual cutomization of your LOTTOTECH WhiteLabel.
You have a website with Wordpress instalation and two themes Lottotech (Parent Theme) and Child Theme for your brand. Any customization will happen in the Child Theme. The LESS mixins and variables are available for editing in the style.less file in the main directory of your Child Theme: www.yourbrand.com/wp-content/hemes/lottotech-child/style.less
The images, required for the widgets, that you cannot edit directly trough wp-admin are in /images folder. Most of the images, listed in this document, if not stated otherwise, are located in this folder www.yourbrand.com/wp-content/hemes/lottotech-child/images/
Other images are available in the /uploads folder of your WordPress: www.yourbrand.com/wp-content/uploads/demo-content/
3
LOTTOTECH UI customization guidelines
UI AND COLORS
All colors in your LOTTOTECH theme, that are not neutrals, are available as variables in the style.less file of the Child Theme:
@accent: #0da6cb
@primary: #02579f
@actionclr: #ff8e00
@secondary: #84ad08
@secondary_text: #666 @primary_text: #333
We provide custom checkboxes and radio buttons. You can find them as sprite image.
checkboxes.png 102 x 40px
4
BUTTONS
A set of mixins and styles controls the button visualization. Here you can find a list of those with stronger appearance impact.
.btn-default tint may be based on @primary or @secondary colors
.action call-to-action, tint may be based on @actionclr or @accent - optional, you can override with the appearance above
.clear() neutral colors to draw less attention
.cancel_action() tint should be alerting
.buynow_arrow(), .buynow_arrow_big() optional additional mixins for essential call-to-actions
.pending_green, .pending_yellow pending states with animation, based on .btn-default and .action styles 5
LOTTOTECH UI customization guidelines
FONTS
You can use a set of mixins to control fonts of your WhiteLabel
Aa
.customfont_regular()
abcdefghijklmnopqrstuvwxyz 0123456789
Aa
.customfont_bold()
abcdefghijklmnopqrstuvwxyz 0123456789
Aa
abcdefghijklmnopqrstuvwxyz 0123456789 6
.font_regular() default font for the site
HEADER
1
2
1
favicon.png 16 x 16px
2
logo.png 90 x 90px
3
loader-logo.png 90 x 90px used for preloaders
7
LOTTOTECH UI customization guidelines
HOMEPAGE 1
2 3
4
5
6
7
1
home_singlejackpot.jpg 2000 x 346px 8
HOMEPAGE 2
demo-content/winners_bgr.jpg 600 x 464px
3
demo-content/winners.png 85 x 85px
4
demo-content/satisfaction.png 85 x 85px
5
demo-content/cashback.png 85 x 85px
6
demo-content/chat.png 85 x 85px
7
demo-content/secure.png 85 x 85px
9
LOTTOTECH UI customization guidelines
FOOTER
1
10
2
1
demo-content/payments.png 410 x 42px
2
demo-content/customer_support_rating.png 113 x 100px
LOTTOROOM 1 5 2
6
3 4
1 6
2
3
7
8
header_background.png 500 x 400px
ok_corner.png 52 x 52px
marked.png 36 x 36px
11
LOTTOTECH UI customization guidelines
LOTTOROOM 4
5
6
7
12
band_best_value.png 50 x 48px
demo_content/cashback_stamp.png 100 x 100px used to promote different bonuses, remove if irrelevant
hint_arrow.png 32 x 65px
scanned_sticker.png 80 x 67px
8
insured_sticker.png 80 x 67px
9
free_stamp.png 150 x 90px used for freeline bonus
BANNERS 1 banner_promo.png 264 x 475px
2
promo_banner.png 2048 x 402px for retina or half-size for regular display
3
banner_horoscope.png 272 x 150px
4
banner_horoscope_mobile.png 272 x 120px
5
banner_numerology.png 272 x 150px
6
banner_numerology_mobile.png 272 x 120px
13
LOTTOTECH UI customization guidelines
PURCHASE FUNNEL 1 2
3
14
1
demo-content/safe_secure.png 72 x 72px
2
demo-content/lotto_reliable_service.png 337 x 115px
3
demo-content/guaranteed_winnings.png 72 x 72px
4
calendar.png 113 x 136px used on deposit
HOROSCOPE 1
1
astro.png 12 starsigns 90x90px each 290 x 390px size of the sprite
15
LOTTOTECH UI customization guidelines
NUMEROLOGY 1
2
3
16
1
calendar.png 113 x 136px
2
numerology_bgr_desktop.png 900 x 400px
3
numerology_bgr_mobile.png 307 x 390px
THANK-YOU PAGE 1
2
1
thank_you_bgr.png 820 x 180px
2
lottery_glow.png 220 x 160px
17
LOTTOTECH UI customization guidelines
Thank you for choosing LOTTOTECH! You can always contact our team at supposrt@lottotech.com
18