HTML HELP on Notices

[wickedstangs]

Can I get some help on html... Trying to fix the below image.. Want the image to the right and text a bit smaller to fit right...

<img src="/community/styles/notice-background.png" style="display:block; width:400px" title="Fox Body Mustangs" />
<div class="csgoIntro" style="position:absolute; top:0; left:0; height:100%; width:230px;">
    <div style="padding: 05px;">
        <h3>Welcome to Fox Body Mustangs!</h3></br>
            <p>This forum is intended to be used by enthusiasts of the Fox body Ford Mustangs (1979-1993).  Come on in and join our discussions about Fox Body Mustangs! Take a moment to <a href="http://foxbodymustangs.org/community/register/">Register</a> to gain extra privileges and access to other areas of the site normal guest do not have..</p>       
 
<div class="noticeButtonContainer">
            <label for="LoginControl" id="SignupButton"><a href="http://www.foxbodymustangs.org/community/login/" class="inner"><b>Sign Up Now!</b></a></label>
        </div>
        <div class="csgoMember">Already a member? <a href="http://www.foxbodymustangs.org/community/login">Login Now!</a></div>
    </div>
</div>

 

[MagnusB]

Add float: right; to the style bit on the img tag.

 

[Jake Bunce]

Here are instructions for a nicely styled notice with a background image:

http://xenforo.com/community/resources/sign-up-welcome-notice.384/

 

[lazy llama]

Here are instructions for a nicely styled notice with a background image:

http://xenforo.com/community/resources/sign-up-welcome-notice.384/

No permission to access that.
(yes, I'm a registered license holder with access to downloads)

 

[wickedstangs]

Here are instructions for a nicely styled notice with a background image:

http://xenforo.com/community/resources/sign-up-welcome-notice.384/

 

[EQnoble]

So you want it to look like this?

 

[Jake Bunce]

If you can't access that resource then I posted similar instructions here:

http://xenforo.com/community/threads/how-to-achieve-this-call-to-action-image.32678/#post-373581

 

[wickedstangs]

So you want it to look like this?

View attachment 39595

Yes, like that.. I am getting closer.. But, can't get it..

 

[MagnusB]

That is a size constraint. You need to either reduce the width of the image or the width of the text. If you can, you can increase the notice width by increasing the width of the pageWidth (can be done via style properties), but that increases the width of your style.

 

[Saeed]

Here are instructions for a nicely styled notice with a background image:

http://xenforo.com/community/resources/sign-up-welcome-notice.384/

Actually, I can't access that either, Jake.

Has it been moved to a private forum?

 

[RobParker]

Me neither

 

[MagnusB]

That resource is deleted.

 

[Jake Bunce]

If you can't access that resource then I posted similar instructions here:

http://xenforo.com/community/threads/how-to-achieve-this-call-to-action-image.32678/#post-373581

 

[EQnoble]

Yes, like that.. I am getting closer.. But, can't get it..
View attachment 39729

Try pasting this entire code snippet into your extra css for the style you are editing

.baseHtml.noticeContent > img {
    bottom: 5px;
    left: 17px;
    position: relative;
}
 
.csgoIntro {
    font-size: 15px;
}
 
.csgoIntro div h5 {
    bottom: 14px;
    font-size: 18px;
    position: relative;
    right: 9px;
}

 

[wickedstangs]

Try pasting this entire code snippet into your extra css for the style you are editing

.baseHtml.noticeContent > img {
    bottom: 5px;
    left: 17px;
    position: relative;
}
 
.csgoIntro {
    font-size: 15px;
}
 
.csgoIntro div h5 {
    bottom: 14px;
    font-size: 18px;
    position: relative;
    right: 9px;
}

Awesome that worked.. Thank you..

 

[EQnoble]

add this as well to your EXTRA.css

.PanelScroller .PanelContainer {
    background-color: #EEEEEE;
}