Today we are going to discuss how to make the close button on your Xenforo forums look clearer on retina displays. So what do I mean by that? A retina display is used on Apple products. It is a term that is used to discribe a screen that can show 300 or more pixels per inch (ppi). Generally with most images they don’t do this. So we are going to enable it so that with Xenforo you can allow this and it will make all of your X’s for the close buttons to look great!

So what do we need to do? We are going to insert a code into Extra.css to make this look a lot better. Yes it’s that simple!

So go ahead and log into your Admin Cp and navigate your way to Appearance.  From there click Templates and you will see this screen:

In the top left corner search for Extra.css and you will see this pop up:

Click on it and this page appears:

So what do we need to do now? Well now we are going to add the following code to the end of our Extra.css:

.xenOverlay a.close
{
    display: inline-block;
    top: 8px;
    right: 8px;
    width: 23px;
    height: 23px;
    background: #2e5660;
    border: 2px solid #fff;
    border-radius: 50%;
    text-align:center;
    }

.xenOverlay a.close:before
{
    content: '×';
    color: #fff;
    font: 32px/24px Arial;
}

Make sure that you save it after you do this!

This is what it looks like 300% zoomed in:

So there you have it! All done!

If you have questions and comments please feel free to ask away!

Looking for quality XenForo hosting? Check out Arvixe Web Solutions