Announcement

Collapse
No announcement yet.

Sticky Default Guest Notice

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Free Mod Sticky Default Guest Notice

    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.

    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);
    }
    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.
    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;
    }
    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!
    Last edited by glennrocksvb; 05-30-2023, 04:48 PM. Reason: Added another way to get the notice id
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    To add the pulsating Register Now button, follow this topic:

    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      Is there a way to add a click to close the notification? And I notice that on the actual registration page the notification does not show here on your board, because as is with the above code it actually hides the register button once the registration fields are completed.

      Just for FYI I moved the registration button to the left side:

      .b-button-group .b-button:last-child {
      float:left;
      margin-top: 10px;
      }

      Isn't there a way to use the page id number to exclude the notification on the reg page?

      Comment


        #4
        Figured it out. On top of adding the above OP's code add:

        .page3 .notice[data-notice-id='1'] {
        display:none !important;
        }

        Comment


        • chicoynano
          chicoynano commented
          Editing a comment
          Thank you very much William

        • jackforum
          jackforum commented
          Editing a comment
          Thank you William

        #5
        Glad you figured it out.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #6
          Hello Glenn,

          I have put the above code but cannot see the Default Guest Notice.

          cPanel Forum technical discussions on installations configurations and other services.

          Comment


            #7
            Originally posted by Neha Pariyar View Post
            I have put the above code but cannot see the Default Guest Notice.
            Why did you put Javascript code in CSS??

            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #8
              Thank you Glenn for helping me to point out my mistake.

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                You're welcome. I checked your css_additional again and there are 2 @media with the missing @ sign.

              #9
              Hello Glenn,

              Please help after putting the above 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); } Still I cannot see the guest notice.

              Comment


                #10
                Originally posted by glennrocksvb View Post
                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.
                Neha Pariyar did you follow the above instruction? You have to change the data-notice-id value in the CSS code with the notice id specific to your site. Notice IDs are different per site.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                • Neha Pariyar
                  Neha Pariyar commented
                  Editing a comment
                  Thank you Glenn.

                #11
                I recently changed the default guest notice on this site to the one below. I added the "Hey Guest!" notice title with background.

                Click image for larger version

Name:	image.png
Views:	235
Size:	47.1 KB
ID:	9197
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #12
                  Is this the same module as the welcome screen for users not logged in?

                  Comment


                    #13
                    Yes. I just added a little bit of CSS to add the Hey Guest title.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #14
                      What if you want the welcome notice to remain in the default position, but want to jazzy it up with glennrocks hip hop title?

                      I need the css for that only. I could decipher it from the OP.

                      Comment


                        #15
                        thank you glenn

                        Comment

                        Users Viewing This Page

                        Collapse

                        There is 1 user viewing this forum topic.

                        • Guest Guest

                        Latest Posts

                        Collapse

                        Working...
                        X
                        Searching...Please wait.
                        An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                        Please push the back button and reload the previous window.'
                        An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                        Please push the back button and reload the previous window.'
                        An internal error has occurred and the module cannot be displayed.
                        There are no results that meet this criteria.
                        Search Result for "|||"