Former Member
inherit
guest@proboards.com
222576
0
Apr 18, 2024 13:30:28 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on May 8, 2016 13:28:53 GMT -8
Hi ya'll probeats.proboards.comCould someone make my banner stay in place as you scroll up so it goes behind the main board pls if this is possible. The theme i'v used is odd ( to me ) the banners at the top of the css like this, i just thought it might be easier knowing its like this idk Thank you Could even have it blur away as you scroll up if this is possible also /* Smangii's Border Around Forum with Images */ border _width: 850px; #borderBody { margin: 0 auto; width: border _width; background: url(' http://i1268./jj577/ted_holmes1/O9vTLwE_zps4enaawiv.gif ' ) center repeat-y; } #borderHead{ margin: 0 auto; display: block; width: 877 border _width; height: 242px; background: url(' http://i1268./jj577/ted_holmes1/T2TQFIs_zpsqdnhmcbd.gif ') center no-repeat; } #borderFoot{ margin: 0 auto; display: block; width: border _width; height: 100px; background: url('add footer image url here') center no-repeat; }
|
|
Former Member
inherit
guest@proboards.com
222576
0
Apr 18, 2024 13:30:28 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on May 14, 2016 2:51:38 GMT -8
bump
|
|
Former Member
inherit
guest@proboards.com
222576
0
Apr 18, 2024 13:30:28 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on May 17, 2016 23:04:24 GMT -8
bump
|
|
Former Member
inherit
guest@proboards.com
222576
0
Apr 18, 2024 13:30:28 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on May 20, 2016 6:08:20 GMT -8
bump
I have a hover banner code if this makes it easier, i don't know if this is it all though sorry.
<div id="banner-container" role="banner" style="height:200px;background-image:url('XXXXXXXXXXXXXXXXX');"> <div class="bannerhover">
<img src="XXXXXXXXXXXXXXXXXXXX" />
</div> </div>
|
|
Former Member
inherit
guest@proboards.com
222576
0
Apr 18, 2024 13:30:28 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on May 23, 2016 7:18:43 GMT -8
bump
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on May 23, 2016 10:26:14 GMT -8
Having a hover code doesn't make it easier. I'd need to see your site or the hover you are using. If I were to do this, I'd have to ditch the border code you have and make a new one and it won't be a plugin but a template change. I need to know if your banner is the same size as your forum. And also, I borrowed your image and made it fade behind the forum. Take a look and tell me if that is what you had in mind. putteraround5.proboards.com/
|
|
Former Member
inherit
guest@proboards.com
222576
0
Apr 18, 2024 13:30:28 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on May 23, 2016 11:08:31 GMT -8
Having a hover code doesn't make it easier. I'd need to see your site or the hover you are using. If I were to do this, I'd have to ditch the border code you have and make a new one and it won't be a plugin but a template change. I need to know if your banner is the same size as your forum. And also, I borrowed your image and made it fade behind the forum. Take a look and tell me if that is what you had in mind. putteraround5.proboards.com/ok first off wow!! thats exactly what i want Ok well the code above was just an example from an old site, so my forum width is 771px and this is the top of my css where the banner img is. /* Smangii's Border Around Forum with Images */ border_width: 850px; #borderBody {border-style: solid; border-top: thick double #ffffff; margin: 0 auto; width: 833px; background: url('http://i1268./jj577/ted_holmes1/O9vTLwE_zps4enaawiv.gif ' ) center repeat-y; } #borderHead{ margin: 0 auto; display: block; width: 877 border_width; height: 662px; background: url(' http://i1268./jj577/ted_holmes1/T2TQFIs_zpsqdnhmcbd.gif ') center no-repeat; } #borderFoot{ margin: 0 auto; display: block; width: border_width; height: 100px; background: url('add footer image url here') center no-repeat; }
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on May 23, 2016 15:27:26 GMT -8
Having a hover code doesn't make it easier. I'd need to see your site or the hover you are using. If I were to do this, I'd have to ditch the border code you have and make a new one and it won't be a plugin but a template change. I need to know if your banner is the same size as your forum. And also, I borrowed your image and made it fade behind the forum. Take a look and tell me if that is what you had in mind. putteraround5.proboards.com/ok first off wow!! thats exactly what i want Ok well the code above was just an example from an old site, so my forum width is 771px and this is the top of my css where the banner img is. /* Smangii's Border Around Forum with Images */ border _width: 850px; #borderBody {border-style: solid; border-top: thick double #ffffff; margin: 0 auto; width: 833px; background: url('http://i1268./jj577/ted_holmes1/O9vTLwE_zps4enaawiv.gif ' ) center repeat-y; } #borderHead{ margin: 0 auto; display: block; width: 877 border _width; height: 662px; background: url(' http://i1268./jj577/ted_holmes1/T2TQFIs_zpsqdnhmcbd.gif ') center no-repeat; } #borderFoot{ margin: 0 auto; display: block; width: border _width; height: 100px; background: url('add footer image url here') center no-repeat; } I'm glad you saw it working because I screwed something up and it's not working at the moment. lol (Don't worry, I'm sure it is something stupid I'm overlooking and I'll fix it) But you said you have a hover code. What kind of hover code?
|
|
Former Member
inherit
guest@proboards.com
222576
0
Apr 18, 2024 13:30:28 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on May 23, 2016 16:11:25 GMT -8
ok first off wow!! thats exactly what i want Ok well the code above was just an example from an old site, so my forum width is 771px and this is the top of my css where the banner img is. /* Smangii's Border Around Forum with Images */ border _width: 850px; #borderBody {border-style: solid; border-top: thick double #ffffff; margin: 0 auto; width: 833px; background: url('http://i1268./jj577/ted_holmes1/O9vTLwE_zps4enaawiv.gif ' ) center repeat-y; } #borderHead{ margin: 0 auto; display: block; width: 877 border _width; height: 662px; background: url(' http://i1268./jj577/ted_holmes1/T2TQFIs_zpsqdnhmcbd.gif ') center no-repeat; } #borderFoot{ margin: 0 auto; display: block; width: border _width; height: 100px; background: url('add footer image url here') center no-repeat; } I'm glad you saw it working because I screwed something up and it's not working at the moment. lol (Don't worry, I'm sure it is something stupid I'm overlooking and I'll fix it) But you said you have a hover code. What kind of hover code? this one
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on May 23, 2016 21:44:16 GMT -8
I'm glad you saw it working because I screwed something up and it's not working at the moment. lol (Don't worry, I'm sure it is something stupid I'm overlooking and I'll fix it) But you said you have a hover code. What kind of hover code? this one That's just the html. So there is a image that appears when you hover over the current image. Bit confused. Can you pm me your forum link so I can take a look at what css there might be with that. Alrighty, @joecool111 , thanks for the pm with the info and how you want your banner. I shall see what I can do. Meanwhile, is there anything you want me to style in the hover part? (Not 100% sure I can get the hover and fade away to work well together, but I'll try.) Another thing, why do you even have the border around the forum? You whole background is just black so I don't see the point of it. The intent of a border looks like this.... eltestsite1.proboards.com/ ...just surrounding the forum which is where I'm playing with this. But anyway, I have the banner fading and disappearing as you scroll using your wrapper template you pm'd me, but as I thought, I'm having difficulties getting the hover, to see some other content, to work. Too many z-indexes fighting each other since you also wanted the banner to like fade behind the the actual forum area. I'll take a fresh look tomorrow and see if I can figure it out.
|
|
Former Member
inherit
guest@proboards.com
222576
0
Apr 18, 2024 13:30:28 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on May 26, 2016 0:53:53 GMT -8
That's just the html. So there is a image that appears when you hover over the current image. Bit confused. Can you pm me your forum link so I can take a look at what css there might be with that. Alrighty, @joecool111 , thanks for the pm with the info and how you want your banner. I shall see what I can do. Meanwhile, is there anything you want me to style in the hover part? (Not 100% sure I can get the hover and fade away to work well together, but I'll try.) Another thing, why do you even have the border around the forum? You whole background is just black so I don't see the point of it. The intent of a border looks like this.... eltestsite1.proboards.com/ ...just surrounding the forum which is where I'm playing with this. But anyway, I have the banner fading and disappearing as you scroll using your wrapper template you pm'd me, but as I thought, I'm having difficulties getting the hover, to see some other content, to work. Too many z-indexes fighting each other since you also wanted the banner to like fade behind the the actual forum area. I'll take a fresh look tomorrow and see if I can figure it out. you know i'm not needing it to hover, how you've done it is perfect. I just gave you the hover banner because it went blurry, and thats what i wanted the blurry out effect, so i think i'v miss concepted 'hover' sorry. its good as it is thank you I'v no idea about the boarder, it was on the theme i used, the pekaboo sidebars was closed on default so you could see the border, but i changed them to open ..... there's method in my madness, my mom said so you can forget about the hover thank you.
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on May 26, 2016 7:41:21 GMT -8
Alrighty, @joecool111 . That's probably good since I wasn't very confident I could make the two work together.
Since you pm'd me your wrapper template, you have a copy of what you have now just in case something else on your forum makes this not work right. But here is the new wrapper template: (Delete everything in your wrapper template and paste the below in there to replace it)
<!DOCTYPE HTML> $[tag.html.open] <head>
<meta name="google-site-verification" content="9QFfCIcf6jfbk4CRevXqJaV3iXxj4GvBNWd5OcLKT_0" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>$[title] | $[forum.name]</title><meta name="description" content="World beats directory ... no need to register to submit !! " />
$[head]
<meta name="keywords" content="hiphop beats, free music promotion, totally music free promo, totally free music promotion, beatmakers, free beats, free hiphop beats, hiphop beats, cheap beats, free soundcloud promotion, free soundcloud promo, totally free soundcloud promo, totally free soundcloud promotion, totally free trap beats, free trap beats, free edm beats, totally free edm beats, how do i use twitter, how do i use facebook, how do i use soundcloud, instrumentals, free instrumentals, vocals, free vocals, totally free vocals, totally free instrumentals" /> {if $[route.name] == "home"} <meta property="og:description" content="Search all the hottest beats right here !! " /> {/if}
</head> <body>
<div id="fb-root"></div>
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
{if !$[current_user.is_member]} <style> .posts .post .content .controls ul li:nth-child(5){display:none!important;} .posts .post .content .controls ul li:nth-child(4) {display:none!important;} .posts .post .content .controls ul li:nth-child(1) {display:none!important;} </style> {/if}
{if $[maintenance_mode]} <div class="maintenance-header"> {if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if} </div> {/if} <center> <div id="banner-container" role="banner"> <div class="top"> <center> <img class="ban_fade" src="http://storage.proboards.com/3178116/i/NVUBw7LfyqScukiv3NIV.gif"> </center> </div> </div> </center>
<div id="forum_border"> <!-- Everything in the border after this --> <div id="wrapper"> <header>
<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>Welcome $[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]
<form method="get" action="http://www.google.com/search"target="_blank"> <div> <table border="0" align="center" cellpadding="0"> <tr><td> <input type="text" name="q" size="25" style="color:#ffffff;" maxlength="255" value="Google all sellers in this system ... " onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/> <input type="submit" value="Go!" /> <input type="hidden" name="sitesearch" value="probeats.proboards.com" /></td></tr> </table> </div><br /></form> <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] <img src="http://i1268./jj577/ted_holmes1/gzVXNF6_zps3qcoadtu.gif" title="Sellers submit to the directory above"> $[shoutbox] </div> $[footer] </div>
<!-- Everything in the border before this --> </div>
{if $[is_mobile_browser]} <br /><p class="center">Switch to the $[mobile_switch_link].</p> {/if}
<center> <a href="http://goldenbeatz.uk"/><font color="#2A3A4A">Unsigned artists</font></center>
</body> </html>
<script> $(window).scroll(function(){ $(".top").css("opacity", 1 - $(window).scrollTop() / 250); }); </script>
And this is the css to be added to the bottom of your style sheet (or you can add style tags around it and just put it in your wrapper template):
/*banner fixed and fade*/ .top {position:relative;top:237px; width: 763px;height: 236px; opacity: 1;text-align: center; margin-right:auto!important; margin-left:auto!important; z-index:-1; } .ban_fade{position: fixed; top:0px;left: 50%; transform: translate(-50%, 0); width: 796px; height: 236px; } #forum_border{ width:780px;margin:auto;background-color:black;padding:8px; }
On my test site I have the wrapper width at 771px which I think is what you have yours at.
Also on a side note, I noticed your banner had some pixels missing in the top right corner so I fixed that and added just a bit more black to make the width of your banner work with your forum width/width of the border. You should re-upload it to your host when you get a chance.
I also kind of ditched the border code you used too and simplified it. I have my fingers crossed it all goes well because you do have a lot of modifications elsewhere.
|
|
Former Member
inherit
guest@proboards.com
222576
0
Apr 18, 2024 13:30:28 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on May 26, 2016 8:16:05 GMT -8
Tumbleweed Ok it works but i'm not sure what you've done about other things, the borders dissperared, but i actually like it like that. before i had the image in the middle and the banner area tall so the boards got pushed out of view when you first see the site. and i put this in the header of a board so it was small and back to normal. the tall banner is just for the home page. and the image in the middle. <style>#borderHead{ margin: 0 auto; display: block; width: 877 border_width; height: 259px; background: url(' http://i1268./jj577/ted_holmes1/T2TQFIs_zpsqdnhmcbd.gif ') center no-repeat;!important }</style> And you said you changed the img ? where is it ? because its in my css atm and always has been.
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on May 26, 2016 8:38:41 GMT -8
Tumbleweed Ok it works but i'm not sure what you've done about other things, the borders dissperared, but i actually like it like that. before i had the image in the middle and the banner area tall so the boards got pushed out of view when you first see the site. and i put this in the header of a board so it was small and back to normal. the tall banner is just for the home page. and the image in the middle. <style>#borderHead{ margin: 0 auto; display: block; width: 877 border _width; height: 259px; background: url(' http://i1268./jj577/ted_holmes1/T2TQFIs_zpsqdnhmcbd.gif ') center no-repeat;!important }</style> And you said you changed the img ? where is it ? because its in my css atm and always has been. Oh, whoops, sorry, I posted the wrapper template before I changed the image and forgot to edit what I posted with the new image: Here it is although, with your body background black, it doesn't really matter although it may look nicer with a bit more black on the left side. storage.proboards.com/3178116/i/msXpugKB2ZFfwOXYEYnU.pngI'm not surprised we ran into problems since I didn't know what all you altered in different areas and didn't know you have two different "styles" for the banner area. Also what borders disappeared? I did notice you a sort of rounded border with a touch of white that I think was around your boards but don't see it now on your site, however, they never showed up on my test site so not sure what happened there. Is that what you mean by disappearing border? So regarding the banner being more in the middle of the screen (lower down) on the home page but then in the regular spot when viewing boards, I'm not sure how you changed that in the first place so give me a bit to try to work out how to do that.
|
|
Former Member
inherit
guest@proboards.com
222576
0
Apr 18, 2024 13:30:28 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on May 26, 2016 8:39:32 GMT -8
iv done it. i think ... brb
|
|