Online Offline Status Icons instead of Font Awesom

Me personally, I don't care for the square little squares- Green, Grey, Blue, Pink....

Do you prefer the Old School Dolphin Online-Offline Status Icons- DOTS? (before Dolphin 7.1)

Well, I think they look better than the squares anyway...

ACTUALLY- I like seeing the actual word- "ON"

Either way, we're talking about replacing the Font Awesome Icon-Fonts with an actual image- png,jpg,gif,etc...LIKE THIS-

 Online-Offline Status screener

 

NOTE- This may or may not be the BEST way to do this....This is how I did it, and welcome anyone to chime in with a better or easier way or whatever Laughing

As always- BACKUP any files you'll be changing....(This involves modifying the icon.css and the BxDolUserStatusView.php files)

Screenshots and images used are attached.

Step 1- EDIT      /inc/classes/BxDolUserStatusView.php  

Around line 18 you'll find the function BxDolUserStatusView() and the following code below-

    function BxDolUserStatusView()
    {
        $this -> sHomeUrl = BX_DOL_URL_ROOT;
        $this -> aStatuses = array(

            'online'  => array(
                'icon8'  => 'sign-blank sys-status-online',
                'icon'  => 'sign-blank sys-status-online',
                'title' => _t('_Online'),
            ),

            'offline' => array(
                'icon8'  => 'sign-blank sys-status-offline',
                'icon'  => 'sign-blank sys-status-offline',
                'title' => _t('_Offline'),
            ),

            'away' => array(
                'icon8'  => 'sign-blank sys-status-away',
                'icon'  => 'sign-blank sys-status-away',
                'title' => _t('_Away'),
            ),

            'busy'    => array(
                'icon8'  => 'sign-blank sys-status-busy',
                'icon'  => 'sign-blank sys-status-busy',
                'title' => _t('_Busy'),
            ),
        );
    }

The code highlighted in red are the Font Awesome Icon Names in the icon.css file and will be replaced with icon names of your choosing and the icon.css file will need to be edited/updated to match.

I replaced the above code in red with the actual words- online, offline, busy, and away like this:

    function BxDolUserStatusView()
    {
        $this -> sHomeUrl = BX_DOL_URL_ROOT;
        $this -> aStatuses = array(

            'online'  => array(
                'icon8'  => 'online sys-status-online',
                'icon'  => 'online sys-status-online',
                'title' => _t('_Online'),
            ),

            'offline' => array(
                'icon8'  => 'offline sys-status-offline',
                'icon'  => 'offline sys-status-offline',
                'title' => _t('_Offline'),
            ),

            'away' => array(
                'icon8'  => 'away sys-status-away',
                'icon'  => 'away sys-status-away',
                'title' => _t('_Away'),
            ),

            'busy'    => array(
                'icon8'  => 'busy sys-status-busy',
                'icon'  => 'busy sys-status-busy',
                'title' => _t('_Busy'),
            ),
        );
    }

~~~(Attached is a before and after screenshot image of this change)~~~

Save and FTP Back to your site....

NOTE- If you wish to use another Font Awesome Icon which already exists, then you would replace the code with the corresponding Font Awesome Icon Name in the icon.css file

Step 2- Edit    /templates/base/css/icon.css

At the bottom of the icon.css file add these lines-

.sys-icon.online:before              { content: url(../images/on.png); }
.sys-icon.offline:before              { content: url(../images/off.png); }
.sys-icon.busy:before              { content: url(../images/busy.png); }
.sys-icon.away:before              { content: url(../images/away.png); }

(Attached is a screenshot image of this change)

NOTE- The code above highlighted in blue is the location and name of your image-icons which you want to use instead of Font Awesome....I'm sure you get the idea Wink

Save and FTP Back to your site....

Step 3- FTP/Upload your Online-Offline-Busy-Away Status icon-images to the /templates/base/images directory

~~~~~CLEAR CACHES~~~~~

Done.

 

The images I made and experimented with are attached....you may mix, match, and use as you wish...

NOTE- Using the "Word" images look best coupled with some other CSS adjustments with your avatar (margin, size, etc...) But the dots should look pretty good without any other changes.

Me personally- I like the idea of using the "ON" image-icon for online and the Dot image-icons for the Offline, Busy, and Away.

Whatever works best for you Laughing

ALSO REMEMBER- You'll need to do this again after upgrading Dolphin versions if the upgrade replaces the icon.css and the BxDolUserStatusView.php.

Online-Offline Status Screener.jpg · 73.7K · 3484 views
BxDolUserStatusView-PHP After.jpg · 70.7K · 452 views
On-Off Status Dots.zip · 13.5K · 452 downloads
On-Off Status Words.zip · 12.2K · 404 downloads
Quote · 22 Sep 2013

Personally, I think 7.1 is ugly compared to 7.0.9.  The idea is that everyone uses telephones to connect to websites today so a website has to be low level for them.  Tablets are a bit better but really, using a telephone to do real social networking is silly.  Then again most people in our society today just do sound bites; "Hey, I am having soup for lunch."  Sad really.

Geeks, making the world a better place
Quote · 22 Sep 2013

Thanks for this, by the way.  I keep meaning to try and make my site pretty but seems I am always doing something else.

Geeks, making the world a better place
Quote · 22 Sep 2013

 Yeah....I've totally contemplated going back to 7.0.9 to get back some things I've lost....Ahhhh Well X~)

Thanks for this, by the way.  I keep meaning to try and make my site pretty but seems I am always doing something else.

 You're always giving yourself here GG and a lot of us respect and admire that. Wink

I came back on to say- There's surely a better way to put the text-words ON, OFF, BUSY, and AWAY on rather than the quick photoshopping I did.

NOW- I need to do some old school anti-social getting away from this computer and enjoy the weather with the family Cool

Quote · 22 Sep 2013

 

NOW- I need to do some old school anti-social getting away from this computer and enjoy the weather with the family Cool

Yes you do.  I really enjoyed my little holiday in the mountains.

Geeks, making the world a better place
Quote · 22 Sep 2013
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.