Question about boxed in footer and copyright notice

[Shaliza]

Hello:

I have a question about the footer and copyright notice on my forum. 

URL: allkindsofeverything.boards.net

I tried using the Copyright Box plugin to combine the footer and copyright notice but kept running into the issue of the box being "attached" to my Affiliate table. There was no way to add some space between the copyright notice and Affiliate table. 

I also tried using the Affiliate and Copyright Box plugin but then ran into the issue of not being able to change the backgrounds of the affiliate box to match each theme I have.

So my question is, how do I add some space between the Affiliate Table and the footer/PB link?

Also, how do I add in a 50% margin around the copyright Notice in my Forum Wrapper Layout Template?

This is the coding that I currently have for the copyright notice in the Forum Wrapper Template.



$[footer]
<div class="center"><div style="background-color:#;><div class="copyright"><center><p class="bold"><font size="5"><font color="d04970">©2014 - 2020<br>Theme created by Shaliza.<br>All Kinds of Everything<br>All Rights Reserved.</p></center></div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>



Thank you for the help.  

[Nscalerr]

Hi Shaliza

I am a bit stuck with the margin bit, but you had left out a few closing tags, also you actually only need one font tag. I have redone the code and added in the closing tags you left out, also you need to add a color to the #, you can't just have a # and nothing after it. This will make it easier for others to help you. It is very important that when you open a tag in html, that you also close it.

<div class="center">
   <div style="background-color: #ffffff;">
       <div class="copyright">
           <center>
               <p class="bold">
                   <font size="5" color="d04970">
                       ©2014 - 2020<br />
                       Theme created by Shaliza.<br>All Kinds of Everything<br />
                       All Rights Reserved.
                   </font>
               </p>
           </center>
       </div>
   </div>
</div>

[Shaliza]

Hello Nscalerr

Thanks so much for helping me correct the coding. I am very much a novice at it and appreciate the help.

In terms of a margin around the copyright notice/footer, I want something like on this site:

skunk-n-skwerl.freeforums.net

Though instead of the footer border/margin extending the full width of the board, I would like it to be 50% instead. I tried using the Plugin as I mentioned above but it would not allow me to change the margin/background colors to match each theme. Also the copyright box was attached to the Affiliate table, so I was not able to put any space between the two. Hence my question how I can move the footer information (PB link, etc) a little below the Affiliate Table. 

Thanks again.

[Nscalerr]

Replace what you have with the below bit of code.

<div id="copyright" class="center copyright">
<p>©2014 - 2020<br />
Theme created by Shaliza.<br>All Kinds of Everything<br />
All Rights Reserved.</p>
</div>

Then add the following to a new line at the bottom of your stylesheet. You can adjust things as needed in this bit of code.

#copyright {
background-color: #ffffff;
border: 1px solid #d04970;
width: 50%;
margin-left: auto;
margin-right: auto;
color: #d04970;
font-size: 15pt;
font-style: bold;
text-align: center;
}

[Shaliza]

Hello Nscalerr,

Thanks so much for that coding, it worked great for the copyright notice.  

Is there anyway I can move the footer (with PB link) a little below the Affiliate table and have it boxed too, like in the site below:

skunk-n-skwerl.freeforums.net

[Beckea]

Shaliza ,

Pepe uses border (for the boxed look) , background-color, margins and padding-bottom -- -- what theme are you viewing over there I can take a look and see what they are using for sure? I actually do something similar on my forum.

[Nscalerr]

Here you go Shaliza. Don't reduce the width below 55%!!! The margin-top can be changed to what you want.

/* Move Footer */
.c-footer {
   background-color: rgba(250, 250, 250, 0.5);
   border: 1px solid #000000;
   width: 55%;
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
}

[Shaliza]

Hello Nscalerr

That worked great to help box in the footer. Thanks so much for the help as always.

I have another question though... sorry...   How do I add space in between the footer box and copyright box? Right now they are sitting one on top of the other? 

Also, how would I switch the positions so that the Copyright Box is on top of the footer?

Sorry for all the questions and thanks again for all your help and patience.  

[Nscalerr]

Hi Shaliza

Good to hear. Would it be possible to copy and paste your Forum Wrapper template, (as is) and paste it here, so I can see what is going on.

[Shaliza]

Hello Nscalerr

Was I supposed to add the footer coding to the Style Sheet or Forum Wrapper template? I added it to the Style Sheet so that might be the issue. 

This is what I have in my Forum Wrapper Template:


  $[footer]
               
<div id="copyright" class="center copyright">
<p>©2014 - 2020<br />
Theme created by Shaliza.<br>All Kinds of Everything<br />
All Rights Reserved.</p>
</div>
       </div>
           
{if $[is_mobile_browser]}<br /><p class="center">Switch to the $[mobile_switch_link].</p>{/if}
           </div>
</body>
</html>

Thanks again.  

[Nscalerr]

I was hoping to have the complete template, but for now move the following code above the $[footer]

<div id="copyright" class="center copyright">
<p>©2014 - 2020<br />
Theme created by Shaliza.<br>All Kinds of Everything<br />
All Rights Reserved.</p>
</div>

[Retread]

Feb 9, 2020 23:32:01 GMT -8 Shaliza said:

I have another question though... sorry...   How do I add space in between the footer box and copyright box? Right now they are sitting one on top of the other? 

Hey Shaliza , whenever you want to add some vertical space between two elements, you can to the bottom margin of the top element or to the top margin of the bottom element. Or a little of both. More on that in a moment.

Feb 9, 2020 23:32:01 GMT -8 Shaliza said:

Also, how would I switch the positions so that the Copyright Box is on top of the footer?

Nscalerr 's recommendation on altering the contents of your Forum Wrapper should work just fine for that. After you do that, you'll find the vertical space between the Copyright Box and the Footer below it should be just fine.

But now the Copyright Box will be butted right up to the Affiliate section above it.

So go back to your Style Sheet and at the bottom you'll find this line:
#copyright{background-color:#e1eecf;border:1px solid #d04970;width:30%;margin-left:auto;margin-right:auto;color:#d04970;font-size:20pt;font-style:bold;text-align:center;}


Edit that line to add a specification for margin-top. (You can add it anywhere with the {} braces, but we'll choose to add it at the very end.) Like this:
#copyright{background-color:#e1eecf;border:1px solid #d04970;width:30%;margin-left:auto;margin-right:auto;color:#d04970;font-size:20pt;font-style:bold;text-align:center;margin-top:10px;}


Adjust the 10px value to suit your tastes.

[Shaliza]

Hello Nscalerr and Retread

As always, thank you so much for the information and the coding help. I really appreciate it.

This is the full coding in my Layout Template for the default theme:


<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span><span class="cust_greet"></span> $[current_user.name].</span>  $[logout_link]
{/if}
</p>
</div>
</header>

$[participated_threads_link]

{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}

$[header]

<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>

         
$[footer]
           
<div id="copyright" class="center copyright">
<p>©2014 - 2020<br />
Theme created by Shaliza.<br>All Kinds of Everything<br />
All Rights Reserved.</p>
</div>
                   
</div>            
{if $[is_mobile_browser]}<br /><p class="center">Switch to the $[mobile_switch_link].</p>{/if}
           </div>
</body>
</html>



I tried to move the Copyright notice above the footer, but then it became wedged between the forum and the Affiliate Table, so I had to go back to having it below the footer. Not sure if this was meant to happen?

I did end up adding upper margins of 20 px for both the Copyright box and the Footer in The Style Sheet and that seems to have worked, so I guess I will stay with this arrangement for now and edit each theme slowly by surely. 

Thanks again for all the help. I really welcome the chance to learn new things like this and you guys are just awesome!  

[Nscalerr]

Hi Shaliza

This is the wrapper template you posted, minus the coding error in it.

<!DOCTYPE HTML>
$[tag.html.open]
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <title>$[title] | $[forum.name]</title>
   $[head]
</head>
<body>
   {if $[maintenance_mode]}
   <div class="maintenance-header">
       {if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
   </div>
   {/if}
   <div id="wrapper">
       <header>
           <div id="banner-container" role="banner">
               <h2 id="banner">
                   $[forum.title]
               </h2>
           </div>
           <a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
           <a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
           <div id="navigation-menu" class="ui-helper-clearfix">
               <ul role="navigation">
                   {foreach $[navigation.menu]}
                   <li>
                       <a {if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
                           $[navigation.menu.name]
                           {if $[navigation.menu.notification.total]}
                           <div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
                               <div class="tip-number">$[navigation.menu.notification.total]</div>
                               <span class="tip"></span>
                           </div>
                           {/if}
                       </a>
                   </li>
                   {/foreach}
               </ul>
               <p id="welcome">
                   {if !$[current_user.is_member]}
                   Welcome Guest.
                   {if $[login_link] || $[register_link]}
                   Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
                   {/if}
                   {else}
                   <span><span class="cust_greet"></span> $[current_user.name].</span>  $[logout_link]
                   {/if}
               </p>
           </div>
       </header>

       $[participated_threads_link]

       {if $[navigation.tree]}
       <div id="navigation-tree">
           $[navigation.tree]
       </div>
       {/if}

       $[header]

       <div id="content" role="main">
           {if $[notice]}
           <div class="container">
               <div class="title-bar"><h2>$[notice.title]</h2></div>
               <div class="content pad-all cap-bottom">
                   $[notice.message]
               </div>
           </div>
           {/if}
           $[content]
           $[shoutbox]
       </div>

       $[footer]
           
       <div id="copyright" class="center copyright">
           <p>©2014 - 2020<br />
               Theme created by Shaliza.<br>All Kinds of Everything<br />
               All Rights Reserved.</p>
       </div>
   </div>

   {if $[is_mobile_browser]}<br /><p class="center">Switch to the $[mobile_switch_link].</p>{/if}

</body>
</html>

[Shaliza]

Thanks again, Nscalerr. All the assistance is greatly appreciated.