MyBB Community Forums

Full Version: Can we add floating png on index page ?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hey guys,

I am using Duende V3 theme and want to know if its possible to add the floating png with href link on index or on full forum pages ?

Regards.
cope and paste this on the bottom of header template
<div id="floating-image">
    <a href="https://example.com" target="_blank">
        <img src="https://yourwebsite.com/path-to-image.png" alt="Floating Image">
    </a>
</div>
and add this css on global.css
#floating-image {
    position: fixed;
    bottom: 20px;  /* Adjust this value to control the vertical position */
    right: 20px;   /* Adjust this value to control the horizontal position */
    z-index: 9999; /* Ensure the image stays on top of other elements */
}

#floating-image img {
    max-width: 100px; /* Adjust the size of your image here */
    max-height: 100px;
}

#floating-image:hover img {
    opacity: 0.8; /* Add hover effect if you like */
}
(2024-10-17, 04:56 PM)Xferno Wrote: [ -> ]cope and paste this on the bottom of header template
<div id="floating-image">
    <a href="https://example.com" target="_blank">
        <img src="https://yourwebsite.com/path-to-image.png" alt="Floating Image">
    </a>
</div>
and add this css on global.css
#floating-image {
    position: fixed;
    bottom: 20px;  /* Adjust this value to control the vertical position */
    right: 20px;   /* Adjust this value to control the horizontal position */
    z-index: 9999; /* Ensure the image stays on top of other elements */
}

#floating-image img {
    max-width: 100px; /* Adjust the size of your image here */
    max-height: 100px;
}

#floating-image:hover img {
    opacity: 0.8; /* Add hover effect if you like */
}

Is it possible to change the direction of the floating image into left or right ?
Simply add set an animation to the image or set the image inside of marquee element .
#floating-image {
    position: fixed;
    bottom: 20px;  /* Adjust this value to control the vertical position */
    right: 20px;  /* Adjust this value to control the horizontal position */
    z-index: 9999; /* Ensure the image stays on top of other elements */
}


edit the right eliment