Mensagem na Página Principal

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.

Boa noite @Invisveel!

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

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

Musashi escreveu:Boa noite @Invisveel!

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

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

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

overral_header:

Alguém pode me retornar?

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.

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..

pedxz escreveu:Falta os estilos (CSS). Onde encontrou esse código?!

Estamos também a aguardar uma resposta sua.

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/

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!

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: 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".