Mensagem na Página Principal

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Mensagem na Página Principal

Mensagem por Invisveel 13.03.22 17:04

Detalhes da questão


Endereço do fórum: https://cntsystem.forumeiros.com/forum
Versão do fórum: AwesomeBB

Descrição


Bom, estou tentando colocar uma imagem na página principal, em forma de HTML, usando esses códigos:

Código:

<div class="slider-cnt">
                                                                                                                                                                                                                                                                              
   <div class="slide-btn" onclick="sliderController.previousSlide()">
                                    <img src="https://i.imgur.com/10BVLlF.png" />                                                                                                                                 
   </div>
                                                                                                                                                                                                                                                                              
   <div style="display: block;" class="rcc-slider-slide">
                                    <a href="/forum" target="_blank"><img src="https://imgur.com/a/VqGLZgF" /></a>                                                                                                                                     
      <div class="slide-title" style="">
                                       POLÍCIA CNT: Bem-vindo ao fórum!                             
      </div>
                                    <a href="/forum" target="_blank"></a>                                                                                                                                         
   </div>
                                                                                                                                                                                                                                                                                                                                                  
   <div class="slide-btn" onclick="sliderController.nextSlide()">
                                    <img src="https://i.imgur.com/10BVLlF.png" />                                                                                                                                 
   </div>
                                                                                                                                                                                                                                                                      
</div>

Porém, ficou nesse modelo: https://prnt.sc/WM-Xgo0SMZAN
Espero por ajuda.
Invisveel

Invisveel
**

Membro desde : 20/07/2021
Mensagens : 57
Pontos : 86

https://dmehb.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Mensagem na Página Principal

Mensagem por Musashi 13.03.22 22:36

Boa noite @Invisveel!

Primeiramente me informe o seu overall_header para que possamos dar continuidade em sua questão! Muito feliz

(Aguardo respostas)
Abraços,
do seu amigo da comunidade, Musashi! Muito feliz
Musashi

Musashi
Ajudeiro
Ajudeiro

Membro desde : 17/02/2021
Mensagens : 519
Pontos : 659

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mensagem na Página Principal

Mensagem por Invisveel 14.03.22 12:20

Musashi escreveu:Boa noite @Invisveel!

Primeiramente me informe o seu overall_header para que possamos dar continuidade em sua questão! Muito feliz

(Aguardo respostas)
Abraços,
do seu amigo da comunidade, Musashi! Muito feliz

Olá! Bom dia, o código está no spoiler abaixo:

overral_header:
Invisveel

Invisveel
**

Membro desde : 20/07/2021
Mensagens : 57
Pontos : 86

https://dmehb.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mensagem na Página Principal

Mensagem por Invisveel 16.03.22 13:28

Alguém pode me retornar?
Invisveel

Invisveel
**

Membro desde : 20/07/2021
Mensagens : 57
Pontos : 86

https://dmehb.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Mensagem na Página Principal

Mensagem por tikky 16.03.22 15:10

Olá @Invisveel,

Falta os estilos (CSS). Onde encontrou esse código?! Para além disso:
Alguém pode me retornar?
Este suporte funciona através de voluntários. Tenha respeito senão será punido de acordo com os nossos regulamentos.


(Aguardo uma resposta sua)
Atenciosamente,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7668
Pontos : 8895

Ir para o topo Ir para baixo

Tópico resolvido Re: Mensagem na Página Principal

Mensagem por Invisveel 17.03.22 13:43

pedxz escreveu:Olá @Invisveel,

Falta os estilos (CSS). Onde encontrou esse código?! Para além disso:
Alguém pode me retornar?
Este suporte funciona através de voluntários. Tenha respeito senão será punido de acordo com os nossos regulamentos.


(Aguardo uma resposta sua)
Atenciosamente,
pedxz.

Ok, perdão, aliás eu estava precisando disso urgentemente, mas ainda estou no aguardo..
Invisveel

Invisveel
**

Membro desde : 20/07/2021
Mensagens : 57
Pontos : 86

https://dmehb.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Mensagem na Página Principal

Mensagem por tikky 17.03.22 14:36

pedxz escreveu:Falta os estilos (CSS). Onde encontrou esse código?!
Estamos também a aguardar uma resposta sua.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7668
Pontos : 8895

Ir para o topo Ir para baixo

Tópico resolvido Re: Mensagem na Página Principal

Mensagem por Invisveel 18.03.22 1:58

Invisveel escreveu:
pedxz escreveu:Olá @Invisveel,

Falta os estilos (CSS). Onde encontrou esse código?! Para além disso:
Alguém pode me retornar?
Este suporte funciona através de voluntários. Tenha respeito senão será punido de acordo com os nossos regulamentos.


(Aguardo uma resposta sua)
Atenciosamente,
pedxz.

Ok, perdão, aliás eu estava precisando disso urgentemente, mas ainda estou no aguardo..

No fórum: https://policiarevolucionari.forumeiros.com/
Invisveel

Invisveel
**

Membro desde : 20/07/2021
Mensagens : 57
Pontos : 86

https://dmehb.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Mensagem na Página Principal

Mensagem por Musashi 18.03.22 14:41

Bom dia @Invisveel!

Primeiramente, modifique o código dos slides para este seguinte:

Código:
 <div class="cnt-slide-container">

<div class="slider-cnt">

  <div onclick="sliderController.previousSlide()" class="slide-btn">
      <img src="https://i.imgur.com/10BVLlF.png">
  </div>

  <div class="cnt-slider-slide">
    <a target="_blank" href="/"> <img src="https://imgur.com/a/VqGLZgF" /></a>
      <div style="" class="slide-title">
        CNT  FÓRUM: Boas-vindas ao fórum da instituição!
      </div>
      <a target="_blank" href="/"></a>
  </div>

  <div onclick="sliderController.nextSlide()" class="slide-btn">
      <img src="https://i.imgur.com/10BVLlF.png">
  </div>

</div>
</div>
    <br>
<script>
var sliderController = {
  slides: null,
  currentSlide: null,
  sliderTimes: [],
  nextSlide: function () {
      if (this.currentSlide >= this.slides.length - 1) {
        this.currentSlide = -1;
      }
      this.currentSlide++;
      this.displaySlide();
  },
  previousSlide: function () {
      if (this.currentSlide <= 0) {
        this.currentSlide = this.slides.length;
      }
      this.currentSlide--;
      this.displaySlide();
  },
  hideAllSlides: function () {
      var len = this.slides.length;
      for (var i = 0; i < len; i++) {
        this.slides[i].style.display = "none";
      }
  },
  displaySlide: function () {
      var cv = this;
      this.clearTimeOuts();
      this.sliderTimes.push(setTimeout(function () { cv.nextSlide(); }, 5000));
      this.hideAllSlides();
      this.slides[this.currentSlide].style.display = "block";
  },
  clearTimeOuts: function () {
      for (var i = 0; i < this.sliderTimes.length; i++) {
        clearTimeout(this.sliderTimes[i]);
      }
  },
  init: function () {
      this.slides = document.getElementsByClassName('cnt-slider-slide');
      if (this.slides === null || this.slides === undefined) {
        return;
      }
      if (!(this.slides.length > 0)) {
        return;
      }
      this.currentSlide = 0;
      var cv = this;
      setTimeout(function () { cv.nextSlide(); }, 5000);
  }
};
sliderController.init();
</script>

Em seguida, após modificado o código supracitado, adicione em sua Folha de estilo (CSS) o seguinte código:

Código:
.cnt-slide-container {
    display: block;
    width: 920px;
    height: 245px;
    margin: 10px auto 5px auto;
    margin-top: -1px!important;
      margin-bottom: -50px!important;
}

.cnt-slide-container .cnt-slide-title {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    color: #fff;
    border-radius: 4px;
    border: 0;
    box-shadow: inset 0 -2px rgba(0,0,0,.15);
    font-family: Cabin,sans-serif;
    height: 40px;
    line-height: 40px;
    margin-bottom: 3px;
    outline: 0;
    padding: 0;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0,0,0,.45);
    vertical-align: baseline
}

.cnt-slide-container .slider-cnt {
    display: block;
    position: relative;
    width: calc(100% - 2px);
    height: calc(100% - 40px);
    border: 1px solid #000;
    border-radius: 6px;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cnt-slide-container .slider-cnt .cnt-slider-slide {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.cnt-slide-container .slider-cnt .cnt-slider-slide:nth-child(2) {
    display: block
}

.cnt-slide-container .slider-cnt .cnt-slider-slide img {
    display: block;
    width: 100%;
    height: 100%
}

.cnt-slide-container .slider-cnt .slide-title {
    display: flex;
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 0;
    align-items: center;
    justify-content: center;
    padding: 0 50px;
    background: #000;
    color: #fff;
    opacity: .7
}

.cnt-slide-container .slider-cnt .slide-btn {
    display: block;
    position: absolute;
    width: 40px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer
}

.cnt-slide-container .slider-cnt .slide-btn:last-child {
    left: unset;
    right: 0
}

.cnt-slide-container .slider-cnt .slide-btn img {
    position: absolute;
    top: calc(50% - 16px);
    left: 5px;
    transform: rotate(180deg)
}

.cnt-slide-container .slider-cnt .slide-btn:last-child img {
    right: 5px;
    transform: rotate(0)
}

.cnt-slide-container .slider-cnt .slide-btn:hover {
    background-color: rgba(64,64,64,.4)
}

.cnt-slide-container .slider-cnt .slide-btn:hover img {
    opacity: .5
}

.cnt-slide-container {
    display: block;
    width: 920px;
    height: 245px;
    margin: 10px auto 5px auto
}

.cnt-slide-container .slider-pmr {
    display: block;
    position: relative;
    width: calc(100% - 2px);
    height: calc(100% - 40px);
    border-radius: 6px;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: url(https://i.servimg.com/u/f52/20/32/24/80/anznci10.png);
    padding: 4px;
    color: #fff
}

.cnt-slide-container .slider-cnt .cnt-slider-slide:nth-child(2) {
    display: block
}

.cnt-slide-container .slider-cnt .cnt-slider-slide {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.cnt-slide-container .slider-cnt .cnt-slider-slide {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.cnt-slide-container .slider-cnt .cnt-slider-slide img {
    display: block;
    width: 100%;
    height: 100%
}

.cnt-slide-container .slider-cnt .slide-title {
    display: flex;
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 0;
    align-items: center;
    justify-content: center;
    padding: 0 50px;
    background: #000;
    color: #fff;
    opacity: .7
}

.cnt-slide-container .slider-cnt .slide-btn:last-child {
    left: unset;
    right: 0
}

.cnt-slide-container .slider-cnt .slide-btn {
    display: block;
    position: absolute;
    width: 40px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer
}

.cnt-slide-container .slider-cnt .slide-btn img {
    position: absolute;
    top: calc(50% - 16px);
    left: 5px
}

.cnt-slide-container .slider-cnt .slide-btn:last-child img {
    right: 5px;
    transform: rotate(0)
}

.cnt-slide-container .slider-cnt .slide-btn img {
    position: absolute;
    top: calc(50% - 16px);
    left: 5px;
    transform: rotate(180deg)
}

.cnt-slide-container .slider-cnt .slide-btn:hover {
    background-color: rgba(64,64,64,.4)
}

Abraços,
do seu amigo da comunidade, Musashi! Muito feliz
Musashi

Musashi
Ajudeiro
Ajudeiro

Membro desde : 17/02/2021
Mensagens : 519
Pontos : 659

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mensagem na Página Principal

Mensagem por Invisveel 18.03.22 23:39

Musashi escreveu:Bom dia @Invisveel!

Primeiramente, modifique o código dos slides para este seguinte:

Código:
 <div class="cnt-slide-container">

<div class="slider-cnt">

   <div onclick="sliderController.previousSlide()" class="slide-btn">
      <img src="https://i.imgur.com/10BVLlF.png">
   </div>

   <div class="cnt-slider-slide">
     <a target="_blank" href="/"> <img src="https://imgur.com/a/VqGLZgF" /></a>
      <div style="" class="slide-title">
         CNT  FÓRUM: Boas-vindas ao fórum da instituição!
      </div>
      <a target="_blank" href="/"></a>
   </div>

   <div onclick="sliderController.nextSlide()" class="slide-btn">
      <img src="https://i.imgur.com/10BVLlF.png">
   </div>

</div>
</div>
     <br>
<script>
var sliderController = {
   slides: null,
   currentSlide: null,
   sliderTimes: [],
   nextSlide: function () {
      if (this.currentSlide >= this.slides.length - 1) {
         this.currentSlide = -1;
      }
      this.currentSlide++;
      this.displaySlide();
   },
   previousSlide: function () {
      if (this.currentSlide <= 0) {
         this.currentSlide = this.slides.length;
      }
      this.currentSlide--;
      this.displaySlide();
   },
   hideAllSlides: function () {
      var len = this.slides.length;
      for (var i = 0; i < len; i++) {
         this.slides[i].style.display = "none";
      }
   },
   displaySlide: function () {
      var cv = this;
      this.clearTimeOuts();
      this.sliderTimes.push(setTimeout(function () { cv.nextSlide(); }, 5000));
      this.hideAllSlides();
      this.slides[this.currentSlide].style.display = "block";
   },
   clearTimeOuts: function () {
      for (var i = 0; i < this.sliderTimes.length; i++) {
         clearTimeout(this.sliderTimes[i]);
      }
   },
   init: function () {
      this.slides = document.getElementsByClassName('cnt-slider-slide');
      if (this.slides === null || this.slides === undefined) {
         return;
      }
      if (!(this.slides.length > 0)) {
         return;
      }
      this.currentSlide = 0;
      var cv = this;
      setTimeout(function () { cv.nextSlide(); }, 5000);
   }
};
sliderController.init();
</script>

A questão foi resolvida, obrigado, @Musashi e @pedxz
Invisveel

Invisveel
**

Membro desde : 20/07/2021
Mensagens : 57
Pontos : 86

https://dmehb.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Mensagem na Página Principal

Mensagem por tikky 19.03.22 11:49

@Invisveel: Lembre-se que nós somos um fórum de suporte não de plágio. Qualquer outra questão que tenha como intuito copiar outros elementos visuais de outros sites será diretamente arquivado na lixeira. Tenha atenção.

Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7668
Pontos : 8895

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos