Index.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<META NAME="author" CONTENT="Author">
<META NAME="description" CONTENT="Paragraph">
<META NAME="keywords" CONTENT="Words">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#Moosewrap').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
$(".menu").slideToggle();
$(this).toggleClass("active");
});
});
</script>
<!-- <?php get_header(); ?> -->
<link rel="stylesheet" href="fluid.css" type="text/css" media="screen">
</HEAD>
<BODY>
<DIV class="container_12">
</DIV>
<!--- <?php get_footer(); ?> --->
</body>
</html>
fluid.css
body{
background-color: #ffffff;
background-image: url("images/mainbgggg.jpg");
}
h1{font-family:sans-serif;}
p{font-family:sans-serif;font-size: 12px;font-weight:normal; color: #000000}
A:link{font-family:sans-serif;font-size: 12px;font-weight:normal; color: #0000ff; text-decoration: none;}
A:visited{font-family:sans-serif;font-size: 12px;font-weight:normal; color: #0000ff}
A:hover{font-family:sans-serif;font-size: 12px;font-weight:normal; color: #ff0000}
.container_12 {
background-image: url("http://mooseloose.com/gridbg.jpg");
background-size: 100%;
margin-left: auto;
margin-right: auto;
width: 960px;
border: 1px solid black;
padding:0px;
}
.fluid_1,
.fluid_2,
.fluid_3,
.fluid_4,
.fluid_5,
.fluid_6,
.fluid_7,
.fluid_9,
.fluid_8,
.fluid_10,
.fluid_11,
.fluid_12 {
text-align:left;
display: inline;
float: left;
}
.container_12 .fluid_1 {width:8.33333%;}
.container_12 .fluid_2 {width:16.66666666%;}
.container_12 .fluid_3 {width:25.0%;}
.container_12 .fluid_4 {width:33.333%;}
.container_12 .fluid_5 {width:41.666666%;}
.container_12 .fluid_6 {width:50.00%;}
.container_12 .fluid_7 {width:58.33333%;}
.container_12 .fluid_8 {width:66.666666%;}
.container_12 .fluid_9 {width:75%;}
.container_12 .fluid_10 {width:83.333%;}
.container_12 .fluid_11 {width:91.666%;}
.container_12 .fluid_12 {width:100%;}
Responsive Fluid
@media screen and (min-width: 960px) and (max-width: 3000px)
{
.container_12 {
width: 960px;
padding:0px;
}
.container_12 p{
font-size: 12pt;
}
.container_12 h1{
font-size: 12pt;
}
}
@media screen and (min-width: 768px) and (max-width: 959px)
{
.container_12 {
width: 768px;
padding:0px;
}
.container_12 p{
font-size: 12pt;
}
.container_12 h1{
font-size: 12pt;
}
}
@media screen and (min-width: 480px) and (max-width: 767px)
{
.container_12 {
width: 480px;
padding:0px;
}
.container_12 p{
font-size: 12pt;
}
.container_12 h1{
font-size: 12pt;
}
}
@media screen and (min-width: 0px) and (max-width: 479px)
{
.container_12 {
width: 100%;
padding:0px;
}
.container_12 p{
font-size: 12pt;
}
.container_12 h1{
font-size: 12pt;
}
.fluid_1,
.fluid_2,
.fluid_3,
.fluid_4,
.fluid_5,
.fluid_6,
.fluid_7,
.fluid_9,
.fluid_8,
.fluid_10,
.fluid_11,
.fluid_12 {
display:block;
float: none;
min-width: 100%;
}
}
Width Classe CSS
.twenty {width: 20%;height:auto}
.twentyfive {width: 25%;height:auto}
.thirty {width: 30%;height:auto}
.thirtyfive {width: 35%;height:auto}
.forty {width: 40%;height:auto}
.fortyfive {width: 45%;height:auto}
.fifty {width: 50%;height:auto}
.fiftyfive{width: 55%;height:auto}
.sixty {width: 60%;height:auto}
.sixtyfive {width: 65%;height:auto}
.seventy {width: 70%;height:auto}
.seventyfive {width: 75%;height:auto}
.eighty {width: 80%;height:auto}
.eightyfive {width: 85%;height:auto}
.ninty {width: 90%;height:auto}
.nintyfive {width: 95%;height:auto}
.onehundred {width: 100%;height:auto}
Static Responsive Horizontal Nav
Put this "Navigation" div
<nav id="Moosewrap">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Projects</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<div style="clear:both"></div>
Put this in each Media Screen
.menu a:link {padding: 4px 15px;font-size:14px} /* Button font and measure */
ul.menu ul ul { left: 135px} /* Third Generation Button distance left */
WordPress Dynamic Nav
<nav id="Moosewrap"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("OOOOOOOOOOO") ) : ?><?php endif; ?></nav><br>
CSS for Responsive
/* OOOOOOOOOOOOOOOOOOOOOO Begin Responsive Menu OOOOOOOOOOOOOOOOOOOOOOOOOOOO */
/* OOOOOOOOOOOOOOOOOOOOOO Begin Functionality OOOOOOOOOOOOOOOOOOOOOOOOOOOO */
#Moosewrap a {
text-decoration: none;
list-style: none;
}
#Moosewrap li {
list-style: none;
}
#menu-icon {
display: none;
}
.menu,.menu li {
margin: 0;
padding: 0;
}
.menu li {
list-style: none;
float: left;
margin-right: 5px;
}
.menu a:link {
display: block;
text-align: left}
.menu a:hover {
position: relative;
bottom: 2px;
text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);
}
.menu a:visited {
text-align: center}
.menu ul {
padding: 0px;
border: solid 0px #f00;
display: none;
position: absolute;
width: 180px;
z-index: 999;
}
.menu ul li a:link {
margin: 1px 0 1px 15px;
display: block;
width: 150px;
padding: 5px;
}
.menu ul li {
float: none;
margin: 0;
padding: 0;
width: 40px}
.menu li:hover > ul {
display: block;
}
.current-menu-item a:link {
background: transparent;
}
ul.menu ul ul {
left: 100%;
top: 0;
}
ul.menu li:hover > ul {
visibility: visible}
@media screen and (min-width: 600px) {
.menu {
display: block !important;
}
}
@media screen and (max-width: 479px) {
#Moosewrap {
font-family:sans-serif;
position: relative;
top: 40px;
position: absolute}
#menu-icon {
/*Nav bar in Phone Rest State*/
padding: 8px 10px 0 42px;
cursor: pointer;
border: solid 1px #666;
display: block;
}
.menu {
/*Dropdown background in Phone */
clear: both;
position: absolute;
top: 38px;
width: 180px;
z-index: 10000;
padding: 5px;
border: solid 1px #eee;
display: none;
}
.menu li {
clear: both;
float: none;
margin: 5px 0 5px 2px;
}
.menu a:link,.menu ul a:link {
background: none;
display: inline;
padding: 0;
border: none;
}
.menu a:visited,.menu ul a:visited {
background: none;
display: inline;
padding: 0;
border: none}
.menu ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
.menu ul li {
margin: 0px 0 0px 0px;
}
}
/* OOOOOOOOOOOOOOOOOOOOOO Begin Style OOOOOOOOOOOOOOOOOOOOOOOOOOOO */
.menu a:link {
color: #000;
background: transparent;
}
.menu a:visited {
color: #000;
background: transparent;
}
.menu a:hover {
background: transparent;
color: #000;
}
.menu ul {
background: transparent;
}
.menu ul li a:link {
color: #000;
background: #eee;
}
.menu ul li a:visited {
color: #000;
background: #ddd;
}
.menu ul li a:hover {
color: #000;
background: #eee;
}
@media screen and (max-width: 479px) {
#menu-icon {
color: #fff;
width: 42px;
height: 30px;
background: #060 url(menuicon.png) no-repeat 0px center;
border: solid 1px #666;
}
#menu-icon:hover {
background-color: #090;
}
#menu-icon.active {
background-color: #369;
}
.menu {
background: #ddd;
border: solid 1px #000;
}
.menu a:link,.menu ul a:link {
background: none;
color: #000;
}
.menu a:visited,.menu ul a:visited {
background: none;
color: #000;
}
.menu a:hover, .menu ul a:hover {
background: transparent;
color: #000;
}
.menu ul {
background: inherit;
}
}
/* OOOOOOOOOOOOO End Responsive Menu OOOOOOOOOOOOOOOOOOOOOOOOO */
WordPress Widget Styling
############## In CSS #####################
.cat-item a:link{
list-style-type: none;
font-family:sans-serif;
font-weight: normal;
color: #000;}
.cat-item a:visited{
list-style-type: none;
font-family:sans-serif;
font-weight: normal;
color: #000;}
.cat-item a:hover{
list-style-type: none;
font-family:sans-serif;
font-weight: normal;
color: #f00;}
.cat-item{list-style-type: none;}
.widgettitle{
width:100%;
margin-top:10px;
}
.widgettitle{
font-family:sans-serif;
font-weight: normal;
color: #000;
list-style-type: none;
}
.widgettitle
{
font-family:sans-serif;
font-weight: bold;
color: #fff;
background-color: #000;
width:100%;
text-align:center;
}
li{list-style-type: none;}
li.widget{list-style: none; }
#calendar_wrap{border: 0px solid red;}
#calendar_wrap caption{font-family:sans-serif;font-weight: normal; color: #000000;}
#calendar_wrap th{font-family:sans-serif;font-weight: bold; color: #000000;;text-align:center;padding:1px}
#calendar_wrap td{font-family:sans-serif;font-weight: normal; color: #000000;text-align:center;padding:1px}
#calendar_wrap a:link{font-weight:bold}
textarea {background-color:#eee;border:1px solid #008800;}
input {background-color : #eee;border: 1px solid #008000;}
.screen-reader-text{display:none;}
#s {width:100%;border:1px solid #000;}
#searchsubmit,#submit {
background-color: #369;
padding-left:6px;
padding-right:6px;
padding-top:1px;
padding-bottom:1px;
color: #ffffff;
border:1px solid #000;
background-image: url(images/button_bg.jpg);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:5px;
}
#searchsubmit:hover,#submit:hover {background-color: #000;}
.form-allowed-tags{display:none}
.avatar{display:none}
.textwidget{font-family:sans-serif;}
############## In Each Media Screen #####################
.menu a:link {padding: 4px 15px;font-size:14px}
ul.menu ul ul { left: 135px}
li{font-size:12pt;}
#calendar_wrap{margin-top:-10px;margin-left:0px}
#calendar_wrap caption{font-size:12pt;}
#calendar_wrap a:link{font-size:12pt;}
#calendar_wrap th{font-size:12pt;}
#calendar_wrap td{font-size:12pt;}
.logged-in-as a:link{font-size:12pt}
.widgettitle{font-size:12pt;padding:8px 2px;}
.widget_archive ul{margin-left:-30px}
.textwidget{font-size: 12pt;line-height:15pt;}
.widget_archive a:link{font-size:12pt}
.widget_archive a:visited{font-size:12pt}
.widget_archive a:hover{font-size:12pt}
WordPress Thumbnail
In Div
<?php if ( has_post_thumbnail() ) { ?>
<div class="thumbnail">
<?php the_post_thumbnail( '100%' ); ?>
</div>
<?php } ?>
In Stylesheet
.thumbnail img{width:100%;height:auto}
Column Percentage Widths
.container_12 .fluid_1 {width:8.33333%;}
.container_12 .fluid_2 {width:16.66666666%;}
.container_12 .fluid_3 {width:25.0%;}
.container_12 .fluid_4 {width:33.333%;}
.container_12 .fluid_5 {width:41.666666%;}
.container_12 .fluid_6 {width:50.00%;}
.container_12 .fluid_7 {width:58.33333%;}
.container_12 .fluid_8 {width:66.666666%;}
.container_12 .fluid_9 {width:75%;}
.container_12 .fluid_10 {width:83.333%;}
.container_12 .fluid_11 {width:91.666%;}
.container_12 .fluid_12 {width:100%;}