Jump to content
shacapell

XML de slide

Recommended Posts

Olá pessoal!

Entendo um pouco de html e tenho um blog em xml, então preciso da ajuda de vocês.

Eu queria tirar essa função de slide de posts e colocar uma imagem de fundo do mesmo tamanho e um texto com link por cima. Vejam > www.babadeanimais.net

 

Outra coisinha, nos posts e páginas está configurado para a primeira imagem ficar no topo ocupando todo o espaço. Queria tirar isso, mas nem sei onde está no código.

 

#main-slider .slick-prev,.main-gallery .slick-prev,#main-slider .slick-next,.main-gallery .slick-next,.related-stuff .slick-prev,.related-stuff .slick-next{font-size:25px;color:#000;display:block;text-align:center;background:#fff;outline:0;padding:0;width:35px;height:50px;position:absolute;top:50%;margin-top:-15px;cursor:pointer;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
button.slick-nav.slick-prev i{color:#252525}
button.slick-nav.slick-next i{color:#252525}
span.feat-cat a{color:#FFF;padding:5px 15px;background-color:$(theme.sec.color);border-radius:40px}
h2.feat-title a{color:#252525}
.feat-readmore a{color:#FFF;padding:6px 10px;background-color:$(theme.color);box-shadow:3px 3px 0 0 $(theme.sec.color)}
.feat-readmore a:hover{box-shadow:none}
.related-stuff .slick-prev,.related-stuff .slick-next{top:30%}
#main-slider .slick-prev{left:200px}
.main-gallery .slick-prev,.related-stuff .slick-prev{left:-40px}
.main-gallery .slick-next,.related-stuff .slick-next{right:-40px}
.main-gallery:hover .slick-prev,.related-stuff:hover .slick-prev{left:0}
.main-gallery:hover .slick-next,.related-stuff:hover .slick-next{right:0}
.slick-prev:before,.slick-next:before{content:''}
#main-slider .slick-next{right:200px}
.item{position:relative}
#section-featured{position:relative;min-height:50px;width:100%}
#main-slider div img{max-width:100%;height:490px;object-fit:cover;width:100%}
#main-slider div span.title{font-size:19px;color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:25px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}
div#main-slider{width:100%;overflow:hidden}
div#bt-slider-main .title{display:none}
.feat-wrapper{position:absolute;left:10px;bottom:120px;right:10px;padding:20px;width:60%;margin:0 auto}
.feat-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;padding:40px;vertical-align:middle;text-align:center;border-top:0;background:#fff;color:#fff;-webkit-box-shadow:9px 9px 0 0 #F1F1F1;-moz-box-shadow:9px 9px 0 0 #F1F1F1;box-shadow:9px 9px 0 0 #F1F1F1}
.feat--inner{vertical-align:middle;display:table-cell}
.feat-header{margin-bottom:0;padding:0 20px}
.feat-cat:before{content:'';display:inline-block;height:2px;width:40px;background:#A2A2A2;margin-bottom:5px;margin-right:0}
.feat-cat:after{content:'';display:inline-block;height:2px;width:40px;background:#A2A2A2;margin-bottom:5px;margin-left:0}
span.feat-cat{font-size:12px;letter-spacing:1px;padding-bottom:2px;display:inline-block;margin:0 0 10px 5px;font-weight:400;text-transform:uppercase}
.slick-slide{opacity:1;transition:.2s}
.item.slick-slide.slick-active.slick-center{opacity:1;transition:.2s}
.slick-slider{position:relative;display:block;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px}
[dir='rtl'] .slick-slide{float:right}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;margin-top:-10px;padding:0;cursor:pointer;color:transparent;border:none;outline:none;background:transparent}
.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;background:transparent}
.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1}
.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:.25}
.slick-prev:before,.slick-next:before{font-family:'slick';font-size:20px;line-height:1;opacity:.75;color:#252525;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-prev{left:-25px}
[dir='rtl'] .slick-prev{right:-25px;left:auto}
.slick-next{right:-25px}
[dir='rtl'] .slick-next{right:auto;left:-25px}
.slick-slider{margin-bottom:30px}
.slick-dots{text-align:center}
.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 8px;padding:0;cursor:pointer}
.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent}
.slick-dots li button:hover,.slick-dots li button:focus{outline:none}
.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;background-color:$(theme.color)}
.slick-dots li button:before{position:absolute;top:0;display:block;left:0;content:'';text-align:center;opacity:.35;height:5px;width:22px;background-color:#656464;margin-top:5px;transition:.2s;border-radius:50px}
.slick-dots li.slick-active button:before{opacity:.75;background-color:$(theme.color)}
@media only screen and (max-width:767px) and (min-width:480px) {
#main-slider .slick-prev,.main-gallery .slick-prev,.related-stuff .slick-prev{left:0}
#main-slider .slick-next,.main-gallery .slick-next,.related-stuff .slick-next{right:0}
#main-slider div img{height:350px}
.feat-wrapper{bottom:15px;padding:10px;width:430px}
h2.feat-title{line-height:32px;font-size:23px}
.thumbnail{margin:0 auto}
.item.slick-slide:before{opacity:1;background:0 0}
}
@media only screen and (max-width:479px) {
.fixedheader .grid,span.feat-cat{display:none}
.header img,.thumbnail{margin:0 auto}
#main-slider .slick-next{right:0}
#main-slider .slick-prev{left:0}
#main-slider div img{height:275px}
.gal4 img{height:250px}
.feat-readmore{width:135px}
img.thumb-single{max-height:300px}
h2.feat-title{line-height:32px;font-size:23px}
.feat-wrapper{bottom:15px;padding:5px;width:94%}
}
.large-12.column{text-align:center}
@-webkit-keyframes justified-gallery-show-caption-animation {
from{opacity:0}
to{opacity:.7}
}
@-moz-keyframes justified-gallery-show-caption-animation {
from{opacity:0}
to{opacity:.7}
}
@-o-keyframes justified-gallery-show-caption-animation {
from{opacity:0}
to{opacity:.7}
}
@keyframes justified-gallery-show-caption-animation {
from{opacity:0}
to{opacity:.7}
}
@-webkit-keyframes justified-gallery-show-entry-animation {
from{opacity:0}
to{opacity:1}
}
@-moz-keyframes justified-gallery-show-entry-animation {
from{opacity:0}
to{opacity:1}
}
@-o-keyframes justified-gallery-show-entry-animation {
from{opacity:0}
to{opacity:1}
}
@keyframes justified-gallery-show-entry-animation {
from{opacity:0}
to{opacity:1}
}
.justified-gallery{width:100%;position:relative;overflow:hidden;margin-bottom:30px}
.justified-gallery>a,.justified-gallery>div{position:absolute;display:inline-block;overflow:hidden;opacity:0;filter:alpha(opacity=0)}
.justified-gallery>a>a>img,.justified-gallery>a>img,.justified-gallery>div>a>img,.justified-gallery>div>img{position:absolute;top:50%;left:50%;margin:0;padding:0;border:0}
.justified-gallery>a>.caption,.justified-gallery>div>.caption{display:none;position:absolute;bottom:0;padding:5px;background-color:#000;left:0;right:0;margin:0;color:#fff;font-size:12px;font-weight:300;font-family:sans-serif}
.justified-gallery>a>.caption.caption-visible,.justified-gallery>div>.caption.caption-visible{display:initial;opacity:.7;filter:"-webkit-animation:justified-gallery-show-caption-animation 500ms 0 ease;-moz-animation:justified-gallery-show-caption-animation 500ms 0 ease;-ms-animation:justified-gallery-show-caption-animation 500ms 0 ease}
.justified-gallery>.entry-visible{opacity:1;filter:alpha(opacity=100);-webkit-animation:justified-gallery-show-entry-animation 500ms 0 ease;-moz-animation:justified-gallery-show-entry-animation 500ms 0 ease;-ms-animation:justified-gallery-show-entry-animation 500ms 0 ease}
.justified-gallery>.spinner{position:absolute;bottom:0;margin-left:-24px;padding:10px 0;left:50%;opacity:initial;filter:initial;overflow:initial}
.justified-gallery>.spinner>span{display:inline-block;opacity:0;filter:alpha(opacity=0);width:8px;height:8px;margin:0 4px;background-color:#000;border-radius:6px}
]]></b:skin>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By wagner9
      Olá companheiros,
       
      Preciso de ajuda para conseguir implementar um Feed de Notícias de um site parceiro em meu site. O pessoal do site parceiro me enviou os arquivos .xml, mas não consegui descobrir como implementar eles no meu site.
       
      Se alguem puder me ajudar, fico grato.
    • By manigold
      Estou com um pequeno problema nessa parte:
      $monsters = simplexml_load_file($otdir . '/data/monster/monsters.xml') or die('<b>Could not load monsters!</b>'); foreach($monsters->monster as $monster) { $loot = simplexml_load_file($otdir . '/data/monster/' . $monster['file']); if($loot) { if($item = $loot->loot->item){ A pagina mostra a lista de items corretamente mas se eu tenho um item dentro de outro item ,como nesse exemplo:
      <loot> <item id="2148" countmax="100" chance="33750" /> <item id="2148" countmax="100" chance="33750" /> <item id="2672" countmax="5" chance="80000" /> <item id="7399" chance="80" /> <item id="2392" chance="1428" /> <item id="2033" chance="3190" /> <item id="2547" countmax="7" chance="6700" /> <item id="5948" chance="3040" /> <item id="1987" chance="100000"> <!-- bag --> O PROBLEMA É NESSA PARTE <item id="5882" chance="5920" /> <item id="2498" chance="888" /> <item id="7378" countmax="3" chance="8800" /> <item id="2146" chance="5300" /> <item id="2414" chance="1500"/> <item id="2528" chance="2333" /> <item id="7402" chance="2000" /> <item id="2492" chance="730" /> </item> </loot> Os items dentro do item com id 1987 não são mostrados .
      Me desculpem se a explicação não esta muito boa , não entendo nada de php e xml ,eu agradeço se alguem puder me ajudar.
    • By ViniciusRamoa
      Olá, estou criando um projeto no laravel e estou com um problema na parte de css, criei um slide "arrastavel" para ser exibida algumas imagens, mas a borda entre uma imagem e outra está grande demais
       
      Imagem de como está:
       
       
       
      Imagem de como deveria ser o tamanho do espaço entre as imagens:

       
      Código pag.blade.php:
      @section('hotmanga') @if (count($hotMangaList)>0) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale-1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="swiper.min.css"> <link rel="stylesheet" type="text/css" href="swiper.min.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> @foreach ($hotMangaList as $manga) <div class="swiper-slide"> <li> <div class="imgBx" style="position: relative; z-index: 10; background: rgb(255, 255, 255) none repeat scroll 0% 0%;"> <img src='{{HelperController::coverUrl("$manga->manga_slug/cover/cover_250x350.jpg")}}' alt='{{ $manga->manga_name }}' /> <div class="well"> <p> <i class="fa fa-book"></i> {{ "#".$manga->chapter_number." ".$manga->chapter_name }} </p> </div> </div> </li> </div> @endforeach </div> </div> <!-- divisão --> <script type="text/javascript" src="swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 7, stretch: 0, depth: 100, modifier: 1, slideShadows : true, }, pagination: { el: '.swiper-pagination', }, }); </script> </body> </html> @endif @stop  
      Código CSS do slide:
      .swiper-container { width: 250px; height: 350px; padding-top: 20px; padding-bottom: 50px; position: left; } .swiper-slide { background-position: center; background-size: cover; width: 250px; height: 350px; background: #2e7ab9; } .swiper-slide .imgBx { width: 250px; height: 350px; overflow: hidden; } .swiper-slide .imgBx img { width: 250px; height: 350px; } .swiper-slide .details { box-sizing: border-box; }  
      Código "limpo" onde o slide funciona normalmente:
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale-1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="swiper.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="imgBx"> <img src="https://img.freepik.com/vetores-gratis/imagens-animadas-abstratas-neon-lines_23-2148344065.jpg?size=626&ext=jpg"> </div> </div> <div class="swiper-slide"> <div class="imgBx"> <img src="https://img.freepik.com/vetores-gratis/imagens-animadas-abstratas-neon-lines_23-2148344065.jpg?size=626&ext=jpg"> </div> </div> </div> <!-- divisão --> </div> <div class="swiper-pagination"></div> </div> <script type="text/javascript" src="swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 7, stretch: 0, depth: 100, modifier: 1, slideShadows: true, }, pagination: { el: '.swiper-pagination', }, }); </script> </body> </html>  
       
      Obrigado pelo seu tempo e ajuda
    • By neoandrevictor
      Bom dia,
       
      Como faço para gerar um arquivo .doc (Microsoft Word) através de javascript com margens customizadas? Sei que para gerar o css corretamente tenho que gerar inline mas não consigo definir a margem de jeito algum.
       
      Poderiam me ajudar por gentileza?
    • By Jefferson andre
      Saudações mestres,
       
      Qual o comando utilizado para criar um arquivo em alguma pasta que eu selecionar onde eu possa ir escrevendo dentro as linhas do XML?
       
      Não quero algo pronto, preciso escrever linha a linha de acordo com o manual da Sefaz.
       
      Grato
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.