Floating Banner Bottom Left

Support
#1

How can I best achieve a floating box like the attached example in the bottom left corner of www.speedtest.net using my Theme-X

Thanks,

Dan

#2

Hi There,

Thanks for asking!
You can make the similar floating box using content doc addon, which is coming with the theme.

To do exact look as the screenshot you have to use custom CSS code.

Hope this helps!

#3

I have used the content dock.

How can I make the dock float away from the bottom edge of the browser slightly?

I would also like to make it appear instantly rather than after a percentage of page scrolling, how do I do this?

Thanks,

Daniel

#4

Hi Daniel,

Those are the default behavior of the content dock feature. If you want to change those, you will have to add some custom CSS. Pleased try this:

.tco-content-dock {
    left: 5px !important;
    bottom: 5px !important;
    padding: 10px;
    transition: none;
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

#5

Great, this worked.

However it broke the inbuilt ‘X’ to Close in the top right corner so the box cannot be hidden by the user.

Any ideas?

Thanks

#6

Hello @xdanlad,

Thanks for updating the thread. :slight_smile:

Well the code shouldn’t have any sort of impact on the close button. I added the code shared by @Jade on my dev setup and it’s working perfectly fine. Please see screenshot.

I also checked your website and close button is showing up fine. Here see screenshot.

Please clear browser cache and then open website again.

Let us know how it goes.

Thanks.

#7

Thanks for the reply.

Yes it is “showing up fine” but if you click it, the box does not not disappear. (unless I remove the custom CSS that is)

Daniel

#8

Hi Daniel,

Please try adding this code:

.x-content-dock-off {
    opacity: 0;
}

Hope this helps.

#9

Hi Jade,

This fixed the ‘X’ button which now closes the Content Dock.

This bit of CSS has stopped the ‘transition: none;’ CSS working and you not have to scroll down again for it to appear.

Thanks,

Daniel

#10

You’re welcome. Glad we could help.

#11

Sorry I think there was a slight misunderstanding there.

The ‘X’ now works but the Content Dock no longer appears instantly it waits for a scroll percentage (the original CSS fixed this but with the ‘.x-content-dock-off’ addition this is no longer the case.

Daniel

#12

Hello @xdanlad,

Thanks for asking. :slight_smile:

Can you please clear browser cache as it seems to be working fine on my end? Let us know how it goes.

Thanks.

#13

No it doesn’t work, you still have to scroll down for the box to appear.

Thanks

#14

Hi Daniel,

Please add this code in the Global JS:

jQuery('.x-content-dock').removeClass('x-content-dock-off');

Hope this helps.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.