Как сделать кнопки в welcome_section

Gena_Korakovskil · Вчера в 23:21

Как сделать такие же кнопки как на скрине или может есть плагин для этого?

Gena_Korakovskil · Вчера в 23:27

Помогите пж

pikamonov · Сегодня в 00:50

@Gena_Korakovskil,
Во-первых, перед созданием темы - прочитайте правила нашего форума
Во-вторых, вы конкретнее задавайте вопрос, прикладывайте форум где увидели эти "КНОПОЧКИ".

Gena_Korakovskil · Сегодня в 10:20

pikamonov написал(а):
@Gena_Korakovskil,
Во-первых, перед созданием темы - прочитайте правила нашего форума
Во-вторых, вы конкретнее задавайте вопрос, прикладывайте форум где увидели эти "КНОПОЧКИ".

Вот ссылка на форум где эти кнопки https://alphina-mobile.hgweb.ru
Надеюсь поможете

JustAlex · Сегодня в 11:40

Gena_Korakovskil написал(а):
Вот ссылка на форум где эти кнопки https://alphina-mobile.hgweb.ru
Надеюсь поможете

Не забудь конечно поменять ссылки соц. сетей на свои, ну и если надо будет, то отредактируй код под себя.
Этот код вставлять в page_container, а вот и он сам:

Код:

<div class="media__body">
                            <div class="uix_welcomeSection__title">Добро пожаловать!</div>

                            <div class="uix_welcomeSection__text">Для того, чтобы начать взаимодействовать с форумом Вам необходимо будет зарегистрировать аккаунт.</div>

                            <a href="/index.php?register/" class="button--cta button"><span class="button-text">ЗАРЕГИСТРИРОВАТЬСЯ</span></a>
                        </div>
                    </div>
                </div>
            </div>
       
   

                           
   

                           
   

                           
   


                            <div class="p-body-main p-body-main--withSidebar ">
                               
                               

                               
   

                                <div uix_component="MainContent" class="p-body-content">
                                    <!-- ABOVE MAIN CONTENT -->
                                   
   

                                   
   

                                   
   
       
   

                                   
   

                                   
   

                                    <div class="p-body-pageContent">
                                       
   

                                       
   
       
   

                                       
   

                                       
   

                                       
   

                                       







   







   
   
   
       
   
   
   


   
   
   
   
       
   
   
   


   
   






   



    <div class="block">
        <div class="block-container"  data-widget-id="14" data-widget-key="silki" data-widget-definition="html">
           
            <div class="block-body block-row">
                <style>
/* Убираем фон и рамку только у нашего виджета */
.block[data-widget-key="social-links"] .block-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Сетка с максимум 3 кнопками в ряд */
.links-widget {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 15px;
  padding: 10px 0;
}

/* Кнопки */
.links-widget a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  padding: 12px;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
  opacity: 0;                   /* скрываем изначально */
  transform: translateY(20px);  /* немного ниже */
  animation: fadeInUp 0.6s forwards;
}
.links-widget a:nth-child(1) { animation-delay: 0.1s; }
.links-widget a:nth-child(2) { animation-delay: 0.2s; }
.links-widget a:nth-child(3) { animation-delay: 0.3s; }
.links-widget a:nth-child(4) { animation-delay: 0.4s; }
.links-widget a:nth-child(5) { animation-delay: 0.5s; }

.links-widget a.tg { background: #0088cc; }
.links-widget a.vk { background: #4a76a8; }
.links-widget a.dc { background: #5865f2; }

.links-widget a:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Иконки */
.links-widget img {
  width: 20px;
  height: 20px;
}

/* --- Адаптив --- */
@media (max-width: 600px) {
  .links-widget {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Анимация */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<div class="links-widget">
  <a href="https://t.me/AlphinaMobile" target="_blank" class="tg">
    <img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" alt="Telegram"> Telegram
  </a>
  <a href="https://vk.com/alphinamobile.online?from=groups" target="_blank" class="vk">
    <img src="https://cdn-icons-png.flaticon.com/512/145/145813.png" alt="VK"> VK
  </a>
  <a href="https://discord.gg/dkCeMEwvR3" target="_blank" class="dc">
    <img src="https://img.icons8.com/color/48/000000/discord-logo.png" alt="Discord"> Discord
  </a>
  <!-- Пример 4-й ссылки -->
  <a href="https://t.me/crmp_dev0" target="_blank" class="tg">
    <img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" alt="Telegram"> Telegram
  </a>
</div>
            </div>
        </div>
    </div>

Jack_Mithel · Сегодня в 11:41

JustAlex написал(а):

Не забудь конечно поменять ссылки соц. сетей на свои, ну и если надо будет, то отредактируй код под себя.
Этот код вставлять в page_container, а вот и он сам:

Код:

<div class="media__body">
                            <div class="uix_welcomeSection__title">Добро пожаловать!</div>

                            <div class="uix_welcomeSection__text">Для того, чтобы начать взаимодействовать с форумом Вам необходимо будет зарегистрировать аккаунт.</div>

                            <a href="/index.php?register/" class="button--cta button"><span class="button-text">ЗАРЕГИСТРИРОВАТЬСЯ</span></a>
                        </div>
                    </div>
                </div>
            </div>
      
  

                          
  

                          
  

                          
  


                            <div class="p-body-main p-body-main--withSidebar ">
                              
                              

                              
  

                                <div uix_component="MainContent" class="p-body-content">
                                    <!-- ABOVE MAIN CONTENT -->
                                  
  

                                  
  

                                  
  
      
  

                                  
  

                                  
  

                                    <div class="p-body-pageContent">
                                      
  

                                      
  
      
  

                                      
  

                                      
  

                                      
  

                                      







  







  
  
  
      
  
  
  


  
  
  
  
      
  
  
  


  
  






  



    <div class="block">
        <div class="block-container"  data-widget-id="14" data-widget-key="silki" data-widget-definition="html">
          
            <div class="block-body block-row">
                <style>
/* Убираем фон и рамку только у нашего виджета */
.block[data-widget-key="social-links"] .block-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Сетка с максимум 3 кнопками в ряд */
.links-widget {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 15px;
  padding: 10px 0;
}

/* Кнопки */
.links-widget a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  padding: 12px;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
  opacity: 0;                   /* скрываем изначально */
  transform: translateY(20px);  /* немного ниже */
  animation: fadeInUp 0.6s forwards;
}
.links-widget a:nth-child(1) { animation-delay: 0.1s; }
.links-widget a:nth-child(2) { animation-delay: 0.2s; }
.links-widget a:nth-child(3) { animation-delay: 0.3s; }
.links-widget a:nth-child(4) { animation-delay: 0.4s; }
.links-widget a:nth-child(5) { animation-delay: 0.5s; }

.links-widget a.tg { background: #0088cc; }
.links-widget a.vk { background: #4a76a8; }
.links-widget a.dc { background: #5865f2; }

.links-widget a:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Иконки */
.links-widget img {
  width: 20px;
  height: 20px;
}

/* --- Адаптив --- */
@media (max-width: 600px) {
  .links-widget {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Анимация */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<div class="links-widget">
  <a href="https://t.me/AlphinaMobile" target="_blank" class="tg">
    <img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" alt="Telegram"> Telegram
  </a>
  <a href="https://vk.com/alphinamobile.online?from=groups" target="_blank" class="vk">
    <img src="https://cdn-icons-png.flaticon.com/512/145/145813.png" alt="VK"> VK
  </a>
  <a href="https://discord.gg/dkCeMEwvR3" target="_blank" class="dc">
    <img src="https://img.icons8.com/color/48/000000/discord-logo.png" alt="Discord"> Discord
  </a>
  <!-- Пример 4-й ссылки -->
  <a href="https://t.me/crmp_dev0" target="_blank" class="tg">
    <img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" alt="Telegram"> Telegram
  </a>
</div>
            </div>
        </div>
    </div>

он про виджет скорее всего

It-Intel · Сегодня в 12:01

JustAlex написал(а):

Не забудь конечно поменять ссылки соц. сетей на свои, ну и если надо будет, то отредактируй код под себя.
Этот код вставлять в page_container, а вот и он сам:

Код:

<div class="media__body">
                            <div class="uix_welcomeSection__title">Добро пожаловать!</div>

                            <div class="uix_welcomeSection__text">Для того, чтобы начать взаимодействовать с форумом Вам необходимо будет зарегистрировать аккаунт.</div>

                            <a href="/index.php?register/" class="button--cta button"><span class="button-text">ЗАРЕГИСТРИРОВАТЬСЯ</span></a>
                        </div>
                    </div>
                </div>
            </div>
      
  

                          
  

                          
  

                          
  


                            <div class="p-body-main p-body-main--withSidebar ">
                              
                              

                              
  

                                <div uix_component="MainContent" class="p-body-content">
                                    <!-- ABOVE MAIN CONTENT -->
                                  
  

                                  
  

                                  
  
      
  

                                  
  

                                  
  

                                    <div class="p-body-pageContent">
                                      
  

                                      
  
      
  

                                      
  

                                      
  

                                      
  

                                      







  







  
  
  
      
  
  
  


  
  
  
  
      
  
  
  


  
  






  



    <div class="block">
        <div class="block-container"  data-widget-id="14" data-widget-key="silki" data-widget-definition="html">
          
            <div class="block-body block-row">
                <style>
/* Убираем фон и рамку только у нашего виджета */
.block[data-widget-key="social-links"] .block-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Сетка с максимум 3 кнопками в ряд */
.links-widget {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 15px;
  padding: 10px 0;
}

/* Кнопки */
.links-widget a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  padding: 12px;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
  opacity: 0;                   /* скрываем изначально */
  transform: translateY(20px);  /* немного ниже */
  animation: fadeInUp 0.6s forwards;
}
.links-widget a:nth-child(1) { animation-delay: 0.1s; }
.links-widget a:nth-child(2) { animation-delay: 0.2s; }
.links-widget a:nth-child(3) { animation-delay: 0.3s; }
.links-widget a:nth-child(4) { animation-delay: 0.4s; }
.links-widget a:nth-child(5) { animation-delay: 0.5s; }

.links-widget a.tg { background: #0088cc; }
.links-widget a.vk { background: #4a76a8; }
.links-widget a.dc { background: #5865f2; }

.links-widget a:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Иконки */
.links-widget img {
  width: 20px;
  height: 20px;
}

/* --- Адаптив --- */
@media (max-width: 600px) {
  .links-widget {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Анимация */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<div class="links-widget">
  <a href="https://t.me/AlphinaMobile" target="_blank" class="tg">
    <img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" alt="Telegram"> Telegram
  </a>
  <a href="https://vk.com/alphinamobile.online?from=groups" target="_blank" class="vk">
    <img src="https://cdn-icons-png.flaticon.com/512/145/145813.png" alt="VK"> VK
  </a>
  <a href="https://discord.gg/dkCeMEwvR3" target="_blank" class="dc">
    <img src="https://img.icons8.com/color/48/000000/discord-logo.png" alt="Discord"> Discord
  </a>
  <!-- Пример 4-й ссылки -->
  <a href="https://t.me/crmp_dev0" target="_blank" class="tg">
    <img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" alt="Telegram"> Telegram
  </a>
</div>
            </div>
        </div>
    </div>

ты чуть чуть лишнее взял)

виджет какашка:

<div class="block">
        <div class="block-container" data-widget-id="14" data-widget-key="silki" data-widget-definition="html">
            
            <div class="block-body block-row">
                <style>
/* Убираем фон и рамку только у нашего виджета */
.block[data-widget-key="social-links"] .block-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Сетка с максимум 3 кнопками в ряд */
.links-widget {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 15px;
  padding: 10px 0;
}

/* Кнопки */
.links-widget a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  padding: 12px;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
  opacity: 0;                   /* скрываем изначально */
  transform: translateY(20px);  /* немного ниже */
  animation: fadeInUp 0.6s forwards;
}
.links-widget a:nth-child(1) { animation-delay: 0.1s; }
.links-widget a:nth-child(2) { animation-delay: 0.2s; }
.links-widget a:nth-child(3) { animation-delay: 0.3s; }
.links-widget a:nth-child(4) { animation-delay: 0.4s; }
.links-widget a:nth-child(5) { animation-delay: 0.5s; }

.links-widget a.tg { background: #0088cc; }
.links-widget a.vk { background: #4a76a8; }
.links-widget a.dc { background: #5865f2; }

.links-widget a:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Иконки */
.links-widget img {
  width: 20px;
  height: 20px;
}

/* --- Адаптив --- */
@media (max-width: 600px) {
  .links-widget {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Анимация */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<div class="links-widget">
  <a href="https://t.me/AlphinaMobile" target="_blank" class="tg">
    <img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" alt="Telegram"> Telegram
  </a>
  <a href="https://vk.com/alphinamobile.online?from=groups" target="_blank" class="vk">
    <img src="https://cdn-icons-png.flaticon.com/512/145/145813.png" alt="VK"> VK
  </a>
  <a href="https://discord.gg/dkCeMEwvR3" target="_blank" class="dc">
    <img src="https://img.icons8.com/color/48/000000/discord-logo.png" alt="Discord"> Discord
  </a>
  <!-- Пример 4-й ссылки -->
  <a href="https://t.me/crmp_dev0" target="_blank" class="tg">
    <img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" alt="Telegram{СА}"> Telegram{СА}
  </a>
</div>
            </div>
        </div>
    </div>

У типов гпт код, забавно). Чтобы этот виджет вставить, есть мой гайд как сделать вк виджет https://pawno-help.ru/threads/sozdanie-vidzheta-gruppy-vkontakte-na-forume.6426/, но тебе нужно выбрать немного другое положение. У меня под рукой нету сейчас возможности ксен форо поставить, но поищи там то, что связано с (над узлами) и в html код вставляй этот код. В целом этого предостаточно

LIVE SAMP

Как сделать кнопки в welcome_section

Добро пожаловать!

Gena_Korakovskil

Gena_Korakovskil

pikamonov

𝚖𝚘𝚛𝚜 𝚌𝚎𝚛𝚝𝚊, 𝚑𝚘𝚛𝚊 𝚒𝚗𝚌𝚎𝚛𝚝𝚊.

Gena_Korakovskil

JustAlex

Jack_Mithel

It-Intel

Ушёл