Announcement

Collapse
No announcement yet.

Sticky Default Guest Notice

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

    Official - Free 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.

    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!
    glennrocksvb
    Founder/Coder
    Last edited by glennrocksvb; 06-12-2022, 10:39 PM. Reason: Added code for Notice Header Title
    Helpful? Donate. Thanks!
    Fast VPS Host for vBulletin: A2 Hosting & IONOS

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

    https://vbmods.rocks/forum/vbulletin...-css-animation
    Helpful? Donate. Thanks!
    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


        #5
        Glad you figured it out.
        Helpful? Donate. Thanks!
        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.

          https://forums.24x7servermanagement.com

          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!
            Fast VPS Host for vBulletin: A2 Hosting & IONOS

            Comment


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

              Comment


              • glennrocksvb
                glennrocksvb
                Founder/Coder
                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
                Member
                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!
                Fast VPS Host for vBulletin: A2 Hosting & IONOS

                Comment


                #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:	150
Size:	47.1 KB
ID:	9197
                Helpful? Donate. Thanks!
                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!
                    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

                        Latest Topics

                        Collapse

                        Working...
                        X