4 boîtes élégantes pour votre forum

XF 2.2 / 2.3 4 boîtes élégantes pour votre forum

Add-on xenforo 2

Ressources et modules complémentaires pour XenForo 2

Styles xenforo 2

Styles / Thèmes et apparence pour xenforo 2

Templates xenforo 2

Codes pour modifier les templates sur xenforo 2

Section Premium

Add-on et Styles pour membre Premium
4 boîtes élégantes pour votre forum

XF 2.2 / 2.3 4 boîtes élégantes pour votre forum

Catégorie Catégorie Modifications Templates
Titre du sujet Titre du sujet 4 boîtes élégantes pour votre forum
Auteur de la discussion Auteur de la discussion DANY60
Date de début Date de début
Réponses Réponses 0
Affichages Affichages 2
Réaction Réaction 0
Dernier message par Dernier message par DANY60
DANY60

DANY60

Membre suprême

Membre
Réputation: 32%
Top contributeur
Discussions
5
Messages
253
J'aime
28
Points
38
28 38 0 253
Bonjours a tous, voici 4 belles boites élégantes avec l'icone qui pivote, vous devez ajouter un liens vers vos forum préférer comme ceci en bas que j'ai rajouter, ex: remplacer la ligne
HTML: 
<h3> Name # 1</h3>
par ce code pour 1-2-3-4
Note: Tester sur mon site 2.3.7 et fonctionne a merveille
Assurez-vous que votre style utilise Font Awesome 5/6 (les icônes dynamiques nécessitent le jeu Duotone/une configuration FA appropriée).

HTML: 
        <h3><a href="https://votre_site_ici/index.php?resources/"><p><font size="4" color="white">Resources</font></p></a></h3>
1775278119312.webp

Étapes pour installer ceci sur votre forum
  • Dans votre PAGE_CONTAINER, trouvez ceci : environ ligne 546
HTML: 
<xf:if is="$notices.scrolling">
                <xf:macro id="notice_macros::notice_list" arg-type="scrolling" arg-notices="{$notices.scrolling}" />
            </xf:if>
  • Et AJOUTEZ ce code en dessous.
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>

  • Ajoutez ce code à votre fichier Extra Less
Less: 
/* 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; } }
/*****************************/
 
Un minuteur d'été simple et élégant dans des tons jaunes, à ajouter aux widgets HTML
XF 2.1 / 2.2 / 2.3  Un minuteur d'été simple et élégant dans des tons jaunes, à ajouter aux widgets HTML
Dernière édition:
Vous devez vous connecter
ou vous inscrire pour répondre ici.

À propos de nous

Societyfrenchmodding est une communauté Francophone de libres discussions à propos des jeux, xenforo, modding et actualités ...etc

Statistiques en ligne

Membres en ligne
0
Visiteurs en ligne
21
Total de visiteurs
21
Nombre total incluant les visiteurs cachés.

Partager cette page

Restez connecté

Retour
Haut Bas