Hello all.
On a friends Forum i help admin there is a problem with the online icon it's staying inplace even when your offline

I Think there is a little bit of code missing in the /CSS files
This is the online icon code we have but there is No offline icon to it or a code to hide the icon when we are offline.

Code:

.post {
    background: url("http://2img.net/i/fa/prosilver/icon_user_online_en.png") no-repeat scroll right top rgba(0, 0, 0, 0.4) !important;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 8px;
    padding: 10px !important;
}

Hi APE,

Try using the .online class for posts which the user is online.

Code:

/* default / offline */
.post {
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 8px;
    padding: 10px !important;
}

/* online posts */
.post.online {
    background: url("http://2img.net/i/fa/prosilver/icon_user_online_en.png") no-repeat scroll right top rgba(0, 0, 0, 0.4) !important;
}

How can i add the offline icon to that aswell ?

APE wrote:How can i add the offline icon to that aswell ?

Simply change the class to .post

There is no .offline classname, you must use .post. That is the first rule before .post.online.

So :

Code:

/* default / offline */
.post {
    background: url("/offlineimg.gif") no-repeat scroll right top rgba(0, 0, 0, 0.4) !important;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 8px;
    padding: 10px !important;
}

/* online posts */
.post.online {
    background: url("http://2img.net/i/fa/prosilver/icon_user_online_en.png") no-repeat scroll right top rgba(0, 0, 0, 0.4) !important;
}

Replace /offlineimg.gif by the URL of your image.

Ange Tuteur wrote:There is no .offline classname, you must use .post. That is the first rule before .post.online.

So :

Code:

/* default / offline */
.post {
    background: url("/offlineimg.gif") no-repeat scroll right top rgba(0, 0, 0, 0.4) !important;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 8px;
    padding: 10px !important;
}

/* online posts */
.post.online {
    background: url("http://2img.net/i/fa/prosilver/icon_user_online_en.png") no-repeat scroll right top rgba(0, 0, 0, 0.4) !important;
}

Replace /offlineimg.gif by the URL of your image.

No that did not work

Oops I didn't notice you had important on the background properties. Try removing that.

Code:

/* default / offline */
.post {
    background: url("/offlineimg.gif") no-repeat scroll right top rgba(0, 0, 0, 0.4);
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 8px;
    padding: 10px !important;
}

/* online posts */
.post.online {
    background: url("http://2img.net/i/fa/prosilver/icon_user_online_en.png") no-repeat scroll right top rgba(0, 0, 0, 0.4);
}

Hello Ange Tuteur

I got it to work just before i come on to see your reply lol I think there is something in he's CSS code that was conflicting with your code as i had it at the top of the page and it did not work but as soon as i put it at the bottom of the CSS it worked fine i will have to look over he's code and see whay this was a problem.

Thank you so much for your help
SOLVED

Ape