HowTo XF2.1.X Responsive, Fixed, sticky, floating banner area on the right and left (1 Betrachter)

[Cavemen]

Setup; Break and find the template named PAGE_CONTAINER in your theme <div class = "p-body">
Add on it immediately;
​

HTML:

    <!--[XGT]- Sabit banner alanı-->
    <div class="xgtSolSabitBanner">
        <a href="url">
            <img src="https://img.webme.com/pic/i/isacotur/160x600banner_rozet.jpg" alt="Banner alanı" width="" height="">
        </a>
    </div>

    <div class="xgtSagSabitBanner">
        <a href="url">
            <img src="https://img.webme.com/pic/i/isacotur/160x600banner_rozet.jpg" alt="Banner alanı" width="" height="">
        </a>
    </div>
    <!--[XGT]- Sabit banner alanı-->

Open the template named extra.less in the same theme and add it to the top;

CSS:

xgtSolSabitBanner
{
    position: fixed;
    z-index: 999;
    left: 0;
    top: 150px;//-- Banner ust boslugu opsiyonel olarak kullanılabilir.
    margin-left: 20px; //-- Banner sag yan boslugu opsiyonel olarak kullanılabilir.        
}

.xgtSagSabitBanner
{
    position: fixed;
    z-index: 999;
    right: 0;
    top: 150px; //--Banner ust boslugu opsiyonel olarak kullanılabilir.
    margin-right: 20px; //-- Banner sag yan boslugu opsiyonel olarak kullanılabilir.
}

//-- 1500PX Altı ekranlarda banner max genişliği 100PX olsun!

@media (max-width: 1500px)
{
    .xgtSolSabitBanner
    {
        max-width: 100px;
        margin-left: 0px;
    }
    .xgtSagSabitBanner
    {
        max-width: 100px;
        margin-right: 0px;
    }
}

//-- 1300PX Altı ekranlarda banner gizle!
@media (max-width: 1300px)
{
    .xgtSolSabitBanner, .xgtSagSabitBanner
    {
        display: none;
    }
}