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-
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
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
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
ALSO REMEMBER- You'll need to do this again after upgrading Dolphin versions if the upgrade replaces the icon.css and the BxDolUserStatusView.php.