inherit
200292
0
Feb 19, 2016 22:51:40 GMT -8
Shaliza
"Laughter is timeless, imagination has no age, and dreams are forever." - Walt Disney
545
September 2013
shaliza
|
Post by Shaliza on Feb 8, 2020 19:39:37 GMT -8
Hello: I have a question about the footer and copyright notice on my forum. URL: allkindsofeverything.boards.netI 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.
|
|
inherit
140147
0
Oct 31, 2024 0:06:43 GMT -8
Nscalerr
Throw me to the wolves and I'll return leading the pack!
3,043
May 2009
nscalerr
|
Post by Nscalerr on Feb 8, 2020 20:16:33 GMT -8
Hi ShalizaI 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>
|
|
inherit
200292
0
Feb 19, 2016 22:51:40 GMT -8
Shaliza
"Laughter is timeless, imagination has no age, and dreams are forever." - Walt Disney
545
September 2013
shaliza
|
Post by Shaliza on Feb 8, 2020 20:37:03 GMT -8
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.netThough 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.
|
|
inherit
140147
0
Oct 31, 2024 0:06:43 GMT -8
Nscalerr
Throw me to the wolves and I'll return leading the pack!
3,043
May 2009
nscalerr
|
Post by Nscalerr on Feb 8, 2020 21:22:12 GMT -8
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; }
|
|
inherit
200292
0
Feb 19, 2016 22:51:40 GMT -8
Shaliza
"Laughter is timeless, imagination has no age, and dreams are forever." - Walt Disney
545
September 2013
shaliza
|
Post by Shaliza on Feb 8, 2020 21:57:37 GMT -8
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
|
|
inherit
76165
0
Jul 1, 2018 21:15:48 GMT -8
Beckea
Relax with a good book!
933
April 2006
purplescraps
|
Post by Beckea on Feb 8, 2020 22:26:47 GMT -8
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.
|
|
inherit
140147
0
Oct 31, 2024 0:06:43 GMT -8
Nscalerr
Throw me to the wolves and I'll return leading the pack!
3,043
May 2009
nscalerr
|
Post by Nscalerr on Feb 8, 2020 22:36:02 GMT -8
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; }
|
|
inherit
200292
0
Feb 19, 2016 22:51:40 GMT -8
Shaliza
"Laughter is timeless, imagination has no age, and dreams are forever." - Walt Disney
545
September 2013
shaliza
|
Post by Shaliza on Feb 9, 2020 23:32:01 GMT -8
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.
|
|
inherit
140147
0
Oct 31, 2024 0:06:43 GMT -8
Nscalerr
Throw me to the wolves and I'll return leading the pack!
3,043
May 2009
nscalerr
|
Post by Nscalerr on Feb 9, 2020 23:36:39 GMT -8
Hi ShalizaGood 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.
|
|
inherit
200292
0
Feb 19, 2016 22:51:40 GMT -8
Shaliza
"Laughter is timeless, imagination has no age, and dreams are forever." - Walt Disney
545
September 2013
shaliza
|
Post by Shaliza on Feb 9, 2020 23:46:31 GMT -8
Hello NscalerrWas 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.
|
|
inherit
140147
0
Oct 31, 2024 0:06:43 GMT -8
Nscalerr
Throw me to the wolves and I'll return leading the pack!
3,043
May 2009
nscalerr
|
Post by Nscalerr on Feb 10, 2020 1:00:55 GMT -8
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>
|
|
inherit
252032
0
Apr 26, 2024 23:51:41 GMT -8
Retread
Tribbial Pursuit.
5,017
January 2018
retread
|
Post by Retread on Feb 10, 2020 7:27:17 GMT -8
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. 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.
|
|
inherit
200292
0
Feb 19, 2016 22:51:40 GMT -8
Shaliza
"Laughter is timeless, imagination has no age, and dreams are forever." - Walt Disney
545
September 2013
shaliza
|
Post by Shaliza on Feb 11, 2020 22:04:06 GMT -8
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!
|
|
inherit
140147
0
Oct 31, 2024 0:06:43 GMT -8
Nscalerr
Throw me to the wolves and I'll return leading the pack!
3,043
May 2009
nscalerr
|
Post by Nscalerr on Feb 12, 2020 1:14:02 GMT -8
Hi ShalizaThis 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>
|
|
inherit
200292
0
Feb 19, 2016 22:51:40 GMT -8
Shaliza
"Laughter is timeless, imagination has no age, and dreams are forever." - Walt Disney
545
September 2013
shaliza
|
Post by Shaliza on Feb 14, 2020 21:45:43 GMT -8
Thanks again, Nscalerr. All the assistance is greatly appreciated.
|
|