- Uyumlu XF 2 Sürümleri
Herhangi bir şablonda çalıştırmak için örnek HTML kod;
<!--[XGT]:Banner kutusu-->
<div class="xgt-Banner-Kutusu">
<ul class="xgt-konteyner">
<li class="xgt-icerik">
<a href="#" target="_blank">
<img src="https://lh3.googleusercontent.com/uZUV1mqOTUMMJMU7RhPaMl3nizRy-jIyqs2p3YFeyQuZM50QDnqRosHIeZejl5fiDIg1S5FwtvR7rhbQEFqQNxPsuvxGhiAZWyRbPDY" alt="img acıklama" border="0">
</a>
</li>
<li class="xgt-icerik">
<a href="#" target="_blank">
<img src="https://www.google.com/logos/doodles/2016/adile-nasits-86th-birthday-6254011919368192-hp2x.jpg" alt="img acıklama" border="0">
</a>
</li>
<li class="xgt-icerik">
<a href="#" target="_blank">
<img src="https://www.google.com/logos/doodles/2016/adile-nasits-86th-birthday-6254011919368192-hp2x.jpg" alt="img acıklama" border="0">
</a>
</li>
<li class="xgt-icerik">
<a href="#" target="_blank">
<img src="https://lh3.googleusercontent.com/uZUV1mqOTUMMJMU7RhPaMl3nizRy-jIyqs2p3YFeyQuZM50QDnqRosHIeZejl5fiDIg1S5FwtvR7rhbQEFqQNxPsuvxGhiAZWyRbPDY" alt="img acıklama" border="0">
</a>
</li>
</ul>
</div>
CSS kodları extra.less isimli şablona eklenecek.
// XGT Banner kutusu CSS]
.xgt-Banner-Kutusu
{
.xgt-konteyner
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
.xgt-icerik
{
width: 50%;
padding: 5px;
@media (max-width: (@xf-responsiveMedium))
{
width: 100%;
}
img
{
width: 100%;
max-height: 100px;
}
}
}
}