Sign in to follow this  
joey_m

Alternative User Group Icons for dark themes

Recommended Posts

This method can be used to add customised group icons per theme, it's especially useful for the PRO version of the IPS Focus.

Originally shared by Newbie LAC over on IPS - https://invisioncommunity.com/forums/topic/458885-group-team-icons-per-theme/?do=findComment&comment=2833179

Simply login into your ACP > Themes > Theme Resources

When adding your first group icon, you should follow these settings.

gicons.jpg.602be2daa5e9955eaa8585d3f2c3d

Then add:

.cAuthorGroupIcon[src*="admin.png"] {
    content:url({resource="gicons/filename.png" app="core" location="front"});
}

Make sure that the 'filename.png' is amended to show the correct file name.

Next:

Repeat the same process as above for other group icons, however, select 'choose existing folder' as you have already created one.

Select existing folder 'gicons'.

Then upload the alternative icons.

Make sure you swap out the names per each group, ensuring the code above is modified for each icon you wish to use.

Quote

.cAuthorGroupIcon[src*="admin.png"] { content:url({resource="gicons/admin_dark.png" app="core" location="front"}); }

src*="admin.png" must be swapped out per each icon.

example gmod.png for global moderators (ensure you check your existing group icon titles) 

{ content:url({resource="gicons/admin_dark.png" app="core" location="front"}); } defines where your new upload can be reached, ensure "admin_dark.png" is the name of the actual file in which you upload.

Once you have added each group icon to your custom.css and, included the resources for the theme - you should see the result in which you seek.

Note:

It's useful to comment out each different item in which you add to your custom.css

This is useful so that you can identify areas within the custom changes that you have made, but also it helps third-party devs locate them too.

/* Add Appropriate Title */

If you choose to do this, make sure it starts before the CSS and after. 👍🏻

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this