Help making a header code and moving ads to footer

[destinyfc]

So I'm looking for some help coding a table next to my twitter feed on my forum. I'd like the box to sideshow 3 different sections, but enable me to change and edit what's on them when I need to.

My slides I want as 1 for upcoming schedules, 1 for champions and 1 for upcoming card.

On a related note I want to move the ads from header to the footer. How can I do that?

The link is here guerrerosoflucha.proboards.com/

Thanks!

[Tumbleweed]

Mar 15, 2016 2:53:36 GMT -8 destinyfc said:

So I'm looking for some help coding a table next to my twitter feed on my forum. I'd like the box to sideshow 3 different sections, but enable me to change and edit what's on them when I need to.

My slides I want as 1 for upcoming schedules, 1 for champions and 1 for upcoming card.

On a related note I want to move the ads from header to the footer. How can I do that?

The link is here guerrerosoflucha.proboards.com/

Thanks!

You can't move the ads. It is against ProBoards TOS as that is what pays for your free forum. As far as the table, you say slides, do you mean you want like tabs so you can click to see different content? Looking at your site, there really is only room for one section if you want it to stay the width of your forum. I can write up the coding you'll need, I just need to know more details.

[destinyfc]

Ah ok about the ads

I'd like it right next to my twitter feed.

The only thing I could say is its like a slide show that show different things in the one table at different times? Kinda what you see on yahoo and MSN news sites with their news if that makes sense?

It'd be one for champions. One slide to add the latest card and one slide for upcoming schedule.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Tumbleweed

[Tumbleweed]

Thanks P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ for tagging me.


destinyfc, Something like this? 


rockymountainair.proboards.com/


It's a simple fade in and out. (Top left box for your twitter feed and the right with rotating content)

[destinyfc]

exactly like that, i can't find an example on other boards about the slideshows but that style aye

[destinyfc]

bump incase

[Tumbleweed]

Sorry for the delay, kind of forgot about this.

You can either put this in your global header if you want it on all themes or you can put it in your wrapper template or even home template if you just want it showing on your main page only and on one theme. On my test site, I had it below the body tag in the wrapper template.




<style>
   #my_spec_box{
       width:1000px;
       height:100px;
       margin-right:auto;
       margin-left:auto;
   }
   #my_twitter_feed{
margin-right:4px;
       width:520px;
       height:200px;
       border:1px solid black;
       background-color:gray;
       margin:2px;
       float:left;
   }
   .boxes{
       width:400px;
       height:192px;
       font-size:12px;
       background-color:gray;
       padding:4px;
       border:1px solid black;
       margin:2px;
       float:left;
   }

</style>



<div id="my_spec_box">
<div id="my_twitter_feed">
Your Twitter Feed Here
</div>

<div class="boxes">
   <div class="fade-effect box1">Content 1 here</div>
   <div class="fade-effect box2" style="display:none;">Content 2 here</div>
   <div class="fade-effect box3" style="display:none;">Content 3 here</div>
</div>    
   
</div>
<p style="clear:both;"></p>





And the jquery which can go below the above code. In your wrapper template you can just stick it at the very bottom below all the other code that is already there.


<script>
   $(document).ready(function () {
   var allBoxes = $("div.boxes").children("div");
   transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
   function next() {
       var nextTo;
       if (to.is(":last-child")) {
           nextTo = to.closest(".boxes").children("div").first();
       } else {
           nextTo = to.next();
       }
       to.fadeIn(500, function () {
           setTimeout(function () {
               transitionBox(to, nextTo);
           }, 5000);
       });
   }
   
   if (from) {
       from.fadeOut(500, next);
   } else {
       next();
   }
}
</script>



You can of course style it any way you want and you may have to fiddle with the height and even width of things. Just don't make things to wide or you'll throw that second box below the first box. Any questions, just ask.

[destinyfc]

still fairly new to coding so how which section do I add the twitter account and is it just a user link that I do?

Also how do I add content after the titles are done in the boxes and can the styles be altered like font like normal posting?

[Tumbleweed]

Mar 23, 2016 8:02:01 GMT -8 destinyfc said:

still fairly new to coding so how which section do I add the twitter account and is it just a user link that I do?

Also how do I add content after the titles are done in the boxes and can the styles be altered like font like normal posting?

We were all new to coding at one time so no worries about not know things.

Just replace the bolded part with that whole bit twitter gives you:


<div id="my_spec_box">
<div id="my_twitter_feed">
Your Twitter Feed Here
</div>


So you want titles in the content boxes as well as regular content so it would look something like this?

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

[destinyfc]

yeah pretty much to list information such as cards. upcoming shows and champions i can list down the box

[destinyfc]

So this is it at the mo where the tweet box is covering some stuff. I'm not too sure if the tweet box can get moved further up or if theres a way to reduce the size of it? Appreciate all the time given!

guerrerosoflucha.proboards.com/

[Tumbleweed]

You can just do something like this and I'm using the first box:


<div class="fade-effect box1">
<h2>Title Here</h2><br>
Item one in list<br>
Item two in list<br>
Item three in list<br>
Item four in list<br>

</div>


I put h2 around the tile so you can style that so in your css above the </style> tag you could add this to style for the title and style it to your liking:

h2{font-size:12px;color:#ff0000;font-weight:bold;text-align:center;
}

If you want your list items to be a bit further apart, I can help with that as well.

[destinyfc]

some spacing, but not a lot, would be awesome

[Tumbleweed]

Mar 23, 2016 10:11:40 GMT -8 destinyfc said:

some spacing, but not a lot, would be awesome

Just add the red to any of your boxes you want a spaced list:

<div class="fade-effect box1">
<h2>Title Here</h2><br>
<div id="my_list">
Item one in list<br>
Item two in list<br>
Item three in list<br>
Item four in list<br>
</div>
</div>


And then add this to the bottom of your css above the </style> as you did with the other css you added. Change the line height to give it the spacing you need.

.my_list{line-height:20px;
}