• You need 5 posts to download resources. You can only download 2 resources per day. To remove these limits consider upgrading.

XF Responsive, fixed, sticky, floating banner area on the right and left

one_finger_man

Verified
LV
0
 
Joined
Mar 23, 2023
Messages
28
Reaction score
16
Awards
3
Responsive, fixed, sticky, floating banner area on the right and left
It is often asked, but there are friends who cannot do it, so I have included mobile systems with a more detailed css code, I hope it will be useful for you.

160x600banner_rozet2.jpg

Setup; Go through and find the template named
in your theme . Just add it to it;PAGE_CONTAINER<div class="p-body">

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

Again, extra.lessopen the named template 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;
    }
}
 

Nick

Developer
Banned User
LV
0
 
Joined
Feb 7, 2023
Messages
491
Reaction score
128
Awards
14
Amazing tutorial. This will def help most members out!
 
Top