How To achieve this 'Call To Action' Image

Jake Bunce

XenForo moderator
Staff member
I recreated his notice by looking at his source code. Here are instructions:

Admin CP -> Home -> List Notices -> Create New Notice

Use this for the Message:

Rich (BB code):
<style type="text/css">
{width: 190px;
padding: 10px;}
{background: url(rgba.php?r=0&g=0&b=0&a=153); background: rgba(0,0,0, 0.6); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
color: #ffffff !important;
font-size: 12px !important;
text-align: center!important;}
.csgoIntro a
{color: #ffffff !important;
font-weight: bold;}
.csgoIntro h4
{color: #ffffff !important;
font-size: 12px;
font-weight: bold;}
{font-size: 9px;
font-weight: bold;}
.csgoMember a
{color: #ffffff !important;}

<img src="" style="display:block; width:840px;"  title="" />

<div class="csgoIntro" style="position:absolute; top:0; left:0; height:262px; width:350px;">
    <div style="padding-left: 25px; padding-right: 25px; padding-top:10px;">
        <h4>Welcome to EntropiaPlanets!</h4>
            <p>You appear to be browsing as a guest user. Did you know that if you sign up with an account, you get access to all kinds of additional priviledges, and are then able to join the discussions? You will also no longer see most advertisements on the forum, and be able to tap into the full suite of tools and information that EntropiaPlanets has to offer.</p>
<br />
        <center><div class="noticeButtonContainer">
            <label for="LoginControl" id="SignupButton"><a href="" class="inner"><b>Sign Up Now!</b></a></label>
        <div class="csgoMember">Already a member? <a href="">Login Now!</a></div>
This contains his HTML and CSS which you can modify to change the styling if you wish. I have highlighted the background image and width in red. You need to specify a URL for your own background image, and you might need to adjust the width to fit. I also highlighted two login URLs which you will want to change.

He also has the following options set for his notice:

Screen shot 2012-06-13 at 10.59.59 PM.png

It is worth noting that his forum width is 1150px which complements the width of his notice. That is another width you may wish to adjust:

Admin CP -> Appearance -> Style Properties -> General -> Page Width Controller

Screen shot 2012-06-13 at 10.55.10 PM.png

The end result looks like his notice:

Screen shot 2012-06-13 at 11.03.02 PM.png


Active member
This is great, just finished updating my notices(y)

Smaller notices when logged in...


Larger when not logged in...


Very cool that if you use a very wide image it reveals more as the page is expanded in dynamic/fluid styles:D
Last edited:

Steve F

Well-known member
Only way would maybe adding a class to your image in the notice and use CSS in media queries.


Well-known member
Also, I need to "center" the Message, Share and Search text. I must use the <p align="left"> to make the 3 align up properly, how do I center the text?
<font size="5">Welcome to Sphynxlair!</font><br />
        <font size="3">Connect with sphynx owners & enthusiasts around the world!</font><br /><br />
            <p align="left"><font size="4">Message</font> - Chat and message with other sphynx owners.<br /><font size="4">Share</font> - Share information, photos and video with the community.<br /><font size="4">Search</font> - Search for FREE information about the sphynx cat.</p>
<br />
Screen Shot 2013-10-20 at 9.43.53 AM.png