Different Background Images for Different Title Bars

[BJ McConnell]

Hi,

I'm hoping someone can help me with coding to have different title bar background images on the category title bar and the board title bar of my forum. It may also be important to know I am using the Collapsible Categories v1.0.6 plugin to change the category title bar image when there are new posts for a board within that category.



My forum: Berean Study Group Forum



I don't know much about coding so this is just a guess but I would think I need to add something to one of the following Board templates...



Thread List template:


$[image]{foreach $[thread]}

<tr id="$[thread.content_id]" class="$[thread.content_class]">

<td class="icon">$[thread.icon]</td>

<td class="checkbox clickable">$[thread.checkbox]</td>

<td class="main clickable" title="$[thread.short_content]">

<table>

<tr>

<td>$[thread.icons]</td>

<td>

$[thread.labels]

<span class="link target">$[thread]</span>

{if $[thread.pagination]}<div class="ui-micro-pagination">Pages: $[thread.pagination]</div>{/if}

</td>

</tr>

</table>

</td>

<td class="created-by clickable">$[thread.created_by]</td>

<td class="replies clickable">$[thread.replies]</td>

<td class="views">$[thread.views]</td>

<td class="latest last">by $[thread.last_post.created_by]<br />$[thread.last_post.created_on]</td>

</tr>

{/foreach}

{if !$[thread]}

<tr class="last">

<td class="last center" colspan="7">Sorry, there are no threads here. Maybe you should create one?</td>

</tr>

{/if}
or maybe,

Board List template:

<table class="list" role="grid">

<thead>

<tr>

<th class="icon"></th>

<th class="main">Board</th>

<th class="threads">Threads</th>

<th class="posts">Posts</th>

<th class="latest last">Last Post</th>

</tr>

</thead>

<tbody>

{foreach $[board]}

{if !$[board.is_redirect]}

<tr id="$[board.content_id]" class="$[board.content_class]">

<td class="icon">$[board.icon]</td>

<td class="main clickable">

<span class="link">$[board]</span>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />

<p class="description">$[board.description]</p>

{if $[board.num_mods]}

<p class="moderators">

Moderator{if $[board.num_mods] != 1}s{/if}:

{foreach $[board.moderator_group]}$[board.moderator_group.comma_before] $[board.moderator_group]{/foreach}{if $[board.moderator]}{if $[board.moderator_group]}, {/if}{/if}

{foreach $[board.moderator]}$[board.moderator]$[board.moderator.comma] {/foreach}

</p>

{/if}

{if $[board.sub_board]}

<p class="sub-boards">

Sub-board{if $[board.sub_board] != 1}s{/if}:

{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach}

</p>

{/if}

</td>

<td class="threads">{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}</td>

<td class="posts">{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</td>

<td class="latest last">

{if $[board.posts] > 0}

{if $[board.last_thread]}

$[board.last_thread.recent_link]<br />

by $[board.last_thread.last_post.created_by]<br />

<span class="date">$[board.last_thread.last_post.created_on]</span>

{/if}

{else}

<font color="ae522b">No posts have been made on this board.</font>

                       {/if}

</td>

</tr>

{else}

<tr id="$[board.content_id]" class="$[board.content_class]">

<td class="icon">$[board.icon]</td>

<td class="main clickable redirect last" colspan="4">

<span class="link">$[board]</span><br />

<p class="description">$[board.description]</p>

</td>

</tr>

{/if}

{/foreach}

{if !$[board]}

<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>

{/if}

</tbody>

</table>
Thank you!!

[BJ McConnell]

Bump

[Retread]

Dec 20, 2019 15:23:05 GMT -8 BJ McConnell said:

Hi,

I'm hoping someone can help me with coding to have different title bar background images on the category title bar and the board title bar of my forum. It may also be important to know I am using the Collapsible Categories v1.0.6 plugin to change the category title bar image when there are new posts for a board within that category.



My forum: Berean Study Group Forum

Hi BJ McConnell

Can you clarify what you desire here? Do you want to independently choose the background image for each differfent category? If so, there is a plugin for that.

If you mean you want all Category title bars to have the same background image, but that image would be different from the background image for the title bars of the boards, legend, statistics, shoutbox, etc, you could add a class name to the div which holds the title bar for categories in the Home template. Then define the background-image for that class at the bottom of your style sheet.

Let's discuss exactly what you're after, then we can move forward from there.

[BJ McConnell]

Dec 27, 2019 10:28:45 GMT -8 Retread said:

Dec 20, 2019 15:23:05 GMT -8 BJ McConnell said:

Hi,

I'm hoping someone can help me with coding to have different title bar background images on the category title bar and the board title bar of my forum. It may also be important to know I am using the Collapsible Categories v1.0.6 plugin to change the category title bar image when there are new posts for a board within that category.



My forum: Berean Study Group Forum

Hi BJ McConnell

Can you clarify what you desire here? Do you want to independently choose the background image for each differfent category? If so, there is a plugin for that.

If you mean you want all Category title bars to have the same background image, but that image would be different from the background image for the title bars of the boards, legend, statistics, shoutbox, etc, you could add a class name to the div which holds the title bar for categories in the Home template. Then define the background-image for that class at the bottom of your style sheet.

Let's discuss exactly what you're after, then we can move forward from there.

Hi Retread, 

Thank you for responding. I believe your second option is what I'm looking for. I'm okay with the Category title bars all having the same background, but I would like to go from the home page to a board page and have the title bars for that page be different from the background images on the home page. Does that make sense? If not, let me know. I feel like I could be wording this better I'm just not sure how at the moment.

[Retread]

Dec 27, 2019 13:55:38 GMT -8 BJ McConnell said:

Hi Retread , 

Thank you for responding. I believe your second option is what I'm looking for. I'm okay with the Category title bars all having the same background, but I would like to go from the home page to a board page and have the title bars for that page be different from the background images on the home page. Does that make sense? If not, let me know. I feel like I could be wording this better I'm just not sure how at the moment.

If you want all the boards to share the same styling on their title bars, it probably makes the most sense to make the modification to the Category title bars.  I checked on the Home layout template and I think we can change those with just a modification at the bottom of the Style Sheet.  Try adding this:

/* Category Title-bar modification */

@cat_title_bar_background_image:url('@{images_path}/gradients/darkness.png');

.container > .title-bar.bbcode{
   background-image: @cat_title_bar_background_image;
}

You can change the url within the single quotes '' to whatever suits you. And we can make this so you'll have a section in your Visual Editor where you can select from the standard choices for background gradients.

Also, if you want to change the title bars for the Legend and the Forum Information and Statistics to match, let me know...

[BJ McConnell]

Exactly what I was looking for! No need to change the Legend or Information and Statistics bars. Thank you so much for the help, Retread