Forum icon per theme?

[g1nt3r]

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]

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]

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]

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]

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

[g1nt3r]

awesome! thanks for the help guys!

[newbie LAC]

13 hours ago, steve00 said:

if wanting to use Fontawesome

 

[g1nt3r]

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]

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