XF 1.3 How to add image on notices?

Hello,

Can anyone out their help me on this? I want to add image on my notices like what @digitalpoint did.

Here's the screenshot..

Thank you very much in advance..

View attachment 69557
I have recently added advertisement ads on my notice system which gives you this. It can also be clicked to bring you to a specified URL.

Screen Shot 2014-05-01 at 8.46.58 PM.webp

In the notice section in the ACP - add this code:

Code:
<div class="box1">
        <a id="box-link" href="http://www.URL.com/"></a>
        </div>


In your EXTRA.css - add this code, adjust to your liking.

Code:
/* Advertising Notice */

.box1

{
    position: relative;
    padding: width: 830px;
    height: 100px;
    background-image: url(YOURIMAGE.png);
    background-repeat: no-repeat;
}

#box-link
{
    position: absolute;
    width: 830px;
    height: 100px;
    background-color: transparent;
}
 
I have recently added advertisement ads on my notice system which gives you this. It can also be clicked to bring you to a specified URL.

View attachment 72939

In the notice section in the ACP - add this code:

Code:
<div class="box1">
        <a id="box-link" href="http://www.URL.com/"></a>
        </div>


In your EXTRA.css - add this code, adjust to your liking.

Rich (BB code):
/* Advertising Notice */

.box1

{
    position: relative;
    padding: width: 830px;
    height: 100px;
    background-image: url(YOURIMAGE.png);
    background-repeat: no-repeat;
}

#box-link
{
    position: absolute;
    width: 830px;
    height: 100px;
    background-color: transparent;
}

You have some errors in your CSS, also avoid using "width" when possible on responsive designs and go with max-width instead.
 
You have some errors in your CSS, also avoid using "width" when possible on responsive designs and go with max-width instead.

What is the error? Please share.

Also, not sure if it matters, on my site I do not have my notices show on responsive. I changed the width though, not sure if its correct. Mad no difference in how it displayed.

Code:
/* Advertising Notice */

.box1

{
    position: relative;
    @media (max-width: 830px)
    height: 100px;
    background-image: url(trophy/wait13.png);
    background-repeat: no-repeat;
}

#box-link
{
       
    position: absolute;
    @media (max-width: 830px) 
    height: 100px;
    background-color: transparent;
}

.box2

{
    position: relative;
    @media (max-width: 830px) 
    height: 100px;
    background-image: url(trophy/wait4.png);
    background-repeat: no-repeat;
}

#box-link
{
       
    position: absolute;
    @media (max-width: 830px)
    height: 100px;
    background-color: transparent;
}
 
Top Bottom