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 15, 2020 21:17:54 GMT -8
Hello again... I have yet another question which has to do with adding a background image to the footer/copyright notice since some of my themes have this. This is the coding in my Style Sheet: /* Move Footer */
.c-footer {
background-color: rgba(250, 250, 250, 0.5);
border: 1px solid #000000;
width: 55%;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
#copyright {
background-image: scroll url('https://village.photos/images/user/8b71678b-f386-41ca-b2a6-41bd3ed56de3/1cc73ae6-7ac0-435d-9996-2a8f4f36c06a.jpg');
border: 1px solid #d04970;
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
color: #d04970;
font-size: 15pt;
font-style: bold;
text-align: center;
}
I already have the footer image in my Visual Editor, so the above coding works great for the boxed footer with a background image. However, I can't seem to get the boxed copyright notice with the same background image as the footer with the above coding. I also had to remove the copyright background image from the Forum Wrapper Layout Template since it stretched the whole length of the forum and wouldn't allow me to add a box. So this is what I have in my Forum Wrapper now... <!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 class="center">
<div style="background-image:">
<div class="copyright">
<center>
<p class="bold">
<font size="4" color="514628">©2014 - 2020
<br />Theme created by Shaliza.<br />
All Kinds of Everything<br>All Rights Reserved.
</font>
</p>
</center>
</div>
{if $[is_mobile_browser]}<br /><p class="center">Switch to the $[mobile_switch_link].</p>{/if}
</div>
</div>
</div>
</body>
</html>
Thanks so much for the help as always. I really appreciate it.  |
|
inherit
140147
0
Nov 19, 2024 5:07:22 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 15, 2020 21:51:43 GMT -8
Hi ShalizaYou had two closing divs in the wrong place, which have been corrected. Not sure about the other bit right now. <!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 class="center">
<div style="background-image:">
<div class="copyright">
<center>
<p class="bold">
<font size="4" color="514628">©2014 - 2020
<br />Theme created by Shaliza.<br />
All Kinds of Everything<br>All Rights Reserved.
</font>
</p>
</center>
</div>
</div>
</div>
{if $[is_mobile_browser]}<br /><p class="center">Switch to the $[mobile_switch_link].</p>{/if}
</div>
</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 15, 2020 22:22:08 GMT -8
Hello Nscalerr, Thanks so much for correcting the coding in my Forum Wrapper template. This is what my footer and copyright notice look like on the theme with a background image for both:  I am not sure how to code it so that the copyright notice looks like the footer with 20 px of space between the two boxes. |
|
inherit
140147
0
Nov 19, 2024 5:07:22 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 15, 2020 22:46:23 GMT -8
The margin-top: 20px; should make a space of 20px, but since it isn't, try changing it to margin-top: 40px; and see what happens.
#copyright {
background-image: scroll url('https://village.photos/images/user/8b71678b-f386-41ca-b2a6-41bd3ed56de3/1cc73ae6-7ac0-435d-9996-2a8f4f36c06a.jpg');
border: 1px solid #d04970;
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
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 15, 2020 23:18:10 GMT -8
Hello NscalerrI did try changing the top margin to 40 px and it wouldn't budge.  |
|
inherit
140147
0
Nov 19, 2024 5:07:22 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 15, 2020 23:30:29 GMT -8
We might have to bring in a bigger hammer then and add the !important to the css. Not the best solution, but I am running out of ideas. I assume you are viewing and working on the same theme ??
margin-top: 40px !important;
|
|
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 15, 2020 23:36:21 GMT -8
Hello again... Yes, I was working on the same theme... St. Patrick's Day. This is the first time I've attempted to box the footer/copyright when there's a background image present so I think that's what the problem is.  |
|
inherit
140147
0
Nov 19, 2024 5:07:22 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 15, 2020 23:43:15 GMT -8
Think I have just found the problem, you have <div class="copyright"> and the CSS is for an id. Solution, (is easy peasy), change <div class="copyright"> to <div id="copyright" class="copyright"> and set margin-top: 40px !important; back to margin-top: 20px; |
|
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 16, 2020 17:29:25 GMT -8
Hello NscalerrThanks so much for that coding, it did work well. Cheers! However, how do I get the background image in the Copyright to stay in the box without spanning the whole width of the forum? Right now it looks like this:  |
|
inherit
140147
0
Nov 19, 2024 5:07:22 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 16, 2020 18:34:49 GMT -8
Hi ShalizaJust need a slight change to the code. <div id="copyright" class="center">
<div style="background-image: url(http://village.photos/images/user/8b71678b-f386-41ca-b2a6-41bd3ed56de3/1cc73ae6-7ac0-435d-9996-2a8f4f36c06a.jpg)">
<div class="copyright">
<center>
<p class="bold">
<font size="5" color="514628">©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 16, 2020 20:50:54 GMT -8
Thanks a million, Nscalerr ! That worked really well. I can't thank you enough for all your help and for giving me the chance to learn all this cool, new stuff. *hugs* |
|
