XF 1.3 How to add image on notices?

[Jericho M]

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

 

[Paul B]

It's standard HTML and CSS and can be achieved in a number of ways; with a separate div, as a background image, etc.
View the page source and you can see how it's done.

This is also a useful site for learning: http://www.w3schools.com/

 

[tommydamic68]

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.



In the notice section in the ACP - add this 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.

/* 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;
}

 

[Steve F]

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:

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

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

 

[tommydamic68]

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.

 

[tommydamic68]

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.

/* 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;
}

 

[Poindexter]

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

Is there a simple way to do this? I'm not sure how to view the page source as suggested.

 

[Paul B]

XF 1.5 makes it easier to add images to notices.

XF 1.5 - Improvements to notices

 

[Poindexter]

XF 1.5 makes it easier to add images to notices.

XF 1.5 - Improvements to notices

Nice. Thanks for the heads-up.

 

[creativeforge]

XF 1.5 makes it easier to add images to notices.

XF 1.5 - Improvements to notices

Is there a way we can insert bigger size images in the notices?

Thanks!

 

[Poindexter]

Is there a way we can insert bigger size images in the notices?

Thanks!

I would like this option as well.

 

[gingyneil]

Where are the images stored on Xenforo?? So I can access them using html/css and set them as my notice background?