Close X increase image quality for retina displays

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%;

.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

Tags: , , , , , , , , , | Posted under XenForo | RSS 2.0

Author Spotlight

Keith Pottratz

Hello My Name is Keith Pottratz. I have been working with computers for over a decade. It's my personal hobby something that I love and enjoy doing. I went to school for Computer Science, and have spent many years self teaching my self various things. I have ton's of experience in HTML,CSS, PHPBB,CPanel,CMS software, blogging software and various other systems and enviroments. My favorite thing to do though is backend developing. I find it to be a growing and ever evolving beast and I love learning about it. I look forward to giving as much knowledge as I can and help.

Leave a Reply

Your email address will not be published. Required fields are marked *