• 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]

Steve F

Well-known member
#1
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:

Bolaji

New member
#4
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

Well-known member
#5
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
@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
 

Steve F

Well-known member
#11
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.
 

Pro

Active member
#13
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.
 

Steve F

Well-known member
#18
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...