4 Stylish Boxes for your Forum

Homicide

HomicideHomicide is verified member.

Administrator
Staff member
Points 43
Solutions 0
Location
USA
Messages
265
Joined
Oct 27, 2025
Reaction score
164
Points
43
Website
xenforoleaks.net

Screenshot 2026-02-18 030337.png​

Step to install this on your Forum
  • In your PAGE CONTAINER, find this:
HTML: 
<xf:if is="$notices.scrolling">
                <xf:macro id="notice_macros::notice_list" arg-type="scrolling" arg-notices="{$notices.scrolling}" />
            </xf:if>
  • And ADD this code under it.
HTML: 
<div class="star-block">
  <div class="star-block-1">
    <div class="star-icon-1"><span><xf:fa icon="fad fa-download" aria-hidden="true"/></span></div>
    <div class="content">
      <h3>Name # 1</h3>
      <p>Name this what ever you want.</p>
    </div>
  </div>
  <div class="star-block-2">
    <div class="star-icon-2"><span><xf:fa icon="fad fa-home" aria-hidden="true"/></span></div>
    <div class="content">
      <h3>Name # 2</h3>
      <p>Name this what ever you want.</p>
    </div>
  </div>
  <div class="star-block-3">
    <div class="star-icon-3"><span><xf:fa icon="fad fa-palette" aria-hidden="true"/></span></div>
    <div class="content">
      <h3>Name # 3</h3>
      <p>Name this what ever you want.</p>
    </div>
  </div>
  <div class="star-block-4">
    <div class="star-icon-4"><span><xf:fa icon="fad fa-crown" aria-hidden="true"/></span></div>
    <div class="content">
      <h3>Name # 4</h3>
      <p>Name this what ever you want.</p>
    </div>
  </div>
</div>

  • Add this code to your Extra Less file
CSS: 
/* Notices */
.star-block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 0px;
    margin-bottom: 10px;
}

/* staraddons.store - Block themes style */
.star-block-1 {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 30px;
  color: #ffffff;
  font-family: sans-serif;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(45deg, #490e24, #f35e61, #490e24);
  background-size: 100% 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  animation: gradientBG 15s ease infinite;
  transition: transform 0.5s cubic-bezier(0.25,1,0.5,1),
  box-shadow 0.5s cubic-bezier(0.25,1,0.5,1);
  border: 1px solid #dbdbdb;
}
.star-block-2 {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 30px;
  color: #ffffff;
  font-family: sans-serif;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(45deg, #3153b0, #9e1d84, #3153b0);
  background-size: 100% 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  animation: gradientBG 15s ease infinite;
  transition: transform 0.5s cubic-bezier(0.25,1,0.5,1),
  box-shadow 0.5s cubic-bezier(0.25,1,0.5,1);
  border: 1px solid #dbdbdb;
}
.star-block-3 {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 30px;
  color: #2b542c;
  font-family: sans-serif;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(45deg, #faee21, #6fe600, #00ffff);
  background-size: 100% 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  animation: gradientBG 15s ease infinite;
  transition: transform 0.5s cubic-bezier(0.25,1,0.5,1),
  box-shadow 0.5s cubic-bezier(0.25,1,0.5,1);
  border: 1px solid #dbdbdb;
}
.star-block-4 {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 30px;
  color: #ffffff;
  font-family: sans-serif;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(45deg, #8461f4, #81d8e5, #8461f4);
  background-size: 100% 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  animation: gradientBG 15s ease infinite;
  transition: transform 0.5s cubic-bezier(0.25,1,0.5,1),
  box-shadow 0.5s cubic-bezier(0.25,1,0.5,1);
  border: 1px solid #dbdbdb;
}
/*****************************/
/* staraddons.store - Icon style */
.star-icon-1 {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  border-radius: 50%;
  background: linear-gradient(45deg, #b22659, #f87173, #761538);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  animation: gradientIcon 8s ease infinite;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
    color: #ffffff;
}
.star-icon-1 span {
  font-size: 45px;
}
.star-icon-2 {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  border-radius: 50%;
  background: linear-gradient(45deg, #4472f3, #db29b7, #4472f3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  animation: gradientIcon 8s ease infinite;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  color: #ffffff;
}
.star-icon-2 span {
  font-size: 45px;
}
.star-icon-3 {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  border-radius: 50%;
  background: linear-gradient(45deg, #a6a47a, #69b424, #1f6767);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  animation: gradientIcon 8s ease infinite;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  color: #ffffff;
}
.star-icon-3 span {
  font-size: 45px;
}
.star-icon-4 {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  border-radius: 50%;
  background: linear-gradient(45deg, #d7ccff, #53c4d5, #a488ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  animation: gradientIcon 8s ease infinite;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  color: #ffffff;
}
.star-icon-4 span {
  font-size: 45px;
}
/*****************************/
/*staraddons.store - Content (title + description) */
.content h3 {
  margin: 0 0 4px;
  font-size: 17px;
    font-weight: 600;
}
.content p {
  margin: 0;
  font-size: 13px;
  opacity: 0.9;
}
/*****************************/
/* Hover animations */
.star-block-1:hover {
  transform: translateY(0px) scale(1.0);
}
.star-block-1:hover .star-icon-1 {
  transform: translateY(0px) scale(1.0) rotate(360deg);
}
.star-block-2:hover {
  transform: translateY(0px) scale(1.0);
}
.star-block-2:hover .star-icon-2 {
  transform: translateY(0px) scale(1.0) rotate(360deg);
}
.star-block-3:hover {
  transform: translateY(0px) scale(1.0);
}
.star-block-3:hover .star-icon-3 {
  transform: translateY(0px) scale(1.0) rotate(360deg);
}
.star-block-4:hover {
  transform: translateY(0px) scale(1.0);
}
.star-block-4:hover .star-icon-4 {
  transform: translateY(0px) scale(1.0) rotate(360deg);
}
/*****************************/
/* Responsive settings */
@media (max-width: 992px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .cards { grid-template-columns: 1fr; } }
/*****************************/
 
You must log in or register to reply here.
Back
Top Bottom