17 replies to this topic

[emoney]

File Name: (e$23) Category Styles and Forum Title Colors 1.0
File Submitter: emoney
File Submitted: 1 May 2009
File Category: IP.Board v2.3.x Mods

Allows admins the ability to substitute custom background images or background colors per category to display as the category background title row as well as custom font colors for both category and forum titles.

Displays on Board Index, Category View, Forum View (+Subforums).

Settings include on/off and as well as the ability to choose on which skin(s) to display the mod.

Why install?  Cause you can do this:

Collapsed:



Expanded:


(note: The forums and categories are color-coded in the screenshots, but that isn't necessary... each category/forum can be whatever color you want and independent of each other)

Click here to download this file

[Angelic Princess]

Great I'll Try This

[Angelic Princess]

Go To: ACP Home->Look & Feel->Skins & Templates->Skin Manager->Your skin->Edit Html->Board Index->catheader_expanded

I can't find these two codes in there:

<div class="maintitlecollapse">

<div class="maintitle">

[emoney]

Yeah, custom skins might be different but you can still add them relatively easily.  I've installed on about 8 different skins so far, and 7 of them had those lines, but it still worked on the 1 that didn't, just needed to figure out which "div" element to add it to.  Here are the first dozen lines from the Classic Blue catheader_expanded template (with this mod's edits already added):

<div class="borderwrap" style="display:{$data['div_fc']}" id="fc_{$data['id']}">
	<div class="maintitlecollapse" style="{$data['divstyle']}">
		<p class="expand"><a href="java script:togglecategory({$data['id']}, 0);"><{E_PLUS}></a></p>
		<p><{CAT_IMG}>&nbsp;<a href="{$this->ipsclass->base_url}showforum={$data['id']}"><span style=" <if='$this->ipsclass->vars['cat_styles_on'] && in_array( $this->ipsclass->skin['_skincacheid'], explode(',', $this->ipsclass->vars['cat_styles_skins']) ) && $data['title_color']'>color:{$data['title_color']}</if>">{$data['name']}</span></a></p>
	</div>
</div>
<div class="borderwrap" style="display:{$data['div_fo']}" id="fo_{$data['id']}">
	<div class="maintitle" style="{$data['divstyle']}">
		<p class="expand"><a href="java script:togglecategory({$data['id']}, 1);"><{E_MINUS}></a></p>
		<p><{CAT_IMG}>&nbsp;<a href="{$this->ipsclass->base_url}showforum={$data['id']}"><span style=" <if='$this->ipsclass->vars['cat_styles_on'] && in_array( $this->ipsclass->skin['_skincacheid'], explode(',', $this->ipsclass->vars['cat_styles_skins']) ) && $data['title_color']'>color:{$data['title_color']}</if>">{$data['name']}</span></a></p>
	</div>

You can see where the lines are from that and use that to deduce which lines need editing on whatever skin you are working with.  Simply stated, the div element in which you would need to add style="{$data['divstyle']}" is likely going to be the line directly beneath the top <div>'s, the one that contain the style="display:{$data['div_fc']}" and style="display:{$data['div_fo']}".  

Let me know if you can figure it out, or you can always post the template bit here and I'll point out which lines need the edits.

It might be a good idea to do a test run on either the classic blue or ip.boardpr skins just so you can get a feel for it and see it in action.

[Angelic Princess]

Kinda lost here :$

Here is the code that I have:

<div style="display:{$data['div_fc']}" id="fc_{$data['id']}">
	<a href="java script:togglecategory({$data['id']}, 0);"><{E_PLUS}></a>

<div class="catheadmid"><div class="catheadleft"><div class="catheadright"><div class="catheadtext">
<a href="{$this->ipsclass->base_url}showforum={$data['id']}">{$data['name']}</a>
</div></div></div></div>






</div>



<div style="display:{$data['div_fo']}" id="fo_{$data['id']}">
<a href="java script:togglecategory({$data['id']}, 1);"><{E_MINUS}></a>

<div class="catheadmid"><div class="catheadleft"><div class="catheadright"><div class="catheadtext">
<a href="{$this->ipsclass->base_url}showforum={$data['id']}">{$data['name']}</a>
</div></div></div></div>

<div class="clear"></div>


	<table class='ipbtable' cellspacing="0" style="clear: left;">
		<tr> 
			<th colspan="2" width="66%">{$this->ipsclass->lang['cat_name']}</th>
			<th align="center" width="7%">{$this->ipsclass->lang['topics']}</th>
			<th align="center" width="7%">{$this->ipsclass->lang['replies']}</th>
			<th width="35%">{$this->ipsclass->lang['last_post_info']}</th>
		</tr>

[emoney]

k, I added the style to the three divs which likely contain background images for each of the 2 sections.  I also went ahead and did the text color edits too, here is the modified template code, let me know how it works.

<div style="display:{$data['div_fc']}" id="fc_{$data['id']}">
	<a href="java script:togglecategory({$data['id']}, 0);"><{E_PLUS}></a>

<div class="catheadmid" style="{$data['divstyle']}"><div class="catheadleft" style="{$data['divstyle']}"><div class="catheadright" style="{$data['divstyle']}"><div class="catheadtext">
<a href="{$this->ipsclass->base_url}showforum={$data['id']}"><span style=" <if='$this->ipsclass->vars['cat_styles_on'] && in_array( $this->ipsclass->skin['_skincacheid'], explode(',', $this->ipsclass->vars['cat_styles_skins']) ) && $data['title_color']'>color:{$data['title_color']}</if>">{$data['name']}</span></a>
</div></div></div></div>






</div>



<div style="display:{$data['div_fo']}" id="fo_{$data['id']}">
<a href="java script:togglecategory({$data['id']}, 1);"><{E_MINUS}></a>

<div class="catheadmid" style="{$data['divstyle']}"><div class="catheadleft" style="{$data['divstyle']}"><div class="catheadright" style="{$data['divstyle']}"><div class="catheadtext">
<a href="{$this->ipsclass->base_url}showforum={$data['id']}"><span style=" <if='$this->ipsclass->vars['cat_styles_on'] && in_array( $this->ipsclass->skin['_skincacheid'], explode(',', $this->ipsclass->vars['cat_styles_skins']) ) && $data['title_color']'>color:{$data['title_color']}</if>">{$data['name']}</span></a>
</div></div></div></div>

<div class="clear"></div>


	<table class='ipbtable' cellspacing="0" style="clear: left;">
		<tr>
			<th colspan="2" width="66%">{$this->ipsclass->lang['cat_name']}</th>
			<th align="center" width="7%">{$this->ipsclass->lang['topics']}</th>
			<th align="center" width="7%">{$this->ipsclass->lang['replies']}</th>
			<th width="35%">{$this->ipsclass->lang['last_post_info']}</th>
		</tr>

[Angelic Princess]

It Works Thank you
But it only colors the top bar, how do I make title of sections colored?
Also, I need one here too :$ board index=>subheader

<br />
<script type="text/javascript">
//<![CDATA[
// Set up img vars
var img_markers = {
	'bc_new.gif' : 'bc_nonew.gif',
	'bf_new.gif' : 'bf_nonew.gif',
	'br_new.gif' : 'br_nonew.gif'
};
var regex_markers = 'bc_new.gif|bf_new.gif|br_new.gif';
//]]>
</script>
<script type="text/javascript" src="jscripts/ipb_forum.js"></script>   






<div style="display:{$data['div_fc']}" id="fc_{$data['id']}">
<div class="expand"><a href="java script:togglecategory({$data['id']}, 0);"><{E_PLUS}></a></div>
<div class="catheadmid"><div class="catheadleft"><div class="catheadright"><div class="catheadtext">
<a href="{$this->ipsclass->base_url}showforum={$data['id']}">{$data['name']}</a>
</div></div></div></div>
</div>






<div style="display:{$data['div_fo']}" id="fo_{$data['id']}">
<div class="expand"><a href="java script:togglecategory({$data['id']}, 1);"><{E_MINUS}></a></div>
<div class="catheadmid"><div class="catheadleft"><div class="catheadright"><div class="catheadtext">
<a href="{$this->ipsclass->base_url}showforum={$data['id']}">{$data['name']}</a>
</div></div></div></div>

<div class="clear"></div>


	<table class='ipbtable' cellspacing="0" style="clear: left;">
		<tr> 
			<th colspan="2" width="66%">{$this->ipsclass->lang['cat_name']}</th>
			<th align="center" width="7%">{$this->ipsclass->lang['topics']}</th>
			<th align="center" width="7%">{$this->ipsclass->lang['replies']}</th>
			<th width="35%">{$this->ipsclass->lang['last_post_info']}</th>
		</tr>

[emoney]

the subheader is the same edits, I'm taking the 3 divs: <div class="catheadmid"><div class="catheadleft"><div class="catheadright"> from both sections and adding style="{$data['divstyle']}" within each of them, and then doing the {$data['name'] edit too.  I'll go ahead and do it again for that template:

<br />
<script type="text/javascript">
//<![CDATA[
// Set up img vars
var img_markers = {
	'bc_new.gif' : 'bc_nonew.gif',
	'bf_new.gif' : 'bf_nonew.gif',
	'br_new.gif' : 'br_nonew.gif'
};
var regex_markers = 'bc_new.gif|bf_new.gif|br_new.gif';
//]]>
</script>
<script type="text/javascript" src="jscripts/ipb_forum.js"></script>  






<div style="display:{$data['div_fc']}" id="fc_{$data['id']}">
<div class="expand"><a href="java script:togglecategory({$data['id']}, 0);"><{E_PLUS}></a></div>
<div class="catheadmid" style="{$data['divstyle']}"><div class="catheadleft" style="{$data['divstyle']}"><div class="catheadright" style="{$data['divstyle']}"><div class="catheadtext">
<a href="{$this->ipsclass->base_url}showforum={$data['id']}"><span style=" <if='$this->ipsclass->vars['cat_styles_on'] && in_array( $this->ipsclass->skin['_skincacheid'], explode(',', $this->ipsclass->vars['cat_styles_skins']) ) && $data['title_color']'>color:{$data['title_color']}</if>">{$data['name']}</span></a>
</div></div></div></div>
</div>






<div style="display:{$data['div_fo']}" id="fo_{$data['id']}">
<div class="expand"><a href="java script:togglecategory({$data['id']}, 1);"><{E_MINUS}></a></div>
<div class="catheadmid" style="{$data['divstyle']}"><div class="catheadleft" style="{$data['divstyle']}"><div class="catheadright" style="{$data['divstyle']}"><div class="catheadtext">
<a href="{$this->ipsclass->base_url}showforum={$data['id']}"><span style=" <if='$this->ipsclass->vars['cat_styles_on'] && in_array( $this->ipsclass->skin['_skincacheid'], explode(',', $this->ipsclass->vars['cat_styles_skins']) ) && $data['title_color']'>color:{$data['title_color']}</if>">{$data['name']}</span></a>
</div></div></div></div>

<div class="clear"></div>


	<table class='ipbtable' cellspacing="0" style="clear: left;">
		<tr>
			<th colspan="2" width="66%">{$this->ipsclass->lang['cat_name']}</th>
			<th align="center" width="7%">{$this->ipsclass->lang['topics']}</th>
			<th align="center" width="7%">{$this->ipsclass->lang['replies']}</th>
			<th width="35%">{$this->ipsclass->lang['last_post_info']}</th>
		</tr>

And about your other question, what do you mean "title of sections", do you mean the titles of each forum within the categories?  If so, thats 2 of the other skin edits: forum_redirect_row and ForumRow.  Just make sure you've added a color to whatever forum you want to have a colored title, via ACP->Management->Manage Forums->(pick a forum)->Edit Settings.

[Angelic Princess]

Oh Alright, thank you very much
It works great

[emoney]

Awesome, I'm glad!  I wouldn't mind seeing a screenshot if you wanna show off.

[Angelic Princess]

emoney, on May 2 2009, 10:33 AM, said:

Awesome, I'm glad!  I wouldn't mind seeing a screenshot if you wanna show off.

hehe Sure
Btw, I didn't color the categories, I only colored the sections

[emoney]

Looks good! And yeah, I tried to design the mod to give admins a wide range of possible usages. From simply making 1 forum title a different color to stand out from the rest all the way to completely colorizing the entire board (index/cats/forums/subforums all different colors).

[JoshoD]

You released it for free

Nice job man. Works pretty gwed

Now you should make it so people can make 3 image catagorys (so you can make rounded headers)     XD

Edited by JoshoD, 02 May 2009 - 08:09 PM.

[emoney]

lol, yeah, I was trying to keep it simple and keep the extra database columns needed minimal so I didn't want to go that far, but it might be inevitable for the next version...  Plus it will add a lot more questions from people who are only doing it on the classic and pro skin since those skins don't even have the templates necessary to have a left/right/middle background image in category row.  But still, I may add something in the next version.  

Glad its working for ya, and yeah, I released it free... I have yet to release a mod that costs for a couple reasons.  1) I have a lot of fun modding and so its not the biggest deal to not get paid for the "work" it requires 2) For this mod particularly I thought it would be found well by many so I figure the more who have access the better.

[JoshoD]

emoney, on May 2 2009, 03:27 PM, said:

lol, yeah, I was trying to keep it simple and keep the extra database columns needed minimal so I didn't want to go that far, but it might be inevitable for the next version...  Plus it will add a lot more questions from people who are only doing it on the classic and pro skin since those skins don't even have the templates necessary to have a left/right/middle background image in category row.  But still, I may add something in the next version.  

Glad its working for ya, and yeah, I released it free... I have yet to release a mod that costs for a couple reasons.  1) I have a lot of fun modding and so its not the biggest deal to not get paid for the "work" it requires 2) For this mod particularly I thought it would be found well by many so I figure the more who have access the better.

lol, I would actually like to see that in the next version cause I've hit a rough spot and I don't know how to make it work.'

I want 3 image cat headers (for rounded corners ) and different colors (or in my case image) catagories... :/

So I'm going to try to expieriment with Michael's & Ehren's tutorials to see if I can't get this to work.

[emoney]

Good luck.   Feel free to post here if you have questions.

[DrSeMSeM]

gr8 work m8

but which skin you advise me to use it to get the full effect of the mode ?

thanks for advance

[emoney]

thanks!

Well, it works fine on both the classic blue and the pro skins.. and for custom skins it works with just a bit of tweaking in the skin file edits... I would install it (or at least try to) on all of your skins and see how they look.  then if it doesn't look good on specific ones you can turn the mod off for those skins.