Leaderboard

Go to forums -> font -> index -> index . Find: <li data-categoryID='{$category->_id}' class='cForumRow ipsBox ipsSpacer_bottom ipsResponsive_pull'> Change to: {{if $category->_id == 1 && !\IPS\Member::loggedIn()->inGroup( array(4, 2) )}} <div class="ipsFlex ipsFlex-jc:center ipsFlex-ai:center ipsFlex-fd:column cForumRow_premium"> <h2> Premium department </h2> <p> Get premium here </p> </div> {{endif}} $ category -> _ id - stands for the category ID. ! \ IPS \ Member :: loggedIn () -> inGroup (array ( 4, 2 )) - means groups that have access to the category Paste CSS code: .cForumList li[data-categoryid="1"].cForumRow { position: relative; } .cForumRow_premium { background-color: rgba(0, 0, 0, 0.5); z-index: 1; position: absolute; width: 100%; height: 100%; line-height: 0; font-size: 30px; color: #fff; } [data-categoryid = "1"] - means the category ID

here is something that i found but i have made it the way i wanted it called guest bot Gaby witch i think you would like for your home page or you can just make it any way you want in your theme you will have 2 remove the h1 forums and replace it with this <div class="box4"> <a href="https://www.yourcommunity/forum/site-questions-3/"> <!-- Link of button--> <i class="fa fa-question-circle boxLogo4"></i> <!-- Icon of button, it is run on Font Awesome Icons only if theme support fontawesome--> <!-- <img class="boxLogo4" src="https://steamstore-a.akamaihd.net/public/shared/images/header/globalheader_logo.png"> --> <span class="boxJoin4">HAVE A QUESTION?</span><!-- Hover text--> <span class="boxText4">GuestBot Gaby!</span><!-- Button text--> <i id="boxArrow4" class="fa fa-angle-right"></i> <div class="shade4"> </div> </a> </div> </div> add this 2 your css <div class="widget_name"> <!-- You can change name of every widget you add--> <div class=" ipsPad_half"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> <!-- If you add another button, you need to change the every number from css style, e.g.: .box4 need to change to .box5 to not overwrite--> <style media="screen" type="text/css"> * { font-family: 'Montserrat', sans-serif; } .box4{ position: relative; cursor: pointer; width: 285px; height: 50px; background-color: #116196; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 8px 0 rgba(0,0,0,0.3); transition: 400ms ease-in-out; } .shade4{ position: relative; width: 148px; height: 100px; background: #561f76; opacity: 0.5; left: 200px; transform: rotate(135deg); top: -16px; transition: all ease-in-out 500ms; } .boxText4{ position: absolute; font-size: 15px; font-weight: 700; color: white; left: 70px; top: 15px; transition: all ease-in-out 400ms; } .boxJoin4{ z-index: 2; position: absolute; font-size: 17px; font-weight: 700; color: white; opacity: 0; transform: scale(0.3); transition: all ease-in-out 400ms; left: 25px; top: 15px; } .boxLogo4{ position: absolute; font-size: 38px; color: #fff; top: 5px; margin-left: 10px; transition: all ease-in-out 400ms; } #boxArrow4{ z-index: 2; color: white; font-size: 24px; position: absolute; left: 256px; top: 12px; transition: all ease-in-out 400ms; } .box4:hover { box-shadow: 0 6px 8px 0 rgba(0,0,0,0.3); } .box4:hover .shade4{ transform: rotate(90deg); height: 320px; top: -140px; left: 68px; } .box4:hover .boxText4{ top: -48px; } .box4:hover .boxJoin4{ opacity: 1; transform: scale(1); } .box4:hover .boxLogo4{ top: -48px; } .box4:hover #boxArrow4{ transform: translateX(60px); } </style>