Making the default guest notice to stick at the bottom of the page as you scroll helps it to become more noticeable. This may encourage guests more to sign up or log in to your forum.
To do this, simply add the below custom CSS in css_additional template in AdminCP or in Sitebuilder > Style > CSS Editor.
Change the data-notice-id value and other values accordingly. Right click on the notice and inspect it and look for data-notice-id attribute to find the notice id to use. You can also find the notice id in AdminCP > Notices > Notice Manager. Find "default_guest_message" link. Mouseover it and observe the URL at the browser status bar at the bottom and find "noticeid=X" where X is the id. Or right-click and open it in new tab and observe the URL in the browser address bar and find the same "noticeid=X".
Notice Header Title: (Optional)
To add a title to the notice, add the following CSS. You can change the content text, background color and other styles as needed.
I only do this on desktop because if you do it on mobile, the notice may cover the entire page.
Demo:
See the notice on this site as a guest.
Enjoy!
To do this, simply add the below custom CSS in css_additional template in AdminCP or in Sitebuilder > Style > CSS Editor.
Code:
.l-desktop .notice[data-notice-id='1'] { position: fixed; z-index: 2; bottom: 0; right: 0; margin: 10px; width: 400px; box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.7); }
Notice Header Title: (Optional)
To add a title to the notice, add the following CSS. You can change the content text, background color and other styles as needed.
Code:
.l-desktop #notices .notice[data-notice-id='1']::before { content: 'Hey Guest!'; background: #191970; display: block; margin: -10px -10px 8px; padding: 7px; color: #fff; font-weight: bold; position: static; width: auto; height: auto; }
Demo:
See the notice on this site as a guest.
Enjoy!
Comment