Show pageOld revisionsBacklinksExport to PDFBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== Creating "Promotions" page in CMS ====== === 1. Add styles to a newly created page === Turn on the HTML view by pressing "< >" symbol in the page editor window. Then paste the following code: ---- <code> <style> .cms-holder .row { display: grid; grid-template-columns: repeat(auto-fill,400px); grid-gap: 1rem; justify-content: space-evenly; padding: 1rem; } .cms-holder h2 { font-size: 38px; padding-top: 2rem; padding-bottom: 2rem; font-weight: 500; } .cms-holder h3 { font-size: 24px; font-weight: 500; } .cms-holder .promo-card { height: 430px; background: var(--main-third-background); border-radius: 4px; margin-bottom: 50px; margin-right: 10px; } .cms-holder .img_area { height: 50%; overflow: hidden; } .cms-holder .img { object-fit: cover; width: 100%; border-top-left-radius: 4px; border-top-right-radius: 4px; } .cms-holder .text_area { height: 215px; text-align: center; padding: 30px 50px; position: relative; cursor: default; } .cms-holder .title { font-size: 18px; color: var(--main-third-background-text); } .cms-holder .subtitle { font-size: 15px; color: var(--main-third-background-text); } .cms-holder .button_area { position: absolute; bottom: 0; left:0; right: 0; padding-bottom: 30px; } .cms-holder .button { height: 50px; background: var(--main-primary); padding: 0px 40px; color: var(--main-primary-text); border: 0px none; display: inline-flex; align-items: center; } .cms-holder .button:hover { background: var(--main-primary); color: var(--main-primary-text); cursor: pointer; filter: brightness(85%); } @media screen and (max-width: 440px) { .cms-holder .row { grid-template-columns: repeat(auto-fill, 300px); } .cms-holder .promo-card { height: 375px; } .cms-holder .img_area { height: 40%; } .cms-holder .text_area { padding: 30px 20px; } } </style> </code> ---- === 2. Add a page title === Paste the following code below (note: In this example a page title is "Promotions".): ---- <code> <div class="row"> <h2>Promotions</h2> </div> </code> ---- === 3.Add a promotions group title === Paste the following code below (note: In this example a promotions group title is "New Customer Offer".): ---- <code> <div class="row"> <h3>New Customer Offer</h3> </div> </code> ---- === 4. Add a grid container === The container is the place where you will create all promotions cards (note: Next step code you need to write inside this code.). Paste the following code below: ---- <code> <div class="row"> The next step code goes here. </div> </code> ---- === 5. Add a single promotion card == Paste the following code inside step four (4) code block: ---- <code> <div class="promo-card"> <div class="img_area"> <img src="https://images.theconversation.com/files/136426/original/image-20160902-20217-1vk9cs5.jpg" alt="" class="img"> </div> <div class="text_area"> <div class="title"> 100% First Deposit Bonus </div><br> <div class="subtitle"> We’ll match your first bonus of up to 20,000 TSh! Sign up today. </div><br> <div class="button_area"> <a href="single-promotion" class="button"> More Info </a> </div> </div> </div> </code> ---- To change the image you need to replace the image link in this part of code **<img src="link_to_image"...>** Change promotion title (note: In this example, a promotion title is "**100% First Deposit Bonus**".) Change promotion sub-title (note: In this example, a promotion sub-title is "**We’ll match your first bonus of up to 20,000 TSh! Sign up today.**".) Change link to full promotion description. To change it you need to edit the link in this part of code **<a href="link_to_page" class="button">** ---- === 6. Create more promotion cards === Repeat step five (5) as many times as you want to create promotion cards in the created promotions group. ---- === 7. Create other group of promotions === Follow steps four (4), five(5) and six(6) to create a different group of promotions. ---- ====== Full demo code for a promotions page ====== <code> <style> .cms-holder .row { display: grid; grid-template-columns: repeat(auto-fill,400px); grid-gap: 1rem; justify-content: space-evenly; padding: 1rem; } .cms-holder h2 { font-size: 38px; padding-top: 2rem; padding-bottom: 2rem; font-weight: 500; } .cms-holder h3 { font-size: 24px; font-weight: 500; } .cms-holder .promo-card { height: 430px; background: var(--main-third-background); border-radius: 4px; margin-bottom: 50px; margin-right: 10px; } .cms-holder .img_area { height: 50%; overflow: hidden; } .cms-holder .img { object-fit: cover; width: 100%; border-top-left-radius: 4px; border-top-right-radius: 4px; } .cms-holder .text_area { height: 215px; text-align: center; padding: 30px 50px; position: relative; cursor: default; } .cms-holder .title { font-size: 18px; color: var(--main-third-background-text); } .cms-holder .subtitle { font-size: 15px; color: var(--main-third-background-text); } .cms-holder .button_area { position: absolute; bottom: 0; left:0; right: 0; padding-bottom: 30px; } .cms-holder .button { height: 50px; background: var(--main-primary); padding: 0px 40px; color: var(--main-primary-text); border: 0px none; display: inline-flex; align-items: center; } .cms-holder .button:hover { background: var(--main-primary); cursor: pointer; filter: brightness(85%); color: var(--main-primary-text); } @media screen and (max-width: 440px) { .cms-holder .row { grid-template-columns: repeat(auto-fill, 300px); } .cms-holder .promo-card { height: 375px; } .cms-holder .img_area { height: 40%; } .cms-holder .text_area { padding: 30px 20px; } } </style> <div class="row"> <h2>Promotions</h2> </div> <div class="row"> <h3>New Customer Offer</h3> </div> <div class="row"> <div class="promo-card"> <div class="img_area"> <img src="https://images.theconversation.com/files/136426/original/image-20160902-20217-1vk9cs5.jpg" alt="" class="img"> </div> <div class="text_area"> <div class="title"> 100% First Deposit Bonus </div><br> <div class="subtitle"> We’ll match your first bonus of up to 20,000 TSh! Sign up today. </div><br> <div class="button_area"> <a href="single-promotion" class="button">More Info</a> </div> </div> </div> <div class="promo-card"> <div class="img_area"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOCHvN20ug7SwUL1vxTTfv3vNf1Lc4-q2jxg&usqp=CAU" alt="" class="img"> </div> <div class="text_area"> <div class="title"> Sports Welcome Bonus </div><br> <div class="subtitle"> Sign up and claim your Sports Welcome Bonus of up to 3,000 TSh! </div><br> <div class="button_area"> <a href="single-promotion" class="button">More Info</a> </div> </div> </div> <div class="promo-card"> <div class="img_area"> <img src="https://static6.depositphotos.com/1033498/658/i/600/depositphotos_6585395-stock-photo-money-banknotes-of-different-countries.jpg" alt="" class="img"> </div> <div class="text_area"> <div class="title"> Casino Welcome Bonus </div><br> <div class="subtitle"> Sign up and claim your Casino Welcome Bonus of up to 15,000 TSh! </div><br> <div class="button_area"> <a href="single-promotion" class="button">More Info</a> </div> </div> </div> </div> <div class="row"> <h3>Online Betting Offers</h3> </div> <div class="row"> <div class="promo-card"> <div class="img_area"> <img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" alt="" class="img"> </div> <div class="text_area"> <div class="title"> One Out Money Back </div><br> <div class="subtitle"> Place an accumulator bet of 7+ matches and if you miss out on only 1 match, we’ll refund.. </div><br> <div class="button_area"> <a href="single-promotion" class="button">More Info</a> </div> </div> </div> <div class="promo-card"> <div class="img_area"> <img src="https://images.unsplash.com/photo-1561414927-6d86591d0c4f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1566&q=80" alt="" class="img"> </div> <div class="text_area"> <div class="title"> 10% Cashback Every Week </div><br> <div class="subtitle"> Get 10% Cash Back every week just by betting on your favourite games! </div><br> <div class="button_area"> <a href="single-promotion" class="button">More Info</a> </div> </div> </div> <div class="promo-card"> <div class="img_area"> <img src="https://images.unsplash.com/photo-1579621970795-87facc2f976d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="" class="img"> </div> <div class="text_area"> <div class="title"> Accumulator Bonus up to 100% </div><br> <div class="subtitle"> Get up to 100% BONUS on every ticket! The more matches you bet on, the bigger your.. </div><br> <div class="button_area"> <a href="single-promotion" class="button">More Info</a> </div> </div> </div> <div class="promo-card"> <div class="img_area"> <img src="https://images.unsplash.com/photo-1508098682722-e99c43a406b2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="" class="img"> </div> <div class="text_area"> <div class="title"> First 10 Bets Bonus </div><br> <div class="subtitle"> Bet on first 10 single or multiple bets and take back all stakes of lost bets. </div><br> <div class="button_area"> <a href="single-promotion" class="button">More Info</a> </div> </div> </div> <div class="promo-card"> <div class="img_area"> <img src="https://images.unsplash.com/photo-1609846077623-72a9961914d6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="" class="img"> </div> <div class="text_area"> <div class="title"> Roulette Extra Bet Bonus </div><br> <div class="subtitle"> Play Roulette game and take back your stake for first bet on product. Limited time offer. </div><br> <div class="button_area"> <a href="single-promotion" class="button">More Info</a> </div> </div> </div> </div> </code> === Result === ---- {{ :admin:online-platform-cms:promotions.png |{{:admin:online-platform-cms:promotions.png?nolink&600|}} ---- **✔ Always use HTML view option in the page editor window while doing all steps.** ---- admin/online-platform-cms/promotions.txt Last modified: 2022/02/21 14:28(external edit)