header & footer images

[David Clark]

Smudges can you give me a brief recap of what you're stuck on at this time? Are you trying to get this image to show as the background image for the sub-board columns, or..?

[Smudges]

David Clark i have to a point with help of Tumbleweed trying to do a header & footer for the categories without using the plugin made by pebble for it and both myself and tumbleweed are stuck in reards to a few thinngs

Stuck on the header Aint displaying everywhere including sub boards

stuck on coding a footer for the categories footer


If i havent explained it better i am trying to use a tri img as a header and footer example below for all categories and sub menus


category header code:

<div class="catheadmid"><div class="catheadleft"><div class="catheadright"><div class="catheadtext"></div></div></div></div>



category footer

<div class="catfoot"><div class="catfoot_left"><div class="catfoot_right"></div></div></div>

[Smudges]

umm another person whom might be able to help is pawl *fingers cross

[Tumbleweed]

Smudges, I've found a bit of time and it looks like others are busy so if you want to plug along here:

To add to sub-boards and if you want your mini profile to have the header add the blue to your style sheet that I gave you before:

.container.legend, .container.stats,.container.threads,.container.posts,.container.quick-reply,.container.gravity-related-topics,.container.new-area.wysiwyg-area,.container.show-user,.container.boards{

and then below that add these new classes for the footer part:

.my_footer_wrap{
background-image:url(http://z3.ifrm.com/402/65/0/p205749/repeatfooter.png);
background-repeat: repeat-x;
height:25px;
width:100%;
margin-top:-10px; margin-bottom: 10px;
z-index:-1;
}
.my_footer{
background:url('http://z3.ifrm.com/402/65/0/p205748/leftfooter.png'),url('http://z3.ifrm.com/402/65/0/p205750/rightfooter.png');
background-position: left top,right top;
background-repeat: no-repeat,no-repeat;
height:25px;
width:100%;
background-color:transparent;
}

And then you'll have to add these two div's in blue to your wrapper home template:

<div class="content cap-bottom">
$[category.board_list]
</div>
</div>

<div class="my_footer_wrap">
<div class="my_footer"></div>
</div>

{/foreach}


Also in that same template add the same thing as I did below:


{if $[legend]}
<div class="container legend">
<div class="title-bar"><h2>Legend</h2></div>
<div class="content">
<table>
<tr>
{foreach $[legend]}
<td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}
</tr>
</table>
</div>
</div>
{/if}
<div class="my_footer_wrap">
<div class="my_footer"></div>
</div>


I think I found a better way. After doing the things above my striked out stuff add this to the bottom of your forum wrapper:

<div style="display:hidden;">
<div class="my_footer_wrap">
<div class="my_footer"></div>
</div>
</div>

<script type="text/javascript">
$("document").ready(function(){
$(".my_footer_wrap").insertAfter(".container.legend, .container.stats,.container.threads,.container.posts,.container.quick-reply,.container.gravity-related-topics,.container.new-area.wysiwyg-area,.container.show-user,.container.boards");


});
</script>

The above seems to put the footer under boards, threads, info center and other important places. 



I'm sure we will discover places still missing either the header/footer or both and I yet need to work out why that is repeating in the Participated page but I'm going to see if I can figure it out now.

Edit: It is definitely the class .container.threads I added causing the repeat in participated but I just noticed I just had repeat. That first set of classes that has the .container.threads class add the red to this bit of css.

background-repeat: repeat-x;

That will keep if from repeating like it was but do you want the left and right images in that too. That may be tricky to totally remove that bit without losing it in threads or add the left and right images to make it the head image you want,  but I rarely give up trying to work out an issue so if you want the header in the participated page/popup, let me know.


Let me know if you discover things I missed and how you want the participated popup.

[Smudges]

Tumbleweed sorry for being blonde but with this part where do i put it ?

I think I found a better way. After doing the things above my striked out stuff add this to the bottom of your forum wrapper:

<div style="display:hidden;">
<div class="my_footer_wrap">
<div class="my_footer"></div>
</div>
</div>

<script type="text/javascript">
$("document").ready(function(){
$(".my_footer_wrap").insertAfter(".container.legend, .container.stats,.container.threads,.container.posts,.container.quick-reply,.container.gravity-related-topics,.container.new-area.wysiwyg-area,.container.show-user,.container.boards");


});
</script>


Tumbleweed i think i have it

the only place i need header and footer images is main home page and just the header image everywhere else



only places it doesnt work is

Edit Profile & Settings
Bank
Stockmarket

and home page title text disapeared

[Tumbleweed]

Well, that's not good. Is it possible you could pm me the link to your site you have this on so I can at least click on one board and view your main page. I don't need to post or anything. The reason I ask is I'm doing this on a test site and I've changed so many things on it and I don't feel like going and resetting all my templates. That would be really helpful.

So I'm confused, I though we almost had all the header ones done?

[Smudges]

Tumbleweed i have solved some i think thanks to your code

.container.legend, .container.stats,.container.threads,.container.posts,.container.quick-reply,.container.gravity-related-topics,.container.new-area.wysiwyg-area,.container.show-user,.container.boards,.members,.conversations, .search, {
background-image:url('http://z3.ifrm.com/402/65/0/p204810/repeath2.png');
background-repeat: repeat;
width: 100%;
}

added members , conversations , search




Tumbleweed i do have a test account with the url do you want to use it to see what i have done ?
if you do i will pm it to you

[Tumbleweed]

Oct 16, 2013 0:15:57 GMT -8 Smudges said:

Tumbleweed i have solved some i think thanks to your code

.container.legend, .container.stats,.container.threads,.container.posts,.container.quick-reply,.container.gravity-related-topics,.container.new-area.wysiwyg-area,.container.show-user,.container.boards,.members,.conversations, .search, {
background-image:url('http://z3.ifrm.com/402/65/0/p204810/repeath2.png');
background-repeat: repeat;
width: 100%;
}

added members , conversations , search




Tumbleweed i do have a test account with the url do you want to use it to see what i have done ?
if you do i will pm it to you

If you can just open one board so I can click on it and not get an error (no permission to view) I won't need a test account. While you do that I'll see about 
added members, conversations, search.  Oh, wait, can you clarify what you mean by conversations and by added members do you just mean the members page? 

I think by conversations you mean pms. If so the class for that is .container.conversations so you can add that to what you just posted above. Also that will need to go in the part you have at the bottom of the template to add the base image. Just make sure there is a comma between each class. For members it is .container.members and search is like the participate one which is problematic. You almost need smaller side images for that but anyway, I'm trying to work it out.

[Smudges]

Oct 16, 2013 0:15:57 GMT -8 Smudges said:

Tumbleweed i have solved some i think thanks to your code

.container.legend, .container.stats,.container.threads,.container.posts,.container.quick-reply,.container.gravity-related-topics,.container.new-area.wysiwyg-area,.container.show-user,.container.boards,.members,.conversations, .search, {
background-image:url('http://z3.ifrm.com/402/65/0/p204810/repeath2.png');
background-repeat: repeat;
width: 100%;
}

added members , conversations , search




Tumbleweed i do have a test account with the url do you want to use it to see what i have done ?
if you do i will pm it to you

Tumbleweed i noticed that members conversations(pm) and search didnt have the middle part


i have opened news room and archieves for you 

[Tumbleweed]

Thanks for opening those. Make sure all the new ones I gave you are also in that part that is in the template. Well, here is what I have in mine:

<script type="text/javascript">
$("document").ready(function(){
$(".my_footer_wrap").insertAfter(".container.legend, .container.stats,.container.threads,.container.posts,.container.quick-reply,.container.gravity-related-topics,.container.new-area.wysiwyg-area,.container.show-user,.container.boards,.container.members,.container.conversations");


});
</script>

I don't know why your conversations one doesn't have a middle part as on my test site it does. double check you have a comma between them but no comma after the last one.

Also know on my test site the search and participate looks like it has the header but on my site I have the middle part covering it and then it looks to wide yet yours appears to have nothing. These two might be the ones that stump me.   

[Smudges]

i got those parts Tumbleweed it was .container i was missing

as for bank and stockmarket i might have to ask Peter

[Tumbleweed]

Yep, I wouldn't have a way to find those classes for bank and stockmarket. As far as the footer parts missing (I see them missing on your threads), you did put that in the wrapper template, right? You basically need all the classes in that one css part where we kept adding them,  in the javascript that is in the wrapper template so just double check them.  I'm heading for bed so you can close your site to guests if you want. I you still have unresolved issues I'll have to look at it again when I get back online, probably around the same time I've been here now.

[Smudges]

i put the <script> in global headers is that the right place ? and i stuck the other part in Admin> Themes> Layout Templates>Home

are they the correct place >

[Tumbleweed]

Oct 16, 2013 1:52:52 GMT -8 Smudges said:

i put the <script> in global headers is that the right place ? and i stuck the other part in Admin> Themes> Layout Templates>Home

are they the correct place >

Well, I put the script and the div's at the bottom of the Forum Wrapper template and it seems to be working for me. I have the div's first and then the script below it. Try putting it in the wrapper template at the bottom and see if that fixes some of the missing footers.

Admin> Themes> Layout Templates>Forum Wrapper

[Smudges]

Tumbleweed i done it and the bottom pic repeats 3 times and when viewing the source its this thats causing it

my footer