Info boxes below the banner...

[The girl who waited]

Hello. 

So I am creating a skin ("Theme'') and I would like to know if it's possible to put a series of boxes under my header. Well, I KNOW it's possible, I've seen it done. But how? I would like a code that is more advanced than a basic table (Which I DO know how to do, and if push comes to shove, I will). 

My "practice" board is here: Cass's Creative Corner and the board I'd like to copy is here: This board . Of course, it doesn't need to look EXACTLY like that; I will be changing the hex code and sizes anyway, and adding my own info. 

Thanks muchly! 

-Cass

[Tumbleweed]

Jul 1, 2015 8:47:47 GMT -8 The girl who waited said:

Hello. 

So I am creating a skin ("Theme'') and I would like to know if it's possible to put a series of boxes under my header. Well, I KNOW it's possible, I've seen it done. But how? I would like a code that is more advanced than a basic table (Which I DO know how to do, and if push comes to shove, I will). 

My "practice" board is here: Cass's Creative Corner and the board I'd like to copy is here: This board . Of course, it doesn't need to look EXACTLY like that; I will be changing the hex code and sizes anyway, and adding my own info. 

Thanks muchly! 

-Cass

I started on this but got disrupted and will finish, hopefully, before I go to bed.

Edit: Got it finished and of course you will need to put in the colors you want and any images/content you want to add but does this look ok to you? I made it a little different than the one you linked to but the idea is the same-ish. I don't have the placement where you want on your site but I'll give you instructions on that. Just want to know if you need changes made and please don't say you want it to automatically match your theme colors because the example link doe not do that so I didn't make this one either. They manually put their colors in.

putteraround1.proboards.com/

[The girl who waited]

Thanks!! much appreciated... 

How do I get the code?! Did I miss something somewhere? (A likely possiblity). 

[Tumbleweed]

Jul 2, 2015 6:18:08 GMT -8 The girl who waited said:

Thanks!! much appreciated... 

How do I get the code?! Did I miss something somewhere? (A likely possiblity). 

No, I just wanted to see if that looked o.k. and if you needed help with placement. But here is the code:

The CSS:

<style>
.my_top_info{
position:relative;
margin:auto;
width:1100px;
text-align:center;
}
.my_top_boxes{
background-color: #572b2b;/*color 1*/
float:left;
width:176px;
height:240px;
margin:2px;
padding:2px;
border:2px solid #5a0606;/*color 2*/
text-align:center;
}
.my_inner_boxes{
background-color: #572b2b;/*color 1*/
border:2px solid #5a0606;/*color 2*/
width:162px;
height:228px;
padding:2px;
margin:auto;
}
.lower_inner{
background-color:#5a0606;/*color 1*/
border: 2px double #572b2b;/*color 2*/
outline: 4px solid #5a0606;/*color 1*/
outline-offset: -1px;
font-size:11px;
color:#dddddd;
width:152px;
height:194px;
}
.my_title{
font-size:14px;
color:#dddddd;
padding:2px;
margin-bottom:8px;
}
.linkidy{
background-color:#572b2b;/*color 2*/
width:120px;
padding:2px;
margin:2px;
border-right:2px solid #dddddd;
border-left:2px solid #dddddd;
}
.linkidy a:link,.linkidy a:visited{
color:#bbbbbb;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;  
}
.linkidy a:hover{
color:#ddffdd;    
}
</style>

and the HTML: (Please note that the first and third "box" has inline width styling. If you want all your boxes the same width, remove that inline styling width and adjust the css style sheet width.)

<div class="my_top_info">         
   
<div class="my_top_boxes" style="width:234px;">
<div class="my_inner_boxes" style="width:220px;">
    <div class="my_title">Box 1 Title</div>
           <center>
           <div class="lower_inner" style="width: 210px;">
Content 1 here
</div>
           </center>
</div>
   </div>
   
   
<div class="my_top_boxes">
<div class="my_inner_boxes">
<div class="my_title">Box 2 Title</div>
           <center>
<div class="lower_inner">
Content 2 here
</div>
           </center>
</div>
</div>

<div class="my_top_boxes" style="width:234px;">
       <div class="my_inner_boxes" style="width:220px;">
    <div class="my_title">Box 3 Title</div>
           <center>
           <div class="lower_inner" style="width: 210px;">
Content 3 here
</div>
           </center>
</div>
</div>

   
<div class="my_top_boxes">
<div class="my_inner_boxes">
<div class="my_title">Box 4 Title</div>
           <center>
<div class="lower_inner">
Content 4 here
</div>
           </center>
</div>
</div>

<div class="my_top_boxes">
<div class="my_inner_boxes">
<div class="my_title">Box 5 Title</div>
          <center>
<div class="lower_inner">
               <br>
               <div class="linkidy"> <a href="http://mylink.com">Link One</a></div>
               <div class="linkidy"><a href="http://mylink.com">Link Two</a></div>
              <div class="linkidy"> <a href="http://mylink.com">Link Three</a></div>
</div>
           </center>
</div>
</div> <div>  
    <div style="clear:both;"></div>

If you do need help with placement, let me know. Your link to your test site didn't work for me so you'll need to fix that link if you need help. Also if you plan to use it on all themes or a more than one and require to change the color to suit your theme because placement might be important, depending on if you will just use it on more theme, all themes or just one theme.

[The girl who waited]

Yes, I need help on placement, apparently. I appreciate your patience with me! 

[The girl who waited]

Actually. I figured it out; had to add some code!!

[The girl who waited]

cassscreativecorner.proboards.com/

[Tumbleweed]

Jul 2, 2015 18:10:19 GMT -8 The girl who waited said:

Actually. I figured it out; had to add some code!!

Yeah! Glad you did but....

Jul 2, 2015 18:17:15 GMT -8 The girl who waited said:

cassscreativecorner.proboards.com/

.....I don't see it on this ^^ link.  Maybe I'm not seeing the theme as a guest. Not that I need to see but I'm always interested in personal creativeness someone uses with colors and images, especially since I kind of randomly threw colors in there. Hope you didn't run in to trouble and had to remove it. It is a tricky one to adjust because you have 5 boxes to account for and then those odd sized ones.

[The girl who waited]

LOL, it's not showing up because I am stuck on the HTML part. O.O

[Tumbleweed]

Jul 3, 2015 17:49:41 GMT -8 The girl who waited said:

LOL, it's not showing up because I am stuck on the HTML part. O.O

Your trouble might be that I was missing a closing div so add the blue where I have it here:

</div>
<div style="clear:both;"></div>


I edited the code to add that for anyone else using this.

[The girl who waited]

Ah. Thanks!

[The girl who waited]

That DID help,t hanks!

[Tumbleweed]

Jul 4, 2015 19:05:58 GMT -8 The girl who waited said:

That DID help,t hanks!

You're welcome and sorry about that in the first place. By the way, love the colors you are using. Very different and I like that!

[The girl who waited]

No worries; thanks, and I made sure to add the credit to the skin so the requestor can know who made it for the future! Thanks again!