IPB4 -- Forum Icons

[SmackDaddy70]

How does one edit the forum icons/images in a forum (we had this in version 3.4.x -- not sure if it was an addon or not) but if I wanted to customize the icons/images for our forum in 4.x, how does one go about doing that?

Thank you in advance,

Jason

[Ryan Ashbrook]

When editing a forum, there is an upload field on the main tab to upload a custom icon: http://screencast.com/t/ExH2tFLp6K

[Pete T]

1 minute ago, PCtoolbin said:

How does one edit the forum icons/images in a forum (we had this in version 3.4.x -- not sure if it was an addon or not) but if I wanted to customize the icons/images for our forum in 4.x, how does one go about doing that?

Thank you in advance,

Jason

is this per forum ? if so you change the icons to image via ACP - Community - Forums - EDIT - icon but if like use Font Awesome that what being used now you simple add css to custom.css 

[data-forumid="****"] .fa-comment::before {
  content: "****" !important;
}

replace forumid= with the forum number this can be found by hovering over the link

replace content. with font awesome code found via fontawesome.io

[Day_]

Would be nice if there was an option to upload one icon for all boards as well, I have 8 boards all using the same custom icon. Ok they are only small file sizes but still, loading the same image 8 times isn't great.

[SmackDaddy70]

Ok, found where to change the forum icons (thanks to those who replied) -- so there's no way to have custom icons where when there's unread topics, it shows one icon and when all posts are read, another shows?  (which is what we had in 3.4.x)

[Joel R]

3 hours ago, PCtoolbin said:

Ok, found where to change the forum icons (thanks to those who replied) -- so there's no way to have custom icons where when there's unread topics, it shows one icon and when all posts are read, another shows?  (which is what we had in 3.4.x)

No.  Current format simply turns unread icon as in unhighlighted.  

[Woodsman]

If you are doing custom.css Here is how I did it.

From badges.css copy these 3 elements to your custom.css

.ipsItemStatus.ipsItemStatus_large {
		background: #303d46;
		color: #fff;
		width: 36px;
		height: 36px;
		line-height: 36px;
		border-radius: 15px 2px 15px 2px;
		display: inline-block;
		text-align: center;
		font-size: 18px;
		{prefix="transition" value="0.15s all linear"}
	}

		.ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read {
			background: #dbdbdb;
			border-radius: 2px 15px 2px 15px;
		}

	.ipsItemStatus.ipsItemStatus_read {
		opacity: 0.6;
	}

Now start editing to something like this.

/**** badges.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: 34px;
		height: 34px;
		line-height: 34px;
		border-radius: 0px;
		display: inline-block;
		text-align: center;
		font-size: 18px;
		{prefix="transition" value="0.15s all linear"}
	}

		.ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read {
			background-image: url( {resource="f_icon_read.png" app="core" location="custom"});
            background-repeat: no-repeat;
        	background-color: transparent;
		border-radius: 0px;
		width: 34px;
		height: 34px;
		line-height: 34px;
		}

	.ipsItemStatus.ipsItemStatus_read {
		opacity: 1;
	}

This will give you your forum icons also removing the rounded boarders and font awesome images.

I just happen to keep the old image files f_icon.png and f_icon_read.png from the previous theme version here so you will replace them with your image files.

Also remember to change width and height to fit your images.

Now if you also have protected forums or redirects then you may want to add these to your custom.css as well...

.ipsItemStatus.ipsItemStatus_large.cForumIcon_password {
	background-image: url( {resource="f_icon_protected.png" app="core" location="custom"});
        background-repeat: no-repeat;
	}

	.ipsItemStatus.ipsItemStatus_large.cForumIcon_redirect {
		background-image: url( {resource="f_icon_redirect.png" app="core" location="custom"});
		background-repeat: no-repeat;
		width: 34px;
		height: 34px;
	}

Now save your custom.css and enjoy!

[SmackDaddy70]

Woodsman, thank you for that....what would I delete to keep the font awesome images?  And where does this "custom.css" actually get edited in the ACP?  Or is it a file somewhere that I need to FTP to?  Where would that be?

Thank you in advance.

[Tracy Perry]

8 hours ago, PCtoolbin said:

Woodsman, thank you for that....what would I delete to keep the font awesome images?  And where does this "custom.css" actually get edited in the ACP?  Or is it a file somewhere that I need to FTP to?  Where would that be?

Thank you in advance.

This is what works for me (I use some custom icon fonts instead of from FA).

 

.cForumList [data-forumID="5"] .ipsItemStatus > .fa:before {
/*font-family: fontawesome !important;*/
  font-family: icons-font !important;
  content: "\e021"!important;
    background-color:transparent;
    font-size:32px;
  color:rgb(116, 73, 7);
  padding-top:5px !important;
}
.ipsDataItem[data-forumid='5']{ 
  background: rgb(229, 221, 199) !important;
}


.ipsDataItem[data-forumid='6']{ 
  background: rgb(229, 221, 199) !important;
}
.cForumList [data-forumID="6"] .ipsItemStatus > .fa:before {
font-family: icons-font !important;
	content: ","!important;
    background-color:transparent;
    font-size:32px;
  color:rgb(116, 73, 7);
  padding-top:5px !important;

}

 

The 

.ipsDataItem[data-forumid='5']{ 
  background: rgb(229, 221, 199) !important;
}

is used to color the background of the forum node (some I use different colors on, like the banned one, staff, etc.).

[jfmakis27@adam.com.au]

Can anyone assist me in locating where to place the f_icon.png and f_icon_read.png in Als code above. I have done this before but just seem to be getting a mental blank.

So much appreciated for your help with this one Woodsman. It is great!

[jfmakis27@adam.com.au]

The images f_icon.png and f_icon_read.png need to be uploaded in Customisation>Themes>(drop down menu)> Manage resources.

Place the following code in Custom.css in the Edit HTML & CSS (thanks Al)

/**** badges.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: 34px;
		height: 34px;
		line-height: 34px;
		border-radius: 0px;
		display: inline-block;
		text-align: center;
		font-size: 18px;
		{prefix="transition" value="0.15s all linear"}
	}

		.ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read {
			background-image: url( {resource="f_icon_read.png" app="core" location="custom"});
            background-repeat: no-repeat;
        	background-color: transparent;
		border-radius: 0px;
		width: 34px;
		height: 34px;
		line-height: 34px;
		}

	.ipsItemStatus.ipsItemStatus_read {
		opacity: 1;
	}

Make sure that you copy the path of the images in the upload to correspond with the code.

in the above one of the codes is as below but yours may be different subject to the name of your image and the path may vary also

{resource="f_icon_read.png" app="core" location="custom"}