staff section in sidebar

[shamrocklass]

Hi there! I hope someone can help. I'd like to code the side bar in the staff section of my site like this site has it:


reluxwarriorsrp.proboards.com/

if someone can help that would be great! we need a new snazzy staff section--also, not sure if this is the right spot but for some reason our season box is like right in with the welcome in the sidebar redux. thanks!

[Tumbleweed]

Oct 11, 2017 11:57:17 GMT -8 shamrocklass said:

Hi there! I hope someone can help. I'd like to code the side bar in the staff section of my site like this site has it:


reluxwarriorsrp.proboards.com/

if someone can help that would be great! we need a new snazzy staff section--also, not sure if this is the right spot but for some reason our season box is like right in with the welcome in the sidebar redux. thanks!

I already had a layout much like that but changed a couple things so it isn't quite so copy-cat. Added a little hover over the image and a curved border under the name but not sure about that. Thinking maybe the border should be on top of the name and curve down but curve down on the opposite side?
Test site

Would this be o.k. ? Also, what width do you have your side bar so I can tweak it so everything looks good. I have mine at 250px. Let me know if you want any changes.

[shamrocklass]

OO omg that looks amazing Tumbleweed !!
200 i think

and on that test site, would you be able to do something like the mesa pct box so we can add the packs and info in an area like that?

[Tumbleweed]

Oct 13, 2017 12:01:27 GMT -8 shamrocklass said:

OO omg that looks amazing Tumbleweed !!
200 i think

and on that test site, would you be able to do something like the mesa pct box so we can add the packs and info in an area like that?

200px is pretty narrow to jam that stuff in. Can you check to make sure 200px is the width you have? It's easy to check, just head to the plugin (manage), click on the redux and then the left or right tab and it should say the width you have. The site you linked to appears to be about 300px in width, which is why it looks nice and not jammed.

I'll see what I can do about a similar Packs thing.

[shamrocklass]

okay great! LMK Tumbleweed. can't wait to see it

[Tumbleweed]

Oct 14, 2017 19:26:42 GMT -8 shamrocklass said:

okay great! LMK Tumbleweed . can't wait to see it

And what about the width? Did you check to verify it is 200px?

I have a start on the packs thing but a ways to go yet. Same test site.  Let me know if you don't like something because doing it now is better than once it's on your site.

I'll go ahead and get the coding for staff stuff to you so you at least have that. Should have that to your tomorrow and then I'll finish up the packs thing tomorrow too (I have different font sizes and stuff that I need to match so the side boxes look the same and will on your site, plus other tweaks).

[shamrocklass]

Tumbleweed sure here

Left Sidebar Width
200px

thats what it says in the plug in awesome. sure i understand and i'd like the mesa box the same way it is above the forums in the header area like you have it there ^.^ everything else is brilliant

[Tumbleweed]

Oct 15, 2017 11:38:24 GMT -8 shamrocklass said:

Tumbleweed sure here

Left Sidebar Width
200px

thats what it says in the plug in awesome. sure i understand and i'd like the mesa box the same way it is above the forums in the header area like you have it there ^.^ everything else is brilliant

So are you saying you want 4 boxes instead of three and instead of that curved line, just a flat line like in the header? And if a flat line then the staff section should be that way too. Just want to be clear.

And sorry, I didn't get at doing anything else on that. I'll see what I can do yet tonight but afraid I can't get anything to you until tomorrow. 

[shamrocklass]

Exactly!! That's okay no problem!! Tumbleweed

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

Oct 13, 2017 12:01:27 GMT -8 shamrocklass said:

OO omg that looks amazing Tumbleweed !!
200 i think

and on that test site, would you be able to do something like the mesa pct box so we can add the packs and info in an area like that?

Tumbleweed is always amazing. Always helpful, determined, and skilled. Like nunchaku skills, bow hunting skills, computer hacking skills...

[Tumbleweed]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓, Awww, thanks.



 shamrocklass, I'm sorry, life got in my way of being online to work on this. Since you are a person of little words, I had to make some assumptions and I hope they are correct.  I need to clean up the coding still and tweak a couple things but look now and is that what you want? Test Site

[shamrocklass]

Looks good! As long as the code goes in the header above the forum like you have it there, then everything is absolutely correct! Tumbleweed
Its okay i understand life can get in the way...totally understandable  below is a screen shot of what i mean by in the header  


s1.postimg.cc/9izmydql1b/head2.png

[Tumbleweed]

Oct 18, 2017 15:07:48 GMT -8 shamrocklass said:

Looks good! As long as the code goes in the header above the forum like you have it there, then everything is absolutely correct! Tumbleweed
Its okay i understand life can get in the way...totally understandable  below is a screen shot of what i mean by in the header  


s1.postimg.cc/9izmydql1b/head2.png

O.K. So I misunderstood. The staff box will be in the side table and then do you just want all three of the boxes (mesa, canyon,millpond) in the header or just one for your header? I promise I'll have the staff one for you before the end of today but still not sure what you want out of my header.

[shamrocklass]

Yup ! EXACTLY like your header but with the four boxes for the four packs. The staff box is absolutely correct!
Four boxes in the header for the four packs. Anggun, Omega, Leetin and Corrin with the little image boxes below it. exactly as you have it in your header.

tag:Tumbleweed

[Tumbleweed]

O.K. Did one with four on my test site. 

This would go in your wrapper template or it could go at the top of your home template if you want it to only show on the main page OR you could put it in your global or main header if you want it on all themes.  If you wanted it to pick up theme colors you'd need to put the css in each template or modify the color manually to match the theme and then you could have the css in your global or main header too. Here is the html part:



<div id="four-column-wrapper">
<div id="first_div4">
<div class="bh4">Anggun</div>
         
<div class="center_imgs">
<div class="show_desc4">
<a href="http://link.com" title="">
<img src="https://placehold.it/40x40/5b5666">
<span class="text-content4"><span>WO</span></span>
</a>
 
</div>
       
<div class="show_desc4">
<a href="http://link.com" title="">
<img src="https://placehold.it/40x40/5b5666">
<span class="text-content4"><span>Sgt</span></span>
</a>
</div>
       
<div class="show_desc4">
<a href="http://link.com" title="">
<img src="https://placehold.it/40x40/5b5666">
<span class="text-content4"><span>MCpl</span></span>
</a>
</div>

<div class="show_desc4">
<a href="http://link.com" title="">
<img src="https://placehold.it/40x40/5b5666">
<span class="text-content4"><span>Cpl</span></span>
</a>
</div>
</div>
</div>
   
   
<div id="second_div4">
<div class="bh4">Omega</div>
 
<div class="center_imgs">
<div class="show_desc4">
<a href="http://link.com" title="">
<img src="https://placehold.it/40x40/5b5666">
<span class="text-content4"><span>WO</span></span>
</a>
</div>

<div class="show_desc4">      
<a href="http://link.com" title="">
<img src="https://placehold.it/40x40/5b5666">
<span class="text-content4"><span>Sgt</span></span>
</a>
</div>

<div class="show_desc4">
<a href="http://link.com" title="">
<img src="https://placehold.it/40x40/5b5666">
<span class="text-content4"><span>MCpl</span></span>
</a>
</div>

<div class="show_desc4">
<a href="http://link.com" title="">
<img src="https://placehold.it/40x40/5b5666">
<span class="text-content4"><span>Cpl</span></span>
</a>
</div>

</div>
</div>
     
<div id="third_div4">
<div class="bh4">Leetin</div>
<div class="center_imgs">
<div class="show_desc4">
<a href="http://link.com" title="">
               <img src="https://placehold.it/40x40/5b5666">    
<span class="text-content4"><span>WO</span></span>
</a>
</div>

<div class="show_desc4">
<a href="http://link.com" title="">
               <img src="https://placehold.it/40x40/5b5666">  
<span class="text-content4"><span>Sgt</span></span>
</a>
</div>

<div class="show_desc4">          
<a href="http://link.com" title="">
               <img src="https://placehold.it/40x40/5b5666">  
<span class="text-content4"><span>MCpl</span></span>
</a>
</div>

<div class="show_desc4">          
<a href="http://link.com" title="">
               <img src="https://placehold.it/40x40/5b5666">  
<span class="text-content4"><span>Cpl</span></span>
</a>
</div>
</div>
</div>
   
    <div id="fourth_div4">
<div class="bh4">Corrin</div>
<div class="center_imgs">
<div class="show_desc4">
<a href="http://link.com" title="">
               <img src="https://placehold.it/40x40/5b5666">    
<span class="text-content4"><span>WO</span></span>
</a>
</div>

<div class="show_desc4">
<a href="http://link.com" title="">
               <img src="https://placehold.it/40x40/5b5666">
<span class="text-content4"><span>Sgt</span></span>
</a>
</div>

<div class="show_desc4">          
<a href="http://link.com" title="">
               <img src="https://placehold.it/40x40/5b5666">
<span class="text-content4"><span>MCpl</span></span>
</a>
</div>

<div class="show_desc4">          
<a href="http://link.com" title="">
               <img src="https://placehold.it/40x40/5b5666">  
<span class="text-content4"><span>Cpl</span></span>
</a>
</div>
</div>
</div>
   
   
</div>          
<div style="clear:both;"></div>





And here is the css: (If you put the css any place other than the style sheet you will need <style> styles here </style> tags around it. But in the style sheet, just paste it at the very bottom.


/*FLEX TABLE 4 -header boxes*/
#four-column-wrapper{border:1px solid black;display:flex; flex-flow:row;
align-items:center;  justify-content:center; margin-bottom:8px;  background: @content_background; border-width: @content_border_width; border-style: @content_border_style; border-color: @container_outer_border_color; border-top-width: 0px; padding: 0px; .rounded-corners(@content_border_radius);width:100%;
}
#first_div4, #second_div4, #third_div4, #fourth_div4{width:25%; border-width: @content_border_width; border-style: @content_border_style; border-color: @container_outer_border_color;
}

#first_div4 .bh4, #second_div4 .bh4, #third_div4 .bh4, #fourth_div4 .bh4{ text-align:center;
font: 17px copperplate; color: #615853; text-transform: uppercase;
letter-spacing: 2px;font-weight: none;margin:8px;
border-bottom: solid 1px #191512;
}
.show_desc4{float:left; margin: 0 3px;position:relative;font-size:12px;}
div.center_imgs{display: flex;  align-items: center;  justify-content: center;
}
.show_desc4 img{
border:1px solid black;  background-color: #ab7760;
}
.text-content4 {display: none;width:50px;height:50px;
background-color: #ffffff!important;padding:0px;color: black;
text-align: center; vertical-align:middle; font-size:8px;
-webkit-transition: opacity 500ms; -moz-transition: opacity 500ms;
-o-transition: opacity 500ms; transition: opacity 500ms; border:1px solid black;
}
.show_desc4 a:hover span.text-content4{ display:inline;
position: absolute;left: 0px; top: 0px; right: 0px; bottom: 0px;width:40px;height:40px;
background-color:@container_background_color_1!important;opacity:0.9; z-index:300;
}
span.text-content4 span{line-height:50px; }
/*For smaller devices*/    
@media screen and (max-width:990px) {
#four-column-wrapper { flex-wrap: wrap;  }
#first_div4,#second_div4,#third_div4,#fourth_div4{ flex-basis: 100%; }
}
@media screen and (max-width:660px){
#four-column-wrapper{max-width:330px;margin:auto;display:flex; flex-flow:column;}
#first_div4,#second_div4,#third_div4,#fourth_div4 {flex: 1 1 auto;}
#first_div4 .bh4, #second_div4 .bh4, #third_div4 .bh4, #fourth_div4 .bh4{font-size:12px!important;letter-spacing:2px!important;
white-space: nowrap; text-align:center!important;min-width:0px; display: flex;flex-direction: column;align-items: center;flex: 2 1 auto;}
.show_desc4 {display:flex; flex-flow:row;border:1px solid red; }
}


If your forum is wider than mine and you want your little boxes a bit bigger the width and height is on the place holder image which I bolded:

<img src="https://placehold.it/40x40/5b5666">

To change the hover to be the same size you'll need to change these two parts in the css:

.text-content4 {display: none;width:40px;height:40px;
background-color: #ffffff!important;padding:0px;color: black;
text-align: center; vertical-align:middle; font-size:8px;
-webkit-transition: opacity 500ms; -moz-transition: opacity 500ms;
-o-transition: opacity 500ms; transition: opacity 500ms; border:1px solid black;
}
.show_desc4 a:hover span.text-content4{ display:inline;
position: absolute;left: 0px; top: 0px; right: 0px; bottom: 0px;width:40px;height:40px;
background-color:@container_background_color_1!important;opacity:0.9; z-index:300;
}


I need to go eat some dinner so when I get back, I'll give you the staff one.