Post by Tumbleweed on Aug 30, 2017 0:04:47 GMT -5
<!doctype html>
<html>
<head>
<title>$[title] | $[forum.name]</title>
$[head]
<style>
body { background-image:url(http://i657.photobucket.com/albums/uu300/EliteList/400x400/Scmpr/Scmpr18_zpscrnper7f.png); color: $[text_color]; font-family: $[font]; }
a { color: $[link_color]; }
footer .footer-links { margin-top: 10px; padding-top: 5px; }
footer .footer-links, footer .footer-text { font-size: 0.8em; text-align: center; }
.widget-notification .new-icon { font-size: x-small; color: #6F6F6F; margin-right: 5px; }
</style>
</head>
<body>
$[header]
<style type="text/css">
.title-bar, .shoutbox.container.full{display:none;}
a:link{text-decoration:none;}
h5 {font-size: 16px;font-weight:bold; text-align:center;color:#363619;}
h3{font-size: 36px;font-weight:bold;padding:8px;color:#ab7760; text-shadow: 1px 1px #000000;}
/*CLICK TO SHOW*/
a h4{font-size: 14px;font-weight:bold; text-align:center;color:#964e2e;!important;text-decoration:none!important;
}
a h4:hover{color:#544e2e;text-decoration:none;
}
textarea{width:99%;height:260px;overflow:auto;}
#my_lil_wrap{width:76%;background: rgba(154,120,95, .9);
border:1px solid #95cd4d;margin-right:auto;margin-left:auto;
}
#start_the_tut{background-color: #757080;
text-align:center;margin:30px;padding:30px;
border:1px solid #95cd4d;
}
.my_lil_cont{
margin-right:auto;margin-left:auto;
}
#start_the_tut p{font-size:15px;}
.slidingDiv {display: none;}
textarea{width:90%;height:260px; background-color:#363619;font-size:14px; color:#ffffff;font-family:tahoma;
}
#my a:link{
width:100px;
border: 1px solid #593723;
-moz-box-shadow: 0 3px 0 0 #444444, 0 0px 3px 0px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 3px 0 0 #444444, 0 0px 3px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0 3px 0 0 #444444, 0 0px 3px 0px rgba(0, 0, 0, 0.8);
font-size:86%;
color: #1e1e12;
display: block;
padding: 2px 1px 1px 1px;
position: relative;
top: 0;
text-decoration: none;
float:right;
text-align:center;
vertical-align:center;
height:24px;
margin-right:2px;
margin-bottom:4px;
-webkit-border-top-left-radius: 10px!important;
-webkit-border-top-right-radius: 20px!important;
-moz-border-radius-topleft: 10px!important;
-moz-border-radius-topright: 20px!important;
}
#my a:hover{
-moz-box-shadow: 0 2px 0 0 #444444, 0 0px 2px 0px rgba(0, 20, 0, 0.8);
-webkit-box-shadow: 0 2px 0 0 #444444, 0 0px 2px 0px rgba(0, 20, 0, 0.8);
box-shadow: 0 2px 0 0 #444444, 0 0px 2px 0px rgba(0, 20, 0, 0.8);
top: 2px;
}
#my a:active {
-moz-box-shadow: inset 0 2px 0px 0px #444444, 0 0 0 0 rgba(20, 0, 0, 0.1);
-webkit-box-shadow: inset 0 2px 0px 0px #444444, 0 0 0 0 rgba(20, 0, 0, 0.1);
box-shadow: inset 0 2px 0px 0px #444444, 0 0 0 0 rgba(20, 0, 0, 0.1);
top: 0px;
}
.animated {
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.animated:active {
-webkit-transition: all 0s ease;
-moz-transition: all 0s ease;
-ms-transition: all 0s ease;
-o-transition: all 0s ease;
transition: all 0s ease;
}
/*For smaller devices*/
@media screen and (max-width:990px) {
}
@media screen and (max-width:660px){
.#my_lil_wrap{width:96%!important;margin-right:auto;margin-left:auto;}
#start_the_tut{width:95%!important;margin-right:auto;margin-left:auto;padding:5px!important;}
}
</style>
<script>
$(document).ready(function(){
$('.show_hide').click(function(){
$(this).next('.slidingDiv').slideToggle();
return false;
});
});
</script>
<div id="my_lil_wrap">
<div id="start_the_tut">
<h3>Flex Boxes</h3><br />
<p>This whole page is designed to work on smaller devices utilizing flex box. Below are some flex boxes you can use on your site. Do not copy the code from my source as I customized the colors for this page. Click on "CLICK TO SHOW THE CODE" and use that coding as the css is set to pick up the colors of your theme. If you don't know what a flex box is, shrink your screen.
</p>
<!--FLEX BOX SAMPLE 1-->
<div class="my_lil_cont">
<h5>Flex Box Template 1 - Three Column-Four Image Hover</h5>
<br>
<style>
#three-column-wrapper{border:1px solid black;display:flex; flex-flow:row;
align-items:center; justify-content:center; margin-bottom:8px; background-color: @container_background_color_1;
border-color: @container_inner_border_color; border-radius:5px;
}
#first_div,#third_div{width:33%; background-color: @container_background_color_2;}
#secound_div{width:32%;}
#first_div .bh1, #secound_div .bh1, #third_div .bh1{ 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_desc{float:left; margin: 0 3px;position:relative;font-size:12px;}
div.center_imgs{display: flex; align-items: center; justify-content: center;
}
.show_desc img{
border:1px solid black; background-color: #ab7760;
}
.text-content {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_desc a:hover span.text-content{ display:inline;
position: absolute;left: 0px; top: 0px; right: 0px; bottom: 0px;width:50px;height:50px;
background-color:@container_background_color_1!important;opacity:0.9; z-index:300;
}
span.text-content span{line-height:50px; }
/*For smaller devices*/
@media screen and (max-width:990px) {
#three-column-wrapper { flex-wrap: wrap; }
#first_div,#secound_div,#third_div{ flex-basis: 100%; }
}
@media screen and (max-width:660px){
#three-column-wrapper{max-width:330px;margin:auto;display:flex; flex-flow:column;}
.show_desc {flex-wrap: wrap;flex-basis:100%; }
.show_desc img{width:40px;height:40px;}
.show_desc img:hover{width:40px;height:40px;}
#first_div .bh1, #secound_div .bh1, #third_div .bh1{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;}
.text-content{ text-align:center; line-height:60px;}
}
</style>
<div id="three-column-wrapper">
<div id="first_div">
<div class="bh1">Mesa PCT</div>
<div class="center_imgs">
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/ab7760/000000">
<span class="text-content"><span>WO</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/ab7760/0000000">
<span class="text-content"><span>Sgt</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/ab7760/000000">
<span class="text-content"><span>MCpl</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/ab7760/000000">
<span class="text-content"><span>Cpl</span></span>
</a>
</div>
</div>
</div>
<div id="secound_div">
<div class="bh1">Canyon PCT</div>
<div class="center_imgs">
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5c5a3f">
<span class="text-content"><span>WO</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5c5a3f">
<span class="text-content"><span>Sgt</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5c5a3f">
<span class="text-content"><span>MCpl</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5c5a3f">
<span class="text-content"><span>Cpl</span></span>
</a>
</div>
</div>
</div>
<div id="third_div">
<div class="bh1">Millpond PCT</div>
<div class="center_imgs">
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5b5666">
<span class="text-content"><span>WO</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5b5666">
<span class="text-content"><span>Sgt</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5b5666">
<span class="text-content"><span>MCpl</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5b5666">
<span class="text-content"><span>Cpl</span></span>
</a>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
<img src="//storage.proboards.com/2773176/images/eliaq0oSvYFrKZDygINR.gif" border="0" alt="Photobucket">
<!--Coding 1-->
<a href="#" class="show_hide"><h4>CLICK TO SHOW THE CODE</h4></a>
<div class="slidingDiv">
<textarea>
Flex one goes here
</textarea>
</div>
<br /><hr><br />
<!--FLEX 2-->
<br />
<div class="my_lil_cont">
<h5>Flex Box Template 2 - Five Columns with header</h5>
<br><br>
<style>
.outer_wrapper1{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;
text-align: center;margin-bottom:16px;
}
.outer_wrapper1 > * {padding: 10px;flex: 1 100%;}
.my_title1 {background: #964e2e;}
.main1 ul {list-style-type: none;display: table;padding:0px;margin:0px;width:100%!important;}
.main1 li {width:100%!important;text-align: center;margin-bottom:3px;vertical-align:top;}
.main1 li a{color:#964e2e;text-decoration:none;}
.main1 li a:hover{color:#909090;text-decoration:none;}
#link1{background-color:#3a2d3a;padding:4px;}
#link2{background-color:#574057;padding:4px;}
#link3{background-color:#725172;padding:4px;}
#link4{background-color:#8f658f;padding:4px;}
#link5{background-color:#ab75aa;padding:4px;}
.aside-1{background:#777341;width:10%;order: 1;}
.aside-2{background:#7e5f7e;width:10%;order: 2;}
.main1 { background-color: #ab7760; background-image:url(http://i657.photobucket.com/albums/uu300/EliteList/400x400/Scmpr/Scmpr18_zpscrnper7f.png);order: 3; display: flex;
flex-direction: column;
flex-wrap: wrap;}
.aside-3{background:#7e5f7e;width:10%;order: 4;}
.aside-4{background:#777341;width:10%;order: 5;}
/*For Smaller Devices*/
@media all and (min-width: 600px) {
.aside {flex: 1 auto;}
.main1 ul li{min-width:0px; display: flex;
flex-direction: column;align-items: center;
}
@media all and (min-width: 800px) {
.main1 {flex: 3 0px;}
.aside-1 {order: 1;}
.aside-2 {order: 2;}
.main1 {order: 3;display:flex;align-items:center; justify-content:center;}
.main1 ul li{min-width:0px; }
.aside-3 {order: 4;}
.aside-4 {order: 5;}
}
}
</style>
<div class="outer_wrapper1">
<div class="my_title1">Header</div>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<div class="main1">
<ul>
<li id="link1"><a href="">Link One</a></li>
<li id="link2"><a href="">Link Two</a></li>
<li id="link3"><a href="">Link Three</a></li>
<li id="link4"><a href="">Link Four</a></li>
<li id="link5"><a href="">Link Five</a></li>
</ul>
</div>
<aside class="aside aside-3">Aside 3</aside>
<aside class="aside aside-4">Aside 4</aside>
</div>
</div>
<img src="//storage.proboards.com/2773176/images/eliaq0oSvYFrKZDygINR.gif" border="0" alt="Photobucket">
<!--Coding 1-->
<a href="#" class="show_hide"><h4>CLICK TO SHOW THE CODE</h4></a>
<div class="slidingDiv">
<textarea style="height:260px;">
Flex 2 goes here
</textarea>
</div>
<br /><br /><hr><br /><br />
<!--Paste all tables above this line-->
<div id="my">
<a class="button animated" href="#"><p>More Tables</p></a>
<a class="button animated" href="#"><p>More Styling</p></a>
</div>
<div style="clear:both;"></div>
</div>
</div>
<script>
$('#next').click(function() {
$('.current').removeClass('current').hide()
.next().show().addClass('current');
if ($('.current').hasClass('last')) {
$('#next').attr('disabled', true);
}
$('#prev').attr('disabled', null);
});
$('#prev').click(function() {
$('.current').removeClass('current').hide()
.prev().show().addClass('current');
if ($('.current').hasClass('first')) {
$('#prev').attr('disabled', true);
}
$('#next').attr('disabled', null);
});
</script>
$[zone_1]
$[footer]
</body>
</html>
xxxxxxxxxxxxxxx
<style>
.outer_wrapper1{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;
text-align: center;margin-bottom:16px;
}
.outer_wrapper1 > * {padding: 10px;flex: 1 100%;}
.my_title1 {background: #964e2e;}
.main1 ul {list-style-type: none;padding:0px;margin:auto;width:100%!important;text-align:center;align-items:center;}
.main1 li {width:100%!important;text-align: center;margin-bottom:3px;vertical-align:top;}
.main1 li a{color:#964e2e;text-decoration:none;}
.main1 li a:hover{color:#909090;text-decoration:none;}
#link1{background-color:#3a2d3a;padding:4px;}
#link2{background-color:#574057;padding:4px;}
#link3{background-color:#725172;padding:4px;}
#link4{background-color:#8f658f;padding:4px;}
#link5{background-color:#ab75aa;padding:4px;}
.aside-1{background:#777341;width:10%;order: 1;}
.aside-2{background:#7e5f7e;width:10%;order: 2;}
.main1 { background-color: #777341;order: 3; display: flex;flex-direction: column; flex-wrap: wrap;text-align:center;align-items:center;}
.aside-3{background:#7e5f7e;width:10%;order: 4;}
.aside-4{background:#777341;width:10%;order: 5;}
/*For Smaller Devices*/
@media all and (min-width: 600px) {
.aside {flex: 1 auto;}
.main1 ul li{min-width:0px;}
}
@media all and (min-width: 800px) {
.main1 {flex: 3 0px;}
.aside-1 {order: 1;}
.aside-2 {order: 2;}
.main1 {order: 3;display:flex;align-items:center; justify-content:center;}
.main1 ul li{min-width:0px; }
.aside-3 {order: 4;}
.aside-4 {order: 5;}
}
}
</style>
<div class="outer_wrapper1">
<div class="my_title1">Header</div>
<aside class="aside aside-1">Aside 1<br>Now is the time for all good men to come to the aid of their country.</aside>
<aside class="aside aside-2">Aside 2</aside>
<div class="main1">
<ul>
<li id="link1"><a href="">Link One</a></li>
<li id="link2"><a href="">Link Two</a></li>
<li id="link3"><a href="">Link Three</a></li>
<li id="link4"><a href="">Link Four</a></li>
<li id="link5"><a href="">Link Five</a></li>
</ul>
</div>
<aside class="aside aside-3">Aside 3</aside>
<aside class="aside aside-4">Aside 4</aside>
</div>
xxxxxxxxxxxxxxx
.container > .title-bar { background-color: @title_bar_background_color; background-image: @title_bar_background_image; background-attachment: @title_bar_background_attachment; background-repeat: @title_bar_background_repeat; background-position: @title_bar_background_position; border: @title_bar_border; .rounded-corners(@title_bar_border_radius); }\
color: @container_text_color_1; 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);
7571be
color: @nav_bar_button_color; font: @nav_bar_button_font; text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow; background: @nav_bar_button_background;
color: @nav_bar_button_hover_color !important; font: @nav_bar_button_hover_font; text-decoration: @nav_bar_button_hover_decoration !important; text-shadow: @nav_bar_button_hover_shadow; background: @nav_bar_button_hover_background;
#navigation-menu > ul li a { display: inline-block; padding: 0 .75em; color: @nav_bar_button_color; font: @nav_bar_button_font; text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow; background: @nav_bar_button_background; line-height: 31px !important; }
#navigation-menu > ul li:hover a { color: @nav_bar_button_hover_color !important; font: @nav_bar_button_hover_font; text-decoration: @nav_bar_button_hover_decoration !important; text-shadow: @nav_bar_button_hover_shadow; background: @nav_bar_button_hover_background; line-height: 31px !important; }
#navigation-menu > ul li a.state-active { color: @nav_bar_button_current_color !important; font: @nav_bar_button_current_font; text-decoration: @nav_bar_button_current_decoration !important; text-shadow: @nav_bar_button_current_shadow; background: @nav_bar_button_current_background; line-height: 31px !important; }
xxxxxxxxxxxxxxxxxxxxxxxxx
<style>
#three-column-wrapper{border:1px solid black;display:flex; flex-flow:row;
align-items:center; justify-content:center; margin-bottom:8px; background-color: @container_background_color_1!important;
border-color: @container_inner_border_color; border-radius:5px;
}
#first_div,#third_div{width:33%; background-color: @container_background_color_2;}
#secound_div{width:32%;}
#first_div .bh1, #secound_div .bh1, #third_div .bh1{ 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_desc{float:left; margin: 0 3px;position:relative;font-size:12px;}
div.center_imgs{display: flex; align-items: center; justify-content: center;
}
.show_desc img{
border:1px solid black; background-color: #ab7760;
}
.text-content {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_desc a:hover span.text-content{ display:inline;
position: absolute;left: 0px; top: 0px; right: 0px; bottom: 0px;width:50px;height:50px;
background-color:@container_background_color_1!important;opacity:0.9; z-index:300;
}
span.text-content span{line-height:50px; }
/*For smaller devices*/
@media screen and (max-width:990px) {
#three-column-wrapper { flex-wrap: wrap; }
#first_div,#secound_div,#third_div{ flex-basis: 100%; }
}
@media screen and (max-width:660px){
#three-column-wrapper{max-width:330px;margin:auto;display:flex; flex-flow:column;}
.show_desc {flex-wrap: wrap;flex-basis:100%; }
.show_desc img{width:40px;height:40px;}
.show_desc img:hover{width:40px;height:40px;}
#first_div .bh1, #secound_div .bh1, #third_div .bh1{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;}
.text-content{ text-align:center; line-height:60px;}
}
</style>
<div id="three-column-wrapper">
<div id="first_div">
<div class="bh1">Mesa PCT</div>
<div class="center_imgs">
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/ab7760/000000">
<span class="text-content"><span>WO</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/ab7760/0000000">
<span class="text-content"><span>Sgt</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/ab7760/000000">
<span class="text-content"><span>MCpl</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/ab7760/000000">
<span class="text-content"><span>Cpl</span></span>
</a>
</div>
</div>
</div>
<div id="secound_div">
<div class="bh1">Canyon PCT</div>
<div class="center_imgs">
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5c5a3f">
<span class="text-content"><span>WO</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5c5a3f">
<span class="text-content"><span>Sgt</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5c5a3f">
<span class="text-content"><span>MCpl</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5c5a3f">
<span class="text-content"><span>Cpl</span></span>
</a>
</div>
</div>
</div>
<div id="third_div">
<div class="bh1">Millpond PCT</div>
<div class="center_imgs">
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5b5666">
<span class="text-content"><span>WO</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5b5666">
<span class="text-content"><span>Sgt</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5b5666">
<span class="text-content"><span>MCpl</span></span>
</a>
</div>
<div class="show_desc">
<a href="http://link.com" title="">
<img src="https://placehold.it/50x50/5b5666">
<span class="text-content"><span>Cpl</span></span>
</a>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
@media screen and (max-width:660px){
#three-column-wrapper{max-width:330px;margin:auto;display:flex; flex-flow:column;}
.show_desc {flex-wrap: wrap;flex-basis:100%; }
.show_desc img{width:40px;height:40px;}
.show_desc img:hover{width:40px;height:40px;}
#first_div .bh1, #secound_div .bh1, #third_div .bh1{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;}
.text-content{ text-align:center; line-height:60px;}
}