g1nt3r Posted February 12, 2016 Posted February 12, 2016 Is there anyway to set the forum icon per theme? It seems the icon is set when you create the forum and its the same on all themes. What I'd like to know is if there is a way to set an icon per theme and how to do it. I want to give my users different themes but the one that i set wont match the new theme I'm creating. Any help would be pretty awesome, thanks!
steve00 Posted February 13, 2016 Posted February 13, 2016 20 hours ago, g1nt3r said: Is there anyway to set the forum icon per theme? It seems the icon is set when you create the forum and its the same on all themes. What I'd like to know is if there is a way to set an icon per theme and how to do it. I want to give my users different themes but the one that i set wont match the new theme I'm creating. Any help would be pretty awesome, thanks! Yes, but means adding to custom.css file Depending if wanting to use Fontawesome or your own actual icon image will dictate on what you have to do as they are different
Woodsman Posted February 13, 2016 Posted February 13, 2016 If you are planning to create your own images you will find them under YOUR-THEME - core -global - framework - badges. Look for: .ipsItemStatus.ipsItemStatus_large { background: {theme="item_status"}; color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 20px; display: inline-block; text-align: center; font-size: 18px; {prefix="transition" value="0.15s all linear"} } and .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read { background: #dbdbdb; } (Example) by adding to your custom.css .ipsItemStatus.ipsItemStatus_large { background-image: url( {resource="f_icon.png" app="core" location="custom"}); background-repeat: no-repeat; background-color: transparent; color: transparent; width: 50px; height: 50px; line-height: 50px; border-radius: 0px; display: inline-block; text-align: center; font-size: 18px; {prefix="transition" value="0.15s all linear"} } and .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read { background-image: url( {resource="f_icon_read.png" app="core" location="custom"}); background-repeat: no-repeat; background-color: transparent; color: transparent; border-radius: 0px; width: 50px; height: 50px; line-height: 34px; } These will change the 2 main forum Icons read and unread. If you are also looking for a protected forum icon and a redirect forum icon add these to your custom.css Protected Forum icon. .ipsItemStatus.ipsItemStatus_large.cForumIcon_password { background-image: url( {resource="f_icon_protected.png" app="core" location="custom"}); background-repeat: no-repeat; } Redirect forum icon. .ipsItemStatus.ipsItemStatus_large.cForumIcon_redirect { background-image: url( {resource="f_icon_redirect.png" app="core" location="custom"}); background-repeat: no-repeat; width: 50px; height: 50px; } Remember.... These need to be added to a custom.css file and not the default badges.css file or they can be lost during the next upgrade.
steve00 Posted February 13, 2016 Posted February 13, 2016 13 minutes ago, Woodsman said: If you are planning to create your own images you will find them under YOUR-THEME - core -global - framework - badges. Look for: .ipsItemStatus.ipsItemStatus_large { background: {theme="item_status"}; color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 20px; display: inline-block; text-align: center; font-size: 18px; {prefix="transition" value="0.15s all linear"} } and .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read { background: #dbdbdb; } (Example) by adding to your custom.css .ipsItemStatus.ipsItemStatus_large { background-image: url( {resource="f_icon.png" app="core" location="custom"}); background-repeat: no-repeat; background-color: transparent; color: transparent; width: 50px; height: 50px; line-height: 50px; border-radius: 0px; display: inline-block; text-align: center; font-size: 18px; {prefix="transition" value="0.15s all linear"} } and .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read { background-image: url( {resource="f_icon_read.png" app="core" location="custom"}); background-repeat: no-repeat; background-color: transparent; color: transparent; border-radius: 0px; width: 50px; height: 50px; line-height: 34px; } These will change the 2 main forum Icons read and unread. If you are also looking for a protected forum icon and a redirect forum icon add these to your custom.css Protected Forum icon. .ipsItemStatus.ipsItemStatus_large.cForumIcon_password { background-image: url( {resource="f_icon_protected.png" app="core" location="custom"}); background-repeat: no-repeat; } Redirect forum icon. .ipsItemStatus.ipsItemStatus_large.cForumIcon_redirect { background-image: url( {resource="f_icon_redirect.png" app="core" location="custom"}); background-repeat: no-repeat; width: 50px; height: 50px; } Remember.... These need to be added to a custom.css file and not the default badges.css file or they can be lost during the next upgrade. Also note will require to upload your icon images via the Manage Resources
Woodsman Posted February 13, 2016 Posted February 13, 2016 Just now, steve00 said: Also note will require to upload your icon images via the Manage Resources True... broken images are a bit unsightly to look at
newbie LAC Posted February 14, 2016 Posted February 14, 2016 13 hours ago, steve00 said: if wanting to use Fontawesome
g1nt3r Posted February 16, 2016 Author Posted February 16, 2016 On 2/14/2016 at 10:00 PM, newbie LAC said: With font awesome, and that tutorial you posted, it doesn't really show how to use your own images, only the font awesome icons. How do I use my own images? Thanks!
steve00 Posted February 16, 2016 Posted February 16, 2016 37 minutes ago, g1nt3r said: With font awesome, and that tutorial you posted, it doesn't really show how to use your own images, only the font awesome icons. How do I use my own images? Thanks! just upload your images via the Manage Resources make a note of where it states it is (.e.g. resources= etc etc) then just change all the same code in the above post by Woodman e.g. Replace {resource="f_icon.png" app="core" location="custom"} with the similar code for the image(s) you uploaded into Manage Resources might want to either remove the line-height and other css first and see how it looks and then add those parts if required (you will need to experiment yourself regard what to add) Or check out my tutorial IF wanting different icon for every forum then admincp >> community >> forums >> pencil icon on far right of forum name >> icon NOTE: You may also require to upload smaller images for mobile and adjust the css for mobile
Recommended Posts
Archived
This topic is now archived and is closed to further replies.