1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Sign Up / Welcome Notice [Deleted]

Discussion in 'Tips and Guides' started by Steve F, Dec 31, 2011.

  1. Steve F

    Steve F Well-Known Member

    Here is some simple steps to creating a Welcome Notice, I use it on my site and have had a few members ask about it here.

    The idea originated from Kier's example in this post. I just added the "Sign Up Now" button and made some extra CSS rules for my needs.

    First off create a new notice by navigating to ACP -> List Notices -> Create New Notice

    Under the Notice Options tab is where we will add the HTML for the Notice and configure the options.

    HTML:
    Code:
    <img src="/styles/notice-background.png" style="display:block; width:672px;" title="EXAMPLE" />
     
    <div class="csgoIntro" style="position:absolute; top:0; left:0; height:100%; width:230px;">
        <div style="padding: 10px;">
            <h4>Welcome to YOUR SITE NAME!</h4>
                <p>Some random text describing your site. Then we add a register link <a href="http://YOUR-DOMAIN.com/login/">Register</a> and describe what registering at your site will get the guest.</p>
     
            <div class="noticeButtonContainer">
                <label for="LoginControl" id="SignupButton"><a href="http://YOUR-DOMAIN.com/login" class="inner"><b>Sign Up Now!</b></a></label>
            </div>
            <div class="csgoMember">Already a member? <a href="http://YOUR-DOMAIN.com/login/">Login Now!</a></div>
        </div>
    </div>
    --------------------------------------------------------------------------------------

    Options:
    Note: Add default notice text styling must be unchecked for everything to display correctly and to have control over the notice.

    notice-options.png

    --------------------------------------------------------------------------------------

    User Criteria:
    Under the User Criteria tab we will set which users will see the notice.

    user-criteria.png


    --------------------------------------------------------------------------------------

    CSS:
    Add to the EXTRA.css template
    Code:
    .noticeButtonContainer
    {
        width: 190px;
        padding: 10px;
    }
     
    .csgoIntro
    {
        background: rgba(0,0,0, 0.6);
        color: #ffffff;
        font-size: 13px;
        text-align: center;
    }
     
    .csgoIntro a
    {
        color: @secondaryMedium;
        font-weight: bold;
    }
     
    .csgoIntro h4
    {
        color: @secondaryMedium;
        font-size: 14px;
        font-weight: bold;
    }
     
    .csgoMember
    {
        font-size: 9px;
        font-weight: bold;
    }
     
    .csgoMember a
    {
        color: @secondaryLight;
    }

    Of course you can change the class names ect to something totally different if you wish as I did this for my own site.

    Enjoy
     
    Last edited by a moderator: Oct 2, 2016
  2. Shinjiru

    Shinjiru Member

    Nice, but i have a Question: How do you make this Counterstrike Picture in the Notice?

    CS-GO Nation 2011-12-31 11-18-02.png
     
    Mutt, Markos, ManuTdi and 1 other person like this.
  3. Steve F

    Steve F Well-Known Member

    The background is just a screenshot that I modified in Photoshop. The transparent black background behind the button and text is in the CSS posted above.
     
    Strong, Shinjiru and Veer like this.
  4. Bolaji

    Bolaji New Member

    Wow - THIS IS DOPE, MAN!

    Well done! Thanks a lot for sharing!

    Question: I'm having trouble with my site width.
    It's currently the default width - like the width here on xenforo.com/community

    But I'm having trouble controlling how the slider image in the notices box appears. The image isn't wide enough.
    http://screencast.com/t/WVXEWzsac

    How did you control / limit your site width? That might fix my issue.

    Thanks again for sharing this awesome code!

    Oh - one more question. How do you control the duration for each notice?
    When I had 2 notices up, they were flying by way too quickly to be read. :)
     
    Steve F likes this.
  5. Steve F

    Steve F Well-Known Member

    My style is a fixed width style (980px). The image you are using needs to be a little wider, you can try changing the width in the HTML I posted in the first post or set your style to a fixed width.

    Code:
    <img src="/styles/notice-background.png" style="display:block; width:672px;" title="EXAMPLE" />
    Change the 672px to 100%.

    or

    To make your style fixed width, go into the ACP -> Style Properties -> General -> Page Width Controller

    width.png
     
  6. Shinjiru

    Shinjiru Member

    @Qwk86gn

    Do you know the Image size for a fluid/liquid Style? I have taken your Image, but it doesnt fit with the Whisper Style, so maybe i need another Image Size? Screenshot_1.jpg
     
  7. Markos

    Markos Well-Known Member

    This is wonderful, thanks for sharing!
     
    Steve F likes this.
  8. Steve F

    Steve F Well-Known Member

    Not real sure what size it would need to be. I can let you know once I am back at my computer.
     
    Shinjiru likes this.
  9. Shinjiru

    Shinjiru Member

    Okay, cool.
     
  10. Jake Hakoda Shirley

    Jake Hakoda Shirley Active Member

    Are there any solutions to background images of fluid width forums? My images look great on my 16:10 monitor, but on Grandma's ol' Window ME machine it would look horrid.
     
  11. Steve F

    Steve F Well-Known Member

    You just need an image that fills the space. As the screen size or window size decreases the image does not break out of the notice. Remove any css for the notice template that controls the width or height.

    Example: image size = 1763px x 325px
    notice-example.png

    With browser window resized.

    notice-example-resized.png

    The height of your image is important on how well it turns out in comparison to your other notices if you have any.
     
    Mutt likes this.
  12. Jake Hakoda Shirley

    Jake Hakoda Shirley Active Member

    Alright! Thanks so much! :)

    Also, is there any help with this scroll bar when there is only one notice active?

    [​IMG]
     
  13. Pro

    Pro Active Member

    That is absolutely beautiful. Thank you so much!

    Just so you know, on your notices it says "Login In now!" it would be bettter as Login Now. Not trying to be rude or anything, just wanted to make sure you noticed it.
     
  14. Steve F

    Steve F Well-Known Member

    Lol Thanks totally missed that one. ;)
     
  15. Pro

    Pro Active Member

    No problem at all! Wanted to make sure and point it out in case you hadn't seen it :) Thanks for the thread.
     
    Steve F likes this.
  16. Ranger375

    Ranger375 Well-Known Member

    Probably an easy question for you, but I'm a html idiot :D How do I move the block to the right hand side in my second notice?
     
  17. Steve F

    Steve F Well-Known Member

    In the HTML for the notice change

    Code:
    left:0;
    To

    Code:
    right:0;
     
    Ranger375 likes this.
  18. Steve F

    Steve F Well-Known Member

    Qwk86gn submitted a new resource:

    Sign Up / Welcome Notice (version 1.0) - Displays a notice to guest

    Read more about this resource...
     
    3rd AnGle likes this.
  19. Edrondol

    Edrondol Well-Known Member

    I had some artists from my board throw together some banners to use. This is the type of stuff I got.

    banner.png

    I love my users.
     
    D.O.A. and Steve F like this.
  20. tekgirl

    tekgirl Active Member

    So I am getting the attached screenshot for unregistered guests. I am using Taiga chat, so am not sure if this is the issue.

    Thanks
     

    Attached Files:

Share This Page