1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 How to add image on notices?

Discussion in 'Styling and Customization Questions' started by Jericho M, Mar 14, 2014.

  1. Jericho M

    Jericho M Member

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

    Screenshot - 3_14_2014 , 11_12_42 PM.png
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    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/
     
    Jericho M likes this.
  3. tommydamic68

    tommydamic68 Well-Known Member

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

    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;
    }
    
     
  4. Steve F

    Steve F Well-Known Member

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

    tommydamic68 Well-Known Member

    What is the error? Please share.
     
  6. tommydamic68

    tommydamic68 Well-Known Member

    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;
    }
    
     
  7. Poindexter

    Poindexter Member

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

    Brogan XenForo Moderator Staff Member

    Poindexter likes this.
  9. Poindexter

    Poindexter Member

  10. creativeforge

    creativeforge Active Member

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

    Thanks!
     

Share This Page