3 boxes at top of forum

[Former Member]

Hi,

I was wondering how I could add 3 boxes right above the first category and below the advertisement? (either below or above the ad, can't decide yet) Also, three boxes would be side by side? just an HTML box, if that's possible?

[Former Member]

Is it possible to get them side by side?

[Tumbleweed]

Jun 28, 2017 7:11:09 GMT -8 @tumbler said:

Hi,

I was wondering how I could add 3 boxes right above the first category and below the advertisement? (either below or above the ad, can't decide yet) Also, three boxes would be side by side? just an HTML box, if that's possible?

Tumbler, I did a simple flex box and it's on the same site I was doing that template for you. abetteramerica.freeforums.net/
I did it as a plugin because there isn't any javascript involved and if put in the header of the plugin puts the box right below the ad but above the newsfeeder if you are using it but if you aren't using the newsfeeder it is right about the first category. The reason I did a plugin (and I can just tell  you how to do it yourself)  is because there would be only one place to edit the content and css and it will change on all themes without having to go add it to each theme.

It's very basic but is that enough to get you started?

Edit: I goofed up the css while you were posting and quick deleted my post hoping you wouldn't see it while I went and found what I jacked up. They are side by side now. lol
I don't know if you wanted a title area so that could go if you want.

[Former Member]

Onnneee last thing: Can you add a little spacing between each one? Thank you so much
Also I guess I won't need the title

And haha, happens to me too

[Former Member]

Actually, nevermind - I think I know how to do it (I mean the spacing) Thank you so much

[Tumbleweed]

I spaced them for you. So all you have to do is go to Plugins>Build and then you'll see a spot that says "Create a New Plugin". Click on that and there will be a place to name your plugin. You could name it whatever but Top Flex Boxes would would be an example. Once you have it named you'll see some tabs. Click on "Components". On the right you'lll see things like CSS, Javascript, Gobal, Main, etc. Click on the CSS and a textarea should open up.

So this is the css that goes in that textarea:



.my_box_wrapper {display:none;
display: -webkit-box;
display: -moz-box ;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
margin:0 auto;
width:100%;
-webkit-justify-content:space-between;
}
.my_box_wrapper > * {
padding: 10px;
flex: 1 100%;
}
.aside aside-1 {
max-width: 100%;
}
.aside aside_middle {
max-width: 100%;
}
.aside aside-2 {
max-width: 100%;
}
@media all and (min-width: 900px) {
 .aside { flex: 1 auto; }
}
@media all and (min-width: 900px) {
.aside aside_1{order:1;}
.aside aside_middle{ order: 2; }
.aside-2{ order: 3; }
}
p.style_it{background-color:#aaaaaa;border:1px solid black;padding:8px;margin:1px;
}

Next to add the html part where you'll put your content. Now on the right you can pick any of the options:Gobal(will show on all pages), Main (will show only on the main page) or a board where it will only show on that board. I used the main for mine but click on either main or global and another textarea will open up, one for the headers and one for the footers. Past this html in that header portion of those textareas.

<div class="my_top_boxes">    
<div class="my_box_wrapper">
    <div class="aside aside-1"><p class="style_it">Left Side Content</p></div>
  <div class="aside aside_middle"><p class="style_it">Middle Content</p></div>
      <div class="aside aside-3"><p class="style_it">right side Content</p></div>
</div>
</div>

Now save your plugin.

Now for styling it more, you want to use this part.... (it's in the css I posted above)

p.style_it{background-color:#aaaaaa;border:1px solid black;padding:8px;margin:2px;
}

If you want your flex boxes to stack only on like a mobile phone then change the 900px in these to sections to a lower number: (it's 640px for an IPhone, for example)
You can test out the stacking just by shrinking your window.

media all and (min-width: 900px) {
.aside { flex: 1 auto; }
}
media all and (min-width: 900px) {
.aside aside_1{order:1;}
.aside aside_middle{ order: 2; }
.aside-2{ order: 3; }
}

Let me know how it goes.

[Former Member]

It works, but when it gets too long it'll act really weird like seen on my forum dragonology.boards.net

[Former Member]

Oops, forgot to disable maintnence mode. Done

[Tumbleweed]

You had a lot of errors in what you added and I fixed that. You aren't going to be able to use outdated styles in this. Adding center tags in side breaks it. I added the font size and center stuff you were aiming for by what I could see to the classes. Here is what your first box should look like starting with the p tags:
If you were trying to add a image it needs a image extension like png, gif or jpeg.


<p class="style_it">

<img src="http://tumblingtests.boards.net/attachment/download/11" alt="dragonology"/><br/><br/>

Dragonology is a post-play roleplay set back in time with castles and dragons. There is a large kingdom with marketing, laws and battles going on. But outside those walls? DRAGONS. Dragons of every size and shape, appearence and personality. Epic battles often occur, fires break out...Will you become an epic dragon slayer, or an undefeatable firey beast?


Welcome to the world of DRAGONOLOGY
   <br/>
<a href="https://login.proboards.com/login/6625337" class="norewrite">Login</a>
<a href="https://login.proboards.com/register/6625337" class="norewrite">Register</a>
 

</p>    


And just replace your css with this:


.my_box_wrapper {display:none;
display: -webkit-box;
display: -moz-box ;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
margin:0 auto;
width:100%;
/*-webkit-justify-content:space-between;*/
flex-wrap: nowrap;
align-items: top;
justify-content: center;
}
.my_box_wrapper > * {
padding: 10px;
flex: 1 100%;
}
.aside aside-1 {
max-width:100%;
}
.aside aside_middle {
max-width:100%;
}
.aside aside-2 {
max-width:100%;
}
@media all and (min-width: 900px) {
 .aside { flex: 1 auto; }
}
@media all and (min-width: 900px) {
.aside aside_1{order:1;}
.aside aside_middle{ order: 2; }
.aside-2{ order: 3; }
}
p.style_it{background-color:#aaaaaa;border:1px solid black;padding:8px;margin:2px; font-size:12px;text-align: center;
}


If you need more help doing some of this stuff just ask because this flex stuff is different.

Oh, if you want your font size different change the blue:


p.style_it{background-color:#aaaaaa;border:1px solid black;padding:8px;margin:2px; font-size:12px;text-align: center;

}

[Former Member]

Tried that one and works better, but now it fills up the whole page instead of staying in its box (same link above)

[Tumbleweed]

Jun 30, 2017 5:59:18 GMT -8 @tumbler said:

Tried that one and works better, but now it fills up the whole page instead of staying in its box (same link above)

Tumbler, I don't see any of the rest of the flex box stuff on that site. 

This is what you should have in the plugin, if you are using a plugin:



<div class="my_top_boxes">    
<div class="my_box_wrapper">
    <div class="aside aside-1">
           <p class="style_it">
               <img src="http://tumblingtests.boards.net/attachment/download/11" alt="dragonology"/><br/><br/>

Dragonology is a post-play roleplay set back in time with castles and dragons. There is a large kingdom with marketing, laws and battles going on. But outside those walls? DRAGONS. Dragons of every size and shape, appearence and personality. Epic battles often occur, fires break out...Will you become an epic dragon slayer, or an undefeatable firey beast?


Welcome to the world of DRAGONOLOGY
   <br/>
<a href="https://login.proboards.com/login/6625337" class="norewrite">Login</a>
<a href="https://login.proboards.com/register/6625337" class="norewrite">Register</a>
           </p>
       </div>
  <div class="aside aside_middle">
           <p class="style_it">
               Middle Content
           </p>
       </div>
      <div class="aside aside-3">
           <p class="style_it">
               right side Content
           </p>
       </div>
</div>
</div>




But just in case you still have trouble with it I'm going to give you an alternative old fashioned table that you can use your old style tags in if you want.
And you can do this just like the flex table if you want it as a plugin. Just put the html in the main or global header part and then the styles in the css part.

Alternative to the above flex boxes so if you use this, it replaces everything I gave you before.

The HTML

<div id="top_table">
<table>
    <tr>
        <td>
<div class="style_it">

<img src="http://tumblingtests.boards.net/attachment/download/11" alt="dragonology"/><br/><br/>

                <div class="tt_content">                

Dragonology is a post-play roleplay set back in time with castles and dragons. There is a large kingdom with marketing, laws and battles going on. But outside those walls? DRAGONS. Dragons of every size and shape, appearence and personality. Epic battles often occur, fires break out...Will you become an epic dragon slayer, or an undefeatable firey beast?
Welcome to the world of DRAGONOLOGY
</div>
                   
   <br/><br/>
<a href="https://login.proboards.com/login/6625337" class="norewrite">Login</a>
<a href="https://login.proboards.com/register/6625337" class="norewrite">Register</a>
 

</div>    
</td>
        <td>
<div class="style_it">
               
<div class="tt_content">    
                   
                   
Content for middle
                   
                   
                </div>
            </div>
           
        </td>
        <td>
       
<div class="style_it">
               
<div class="tt_content">
                   
Content for right  
                   
            </div>
</div>        
        </td>
    </tr>
</table>
</div>

And the alternative css:

#top_table{margin:auto;width:100%;}
#top_table td{width:33%;vertical-align:top;text-align:center;font-size:11px;}
.style_it{padding:8px;margin:8px;background-color:#aaaaaa;color:black;}
.tt_content{text-align:justify;}


Hopefully one of those will work for you.

[Former Member]

I LOVE IT! Thank you soo much!!

[Tumbleweed]

You're welcome.

[Former Member]

Hey, I have a quick question: How can I delete 2 of the containers? Tried and it glitched up

Also, sorry to bump this but...Is it possible to make one long container with tabs on top, and when clicked changes the text inside, like Forum Settings in Admin?

[Tumbleweed]

Here is a very basic tabbed table you can see on the same test site I did your board layout.

This is the html and jquery and you can just put this to replace the other table:

<div id="tabbed_table1">            
<!-- the tabs -->
<ul class="tabs1">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
   <li><a href="#">Tab 4</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes1">
<div>Table one Tab 1 content</div>
<div style="display:none;">Table one Tab 2 content</div>
<div style="display:none;">Table one Tab 3 content</div>
   <div style="display:none;">Table one Tab 4 content</div>
</div>
</div>            
<script>
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
   $("ul.tabs1").tabs("div.panes1 > div");
});
</script>


And the css to go at the bottom of your style sheet:
/*tabbed table css*/
#tabbed_table1{position:relative;margin:auto;width:900px; height:184px;    
}
.tabs1 li{display:inline;}
.tabs1 a {
background-color: @title_bar_background_color; background-image: @title_bar_background_image;
font-size:11px!important;border: 1px solid @container_outer_border_color;
-webkit-border-top-right-radius: 5px!important;
-webkit-border-top-left-radius: 5px!important;
-moz-border-radius-topleft:5px!important;
-moz-border-radius-topright:5px!important;
bordertop-left-radius:5px;
border-top-right-radius:5px;
text-align:center;
margin: 0px 4px -4px 0px!important;
padding:4px 8px 4px 8px;
transition: background 0.5s linear;
}
.tabs1 a:hover{color:white;background-color:gray;}
.tabs1 .current,.tabs1 .current:hover,.tabs1 li.current a{cursor:default !important;color:#000 !important;
}
.panes1{position:absolute;top:18px;left:0px;
width:884px;height:140px;
background-color: @container_background_color_2;
border: 1px solid @container_outer_border_color;
padding:8px;
}