Use custom forum images.

[Steve]

Description:
Removes the standard forum icons from index page and allows you to use custom images more in theme with your forum.
Recomended snippet coloured Unread Forums and Topics : viewtopic.php?f=9&t=648
instructions
Open styles/prosilver/template/forumlist_body.html
find:

Code: Select all

<li class="header">
					<dl class="icon">

replace with:

Code: Select all

<li class="header">
					<!-- IF SCRIPT_NAME == "index" --><dl class="no_icon"><!-- ELSE --><dl class="icon"><!-- ENDIF -->

find:

Code: Select all

<dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat;">

replace with:

Code: Select all

<!-- IF SCRIPT_NAME == "index" --><dl class="no_icon"><!-- ELSE --><dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat;"><!-- ENDIF -->

Open styes/prosilver/theme/content.css
find:

Code: Select all

dl.icon dt {
	padding-left: 45px;					/* Space for folder icon */
	background-repeat: no-repeat;
	background-position: 5px 95%;		/* Position of topic icon */
}

add after:

Code: Select all

dl.no_icon dt {
	padding-left: -45px;					
	background-repeat: no-repeat;
}

Refresh template and theme in acpanel for prosilver.

fixed.PNG

before.PNG

after.PNG

*Update instructions for allignment bug and to remove coloured notification:
[spoiler]Open styles/prosilver/template/forumlist_body.html
find:

Code: Select all

<li class="header">
					<dl class="icon">

replace with:

Code: Select all

<li class="header">
					<!-- IF SCRIPT_NAME == "index" --><dl class="no_icon"><!-- ELSE --><dl class="icon"><!-- ENDIF -->

Find:

Code: Select all

<!-- IF forumrow.S_UNREAD_FORUM --><a href="{forumrow.U_VIEWFORUM}" class="forumtitle" style="color:#FF0000;">{forumrow.FORUM_NAME}</a><!-- ELSE --><a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><!-- ENDIF --><br />

Replace with:

Code: Select all

<a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />

Open styes/prosilver/theme/content.css
find:

Code: Select all

dl.icon dt {
	padding-left: 45px;					/* Space for folder icon */
	background-repeat: no-repeat;
	background-position: 5px 95%;		/* Position of topic icon */
}

add after:

Code: Select all

dl.no_icon dt {
	padding-left: -45px;					
	background-repeat: no-repeat;
}

---

This parts to remove coloured forum title notification.
find:

Code: Select all

<!-- IF SCRIPT_NAME == "index" --><dl><!-- ELSE --><dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat;"><!-- ENDIF -->

replace with:

Code: Select all

<!-- IF SCRIPT_NAME == "index" --><dl class="no_icon"><!-- ELSE --><dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat;"><!-- ENDIF -->

Now use this coloured Unread Forums and Topics : http://www.phpbb3bbcodes.com[/spoiler]

prosilver instructions only,subsilver2 upon request.
You add your forum image in admin control panel here

forum image.PNG

Ok. But about the forum image how can I text centered with image.

Sorry cant achieve that with the layout of the html for forum name and description etc.

[Stoker]

Nice one ninja.
You can do lots of different stuff instead of using a color.

[Steve]

like flying ducks or summit.Want to keep it simple its a snippet

[cisco007]

yeah, i am pretty sure many people would want something like this!

[Inner Circle]

Looks good!

[Denny]

Nice feature. My subsilver2 already has this feature, but some people may not be aware of it being there.

[Steve]

where? yes you can use custom forum images with prosilver but this removes the normal forum icon

[Denny]

In your third picture above, is the same as what I see in subsilver2

[Steve]

oh well thats just there for members who dont know its there,or dont know how to add forum images

[Sir Xiradorn]

Wery good work.....i had add a small addon to colour also the unread topic title
In viewforum_body.html i modified this

Code: Select all

<a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>

in this way

Code: Select all

<a href="{topicrow.U_VIEW_TOPIC}"<!-- IF topicrow.S_UNREAD_TOPIC -->style="color:#FF0000;"<!-- ENDIF --> class="topictitle">{topicrow.TOPIC_TITLE}</a>