Three coloumn div table

[isavarg]

I'd like a three column div table that matches the Fantasy Dreams layout and I'm not sure how to do it. I want it to look like this. I would like the headers of the table to match the headers of the category tables and the second row to match the colours of the board information boxes. Of course, the table itself needs to be as long as the main area of the board. (Is it possible to have a twitter plug in that automatically tweets links to new posts when they are made? That would be a good way of showing that the board is active.)

TWITTER FEED	ABOUT THE FORUM	STAFF
Row 2 column 1	Row 2 column 2	Row 2 column 3

[Tumbleweed]

Sept 24, 2016 1:46:39 GMT -8 isavarg said:

I'd like a three column div table that matches the Fantasy Dreams layout and I'm not sure how to do it. I want it to look like this. I would like the headers of the table to match the headers of the category tables and the second row to match the colours of the board information boxes. Of course, the table itself needs to be as long as the main area of the board. (Is it possible to have a twitter plug in that automatically tweets links to new posts when they are made? That would be a good way of showing that the board is active.)

TWITTER FEED	ABOUT THE FORUM	STAFF
Row 2 column 1	Row 2 column 2	Row 2 column 3

I couldn't find the Fantasy Dreams for reference here on Proboards but your example is pretty good. The question I have is do you want the title to go across the top with no breaks between and then three different titles or the way I have it on my test site here: putteraround.boards.net/
(You'll see the Twitter Title in the first column ) I can easily fix it if you want the title to span the whole width.

A couple things:
1. With V6 around the corner I discarded a traditional table and used float div's. I still have a bit to tweak on that but wanted your feedback before I proceed further.
(removed incorrect statement-)
2. If you really really want a table rather than div's, I can surely do that for you instead of the div route.

[Alanna 🥀🖤]

Tumbleweed, I would suggest flexbox rather than float but that's just me.

[Tumbleweed]

Sept 24, 2016 18:28:39 GMT -8 @khristian said:

Tumbleweed , I would suggest flexbox rather than float but that's just me.

Hey, I love the suggestion but I just haven't had time to learn that much about flexbox. (I know I should and I also know it isn't that hard to learn, from what I've seen) You are more than welcome to do one for isavarg if you want as I know it would be appreciated, if not by isavarg, but other members when V6 rolls out. You might want to wait though in case the OP really wants a table.

[Former Member]

<div class='row'>

  <div class='column container'>
     <div class='title-bar'>
        <h2>
              TITLE
        </h2>
     </div>
     <div class='content'>
         ...CONTENT
     </div>
  </div>

  <div class='column container'>
     <div class='title-bar'>
          <h2>
              TITLE
          </h2>
     </div>
     <div class='content'>
         ...CONTENT
     </div>
  </div>

  <div class='column container'>
     <div class='title-bar'>
        <h2>
           TITLE
        </h2>
     </div>
     <div class='content'>
         ...CONTENT
     </div>
  </div>

</div>

---

.row{
 width: 100%;
   
 display: -webkit-flex;
 display: -ms-flexbox; /** IE 10 **/
 display: -ms-flex; /** IE 11 **/
 display:flex;
   
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
 
 -webkit-justify-content: space-between;
 -ms-justify-content: space-between;
 justify-content: space-between;
   
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
   
 -webkit-align-items: stretch;
 -ms-align-items: stretch;
 align-items:stretch;
   
 .column{
   -webkit-flex: 0 0 33%;
   -ms-flex: 0 0 33%;
flex: 0 0 33%;
 
     
     
   &.container{
     margin: 1rem 0;
   }
     
 }
 @media only screen and (max-width: 60em) {
     .row{
       -webkit-flex-wrap: nowrap;
       -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
       margin: 1rem 0;
     }
     .column{
       -webkit-flex: 1 0 100%;
       -ms-flex: 1 0 100%;
       flex: 1 0 100%;
       margin: 1rem 0;
     }
   }
}



OR you could use a frontend framework to help you bootstrap and foundation are common choices.

[isavarg]

Thanks. That works how I wanted it to. The reason why I wanted it in the header rather than embedded in the template is because I don't like changing parts of the code anywhere else in case I delete something or accidentally change something I need to make the forum work. It's easier to fix or take out if I don't have lots of other code to worry about.

[Former Member]

Templates are the better option for this as it's easier to modify the code. If you wish to test out further modifications and are a little worried you might mess it up, you can also export the template first, then modify.

[Tumbleweed]

Thanks  @khristian and @synthtec . You both gave me a kick in the rear end to get to learning the ins and outs of flexbox. I'm reading and playing and will need more than a day to understand everything: putteraround.boards.net/ I'm famous for procrastinating learning certain things so again, thanks for the push.  And @synthtec , thanks so much for jumping in with a finished code. Much appreciated.

isavarg , That looks nice on your site. (Found your forum after a little post digging)

[Former Member]

Tumbleweed happy to help. Flex takes a bit of getting used to, just take your time until it clicks.

isavarg The columns are inside a table, this will prevent them from becoming responsive at the breakpoint.

[Former Member]

Hi, @synthtec

I really liked your three table column I had ago trying it on my test board tcptestingboard.boards.net/

adding the below on the style sheet  gave the error marked in Red
although it displayed the table OK on the home template


.row{
width: 100%;

display: -webkit-flex;
display: -ms-flexbox; /** IE 10 **/
display: -ms-flex; /** IE 11 **/
display:flex;

-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;

-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

-webkit-align-items: stretch;
-ms-align-items: stretch;
align-items:stretch;

.column{
-webkit-flex: 0 0 33%;
-ms-flex: 0 0 33%;
flex: 0 0 33%;

&.container{
margin: 1rem 0;
}

}
media only screen and (max-width: 60em) {
.row{
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
margin: 1rem 0;
}
.column{
-webkit-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
margin: 1rem 0;
}
}
}


Steve

[Former Member]

Sept 26, 2016 8:33:22 GMT -8 @xsteveuk said:

&.container{
margin: 1rem 0;
}

Hi Steve,

That is less syntax and not css.
That will only work if you put it inside your stylesheet via admin->themes->advanced_styles&css

If you try adding it into the header or footer or via a plugin it work work as those only accept valid css

I would imagine that is what is causing the error.

EDIT: just check it, its not a syntax error(you wouldn't be able to save the file), it's just highlighting it for some reason(maybe it just understands css syntax). It's nothing to worry about

[Former Member]

Sept 26, 2016 8:54:46 GMT -8 @synthtec said:

Sept 26, 2016 8:33:22 GMT -8 @xsteveuk said:

&.container{
margin: 1rem 0;
}

Hi Steve,

That is less syntax and not css.
That will only work if you put it inside your stylesheet via admin->themes->advanced_styles&css

If you try adding it into the header or footer or via a plugin it work work as those only accept valid css

I would imagine that is what is causing the error.

EDIT: just check it, its not a syntax error(you wouldn't be able to save the file), it's just highlighting it for some reason(maybe it just understands css syntax). It's nothing to worry about

Thanks - it working  and displaying the table Ok
and works adding the bottom part of the code in admin->themes->advanced_styles&css
just those little errors showing in red but as you say I don't think it much to worry about ..
all seems to be displaying as it should ... Nice code

Steve

[Former Member]

Cheers Steve,

If you cycle through some of the stylesheet themes it will only be highlighted red for some of the themes, kind of odd but I hope that puts your mind at ease :)

[Former Member]

Sept 26, 2016 9:36:33 GMT -8 @synthtec said:

Cheers Steve,

If you cycle through some of the stylesheet themes it will only be highlighted red for some of the themes, kind of odd but I hope that puts your mind at ease

Thanks
I liked this code I decided to add it to my main site it took a little working out to get the tables all the same size
due to javascript's I have added to two of them but got there in the end

Steve

[Former Member]

The site looks good, well done.

I didn't know you were the owner of that forum. One of the very few forums I see taking advantage of the social media cards on twitter :)

It's funny I was having coffee this morning looking through twitter #proboards and thinking to myself,
these guys are really on top of social media. I think you had like 4/5 updates within the space of a short period. bravo!

Your forum is not too far from being responsive.