Sidebar

[Feeder 0]

Witam

Mam pytanie chodzi mi o plugin albo jak jest inna możliwość zrobienia tego, mianowicie w panelu bocznym aby rotacyjne pojawiały się grafiki partnerów... coś w stylu slidera.

[Innocent 45]

Nie widziałem, ale możesz to ręcznie zrobić.

Np.

Pobierasz: https://invisionpower.com/files/file/7337-txt-php-widget/

Wklepujesz tam kod:

<nowosc>
                     <div id="rotator">
                       <li>
                      <img class="obrazek_tytulowy" src="/uploads/banery/steam.png" app="core" location="global"}">
                      <h1 class="tytul"><a href="" target="_blank" title="Przejdź do grupy Steam" >Zapraszamy do grupy Steam</a> <div class="right"><a href="#" data-ipshover="" data-ipshover-target="" title="Przejdź do profilu " id="ips_uid_6328_2"><img class="avatar_autora" src="#"></a><a href="#" target="_blank"><span style="color:#ee3434;font-weight:bold;font-size:13px;"> Grupa Steam</span></a></div></h1>
                        <span class="tekst">Zachęcamy dołączyć do naszej grupy na Steam! To miedzy innymi Wy tworzycie z nami rodzinę.</span>
                      </li>
                      </div>
                     </nowosc>
<script type="text/javascript">
  $(document).ready(function(){
  $('#rotator').bxSlider({
  auto:true,
  adaptiveHeight: true,
  autoStart:true,
  autoHover: true
  });
  });
</script>

Do custom.css dodajesz:

nowosc {
    background-color: rgba(0, 0, 0, 0.6);
    float: right;
    width: 480px;
    padding: 10px;
    margin-top: -80px;
    border-radius: 4px;
}
nowosc .obrazek_tytulowy {
    float: left;
    height: 90px;
    width: 90px;
    margin-right: 15px;
}
nowosc h1.tytul {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    float: left;
    height: 36px;
    width: 350px;
    border-bottom: 1px solid rgba(127,127,127,0.2);
    margin-top: 5px;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
nowosc h1.tytul a {
    color: #fff;
    transition: all 0.2s ease 0s;
}
.right {
    float: right;
}
.avatar_autora {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 2px;
}
nowosc .tekst {
    color: #e5e9f0;
    font-size: 13px;
    width: 314px;
}
.bx-wrapper .bx-pager {
    text-align: right;
    text-indent: -9999px;
    color: #666;
    padding-top: 20px;
    width: 460px;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #ca0c0f;
}
.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
}
.bx-wrapper .bx-prev {
    display: none;
}
.bx-wrapper .bx-next {
    display: none;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    background: #8a8686;
    text-indent: -9999px;
    font-size: 0px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

Następnie otwierasz styl, przechodzisz do globalTemplate, szukasz

 <link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>

I dodajesz pod: 

<script src="Scieżka do js'a który będzie w załączniku"></script>

jquery.bxslider.min.js

Screen:

Edytowano Luty 25, 2017 przez Innocent

[Feeder 0]

Dziekowac

[Spanner 4573]

Problem został rozwiązany.