Add Code to Board Header/Footer to Insert Into Template Div?

[adminabp]

Okay, so I managed to work out this code for my Template


           <div class="custominsertlabeldisplayarea"><div class="customlabeldisplayarea"><div style="text-align:center;">
              <ul class="share-buttons"><p style="font-size:12px; font-weight:bold; float:left; padding:3px;">Thread Labels:</p>
 <li><a href="http://abetterplace.boards.net/board/2/boards?filters%5B%5D=label_id:eq:7" title="Threads featuring preview pages from upcoming X-Men and related Marvel Comics"><img alt="Threads featuring preview pages from upcoming X-Men and related Marvel Comics" src="http://storage.proboards.com/5732327/images/MmTb0zbwDUkIK0AdRfgk.png" /></a></li>
 <li><a href="http://abetterplace.boards.net/board/2/boards?filters%5B%5D=label_id:eq:9" title="Threads featuring solicitations for upcoming X-Men and related Marvel Comics"><img alt="Threads featuring solicitations for upcoming X-Men and related Marvel Comics" src="http://storage.proboards.com/5732327/images/mPSVlRfYzHpngCzf0lrx.png" /></a></li>
               </ul>
               </div></div></div>
And it works. What I want to do is leave just the

<div class="custominsertlabeldisplayarea"></div>
in the template and move the rest

<div class="customlabeldisplayarea"><div style="text-align:center;">
<ul class="share-buttons"><p style="font-size:12px; font-weight:bold; float:left; padding:3px;">Thread Labels:</p>
<li><a href="http://abetterplace.boards.net/board/2/boards?filters%5B%5D=label_id:eq:7" title="Threads featuring preview pages from upcoming X-Men and related Marvel Comics"><img alt="Threads featuring preview pages from upcoming X-Men and related Marvel Comics" src="http://storage.proboards.com/5732327/images/MmTb0zbwDUkIK0AdRfgk.png" /></a></li>
<li><a href="http://abetterplace.boards.net/board/2/boards?filters%5B%5D=label_id:eq:9" title="Threads featuring solicitations for upcoming X-Men and related Marvel Comics"><img alt="Threads featuring solicitations for upcoming X-Men and related Marvel Comics" src="http://storage.proboards.com/5732327/images/mPSVlRfYzHpngCzf0lrx.png" /></a></li>
</ul>
</div></div>

from inside it to the header/footer of individual boards, where I can customize it for each individual board. How do I get that to insert into the div?

I'm stuck. Tried a few things and couldn't make it work(I don't really know coding), so thanks in advance for any help.

[adminabp]

Bump.

[adminabp]

Bump.

[Brian]

Give both div elements a unique ID attribute, then use this in the same template you left the empty div in to move the content div into it. It doesn't really matter where this code is placed in the template but my preferred practice is to place any Javascript as early in the document as possible.

<script type="text/javascript">
    $(function() {
        $('#first-element-id').appendTo($('#second-element-id'));
    });
</script>

Replace #first-element-id with the ID you've given to the element that is going to be moved.

Replace #second-element-id with the ID you've given the empty element that the first element is going to be moved into.

[adminabp]

Jan 28, 2019 10:23:06 GMT -8 Brian said:

Give both div elements a unique ID attribute, then use this in the same template you left the empty div in to move the content div into it. It doesn't really matter where this code is placed in the template but my preferred practice is to place any Javascript as early in the document as possible.

<script type="text/javascript">
    $(function() {
        $('#first-element-id').appendTo($('#second-element-id'));
    });
</script>

Replace #first-element-id with the ID you've given to the element that is going to be moved.

Replace #second-element-id with the ID you've given the empty element that the first element is going to be moved into.

Thank you soooo much Brian!

I was close to something like that on my own but I kept getting something wrong. You are a lifesaver!

[adminabp]

Okay, Brian a  little problem...

The 'Thread Label's' section is showing in the place I want when viewing the individual board's list of threads.

abetterplace.boards.net/board/2/boards

It is also, depending on where I place the code, showing in the header or footer(currently footer) of the page when reading individual threads since there is no Div for it to slot into.

abetterplace.boards.net/thread/449/books-sceduled-launching-relaunching

How do I make that not show when viewing individual threads?

[Brian]

I don't think that has anything to do with the code I provided. You explicitly have HTML producing those labels in the footer of that board.

[adminabp]

Yeah, I wanted it to show on the list of threads page but not when viewing pages of an individual thread because I had something else already in that slot there. That was totally my fault for not remotely making that clear.

Thanks to you, I worked it out. Added a bit of CSS to the individual thread template to hide the element on those pages. I remembered you showing me how to do that back when I wanted to hide something in your Sidebar Redux plugin on certain pages a few years back.

Thanks again, Brian