How To achieve this 'Call To Action' Image

[vij]

Hey guys

I am sure you guys will nail this question -

How can I get the "image" thingy(call to action block) just above the forum categories as seen in http://www.entropiaplanets.com/forums/forum/


Appreciate your help.

 

[Jake Bunce]

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 />

View attachment 59447

Try a div?

<font size="5">Welcome to Sphynxlair!</font><br />
        <font size="3">Connect with sphynx owners & enthusiasts around the world!</font><br /><br />
            <div style="text-align: left; width: 400px; margin: auto;"><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.</div>
<br />

 

[tommydamic68]

So there is no easy way to align these three sentences within the code I already have?

<style type="text/css">
.noticeButtonContainer
{width: 190px;
padding: 10px;}
.csgoIntro
{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: 14px !important;
text-align: center!important;}
.csgoIntro a
{color: #ffffff !important;
font-weight: bold;}
.csgoIntro h1
{color: #ffffff !important;
font-size: 20px;
font-weight: bold;}

.csgoMember
{font-size: 12px;
font-weight: bold;}
.csgoMember
{color: #ffffff !important;}
</style>

<center>
<img src="http://www.sphynxlair.com/community/styles/sphynxlair/xenforo/forumfade8.png" style="display:block; width:840px;"  title="" />
</center>

<div class="csgoIntro" style="position:absolute; top:0; left:0; height:300px; width:850px;">
    <div style="padding-left: 25px; padding-right: 25px; padding-top:10px;">
      <font size="5">Welcome to Sphynxlair!</font><br />
        <font size="3">Connect with sphynx owners & enthusiasts around the world!</font><br /><br />
        <p align="center"><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 />
        <center><div class="noticeButtonContainer">
            <label for="LoginControl" id="SignupButton"><a href="http://www.sphynxlair.com/login" class="inner"><b>Join Now!</b></a></label>
        </div></center>
        <div class="csgoMember">Already a member? <a href="http://www.sphynxlair.com/login/">Login Now!</a></div>
    </div>
</div>

 

[tommydamic68]

@Jake Bunce - awesome! Can we get community up on the second line?

 

[Jake Bunce]

@Jake Bunce - awesome! Can we get community up on the second line?

View attachment 59453

Increase the width: 400px; until you get the desired result.

 

[tommydamic68]

Worked thanks!

 

[tommydamic68]

Can I make this not show on mobile easily?

 

[tommydamic68]

How can I use my standard site button - join now - or the sign up now button.

 

[tommydamic68]

Increase the width: 400px; until you get the desired result.

Can this be made to "not show" on mobile?

 

[tommydamic68]

Shouldn't the code for each seperate notice maintain its own code? For example- I have the background opacity set to 0.6 on one notice and 0 on the other but the 0.6 opacity setting remains on both notices when running them together.

 

[AndreaMarucci]

Does this work also on XF 1.2.2? I ask just because the thread is a little bit old...

 

[Jeremy]

Yes.