Sign Up / Welcome Notice [Deleted]

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.webp

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

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

user-criteria.webp


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

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:
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. :)
 
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.webp
 
@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.webp
 
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.
 
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.webp

With browser window resized.

notice-example-resized.webp

The height of your image is important on how well it turns out in comparison to your other notices if you have any.
 
Alright! Thanks so much! :)

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

Fz9dk.png
 
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.
 
Qwk86gn submitted a new resource:

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

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.

DEMO

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

Under the...

Read more about this resource...
 
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
 

Attachments

  • screenshot.webp
    screenshot.webp
    1.2 KB · Views: 129
Top Bottom