Tuesday, 15 December 2015

LAYOUT2



CSS LAYOUT1


html css layout examples


http://stackoverflow.com/questions/6158975/css-100-height-layout




======================================================================================================



<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0;
}

#container {
display: table;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}

#container > div {
display: table-row;
width: 100%;
}

#container > div > div {
display: table-cell;
width: 100%;
border-radius:10px;

}

#header > div {
height:50px;
border:solid 2px #aaa;
}

#content > div {
height: 100%;
background:#f0f4f0;
border:solid 2px #5a5;
}

#footer > div {
height:50px;
border:solid 2px #a55;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><div>header</div></div>
<div id="content"><div>content</div></div>
<div id="footer"><div>footer</div></div>
</div>

</body>
</html>


=======================================================================================================
CODE: 2
=======================================================================================================

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple absolute co-ordinates</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css" media="screen">
body {
}
body > div {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:2px solid #AAA;
padding:10px;
text-align:center;
}
#header {
position:absolute;
height:50px;
top:10px;
right:10px;
left:10px;
} 
#bodyBox {
position:absolute;
right:10px;
top:94px;
bottom:94px;
left:10px;
border-color:#35C12E;
background-color:#f0f4f0;
}
#footer {
position:absolute;
height:50px;
bottom:10px;
right:10px;
left:10px;
border-color:#B24842;
}
</style>
</head>
<body>
<div id="header">Header content</div>
<div id="bodyBox">Body content</div>
<div id="footer">Footer content</div>
</body>
</html>

=======================================================================================================
CODE: 3
=======================================================================================================


=======================================================================================================


<!DOCTYPE html>
<html lang="en">
<head>

<style>
* {
font-family: Arial;
border-radius: 13px;
}
header, nav, article, footer, address, section {
display: block;
}

#container {
width: 600px;
height: 600px;
margin: auto;
border: 5px solid rgb(127,127,127);
background: orange;
}

header {
margin: 20px;
height: 80px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
text-align: center;
}

.wrapper {
width: 560px;
height: 350px;
margin: auto;
border: 5px hidden rgb(127,127,127);
}

nav {
margin: 0px 5px 5px 0px;
float: left;
width: 100px;
height: 345px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
}

h1, h2 {
margin: 0px;
font-size: 1.7em;
}
h2 {
font-size: 1em;
}
section {
float: left;
margin: 0px;
height: 345px;
width: 300px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
text-align: center;
}
section header {
width: 280px;
margin: 5px;
height: 55px;
}
section footer {
width: 280px;
margin: 5px;
height: 55px;
}
article {
border: 5px solid rgb(127,127,127);
width: 280px;
height: 145px;
margin: 10px 5px;
text-align: center;
}
aside {
margin: 0px;
float: right;
width: 120px;
height: 345px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
text-align: center;
}
footer {
width: 560px;
height: 80px;
margin: 20px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<!--container-->
<div id="container">

<!--start header-->
<header><br />
<h1>&lt;header&gt;</h1>
</header>
<!--end header-->

<!--start wrapper-->
<div class="wrapper">
<!--nav bar-->
<nav><br /><br /><br /><br /><br /><br /><br /><br />
<h1>&lt;nav&gt;</h1>
</nav>
<!--end nav bar-->

<!--start section-->
<section>
<!--start hgroup-->
<hgroup>
<h1>&lt;section&gt;</h1>
</hgroup>
<!--start hgroup-->

<!--start header in section-->
<header><br />
&lt;header&gt;
</header>
<!--end header in section-->

<!--start article in section-->
<article><br /><br />
<p>&lt;article&gt;</p>
</article>
<!--end article in section-->

<!--start footer in section-->
<footer><br />
&lt;footer&gt;
</footer>
<!--end footer in section-->
</section>
<!--end article-->  

<!--Start aside-->
<aside><br /><br /><br /><br /><br /><br /><br />
<h1><pre>&lt;aside&gt;</pre></h1>
<br />                   
</aside>
<!--end aside-->               
</div>
<!--end wrapper-->

<!--start footer-->
<footer>
<br />
<h1>&lt;footer&gt;</h1>
</footer>
<!--end footer-->
</div>
</form>
</body>
</html>
====================================================================

CSS LAYOUT2



=======================================================================================================
CODE: 4
=======================================================================================================


<html>
<head>
<style>
#header{
height: 50px;
background-color: #656;
margin-bottom: 10px;
}
#nav{
float: left;
width: 25%;
height: 300px;
background-color: #999;
margin-bottom: 10px;
}
#content{
float: left;
margin-left: 5%;
width: 65%;
height: 300px;
background-color: #999;
margin-bottom: 10px;
}
#footer{
clear: both;
height: 50px;
background-color: #656;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>My Website</h1>
</div>
<div id="nav">
Home <br>
Menu Item 1 <br>
Menu Item 2 <br>
Menu Item 3 <br>
</div>
<div id="content">
<h2>Item 1 </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod                                                             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,                                                             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo                                                                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum                                                            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,                                                sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
<div id="footer">
Lorem Ipsum
</div>
</body>
</html>

=======================================================================================================
CODE:5
=======================================================================================================


=======================================================================================================

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style>
body {

}
.header {
width: 900px;
height: 60px;
border: 2px solid Black;
margin: 10; <!--Margin Give Space In Items-->
}
.container {
width: 900px;
height: 400px;
border: 2px solid Black;
margin: 10;<!--Margin Give Space In Items-->
}
.footer {
width: 900px;
height: 60px;
border: 2px solid Black;
margin: 10;<!--Margin Give Space In Items-->
}
.main {
width: 600px;
margin-top: 20px;
margin-left: 15px;
height: 350px;
float: left;
border: 2px solid Black;
}
.sidebar {
width: 250px;
height: 350px;
float: left;
margin-top: 20px;
margin-left: 15px;
border: 2px solid Black;
background-color:#transparent;
}
</style>

</head>
<body>
<div class="header">
</div>
<div class='clear'></div>
<div class="container">
<div class="main">
</div>
<div class="sidebar">
</div>
</div>
<div class="footer">
</div>
</body>
</html>

==============================================================================
http://yuilibrary.com/yui/docs/cssfonts/cssfonts-size.html
http://pxtoem.com/
http://endmemo.com/sconvert/pixelpoint.php
===============================================================================

Example: Setting Font Size



==============================================================================



==============================================================================

===============================================================================
CODE:
==============================================================================

<!DOCTYPE html">
<!--
https://www.maketecheasier.com/understanding-wordpress-theme/
https://www.siteground.co.uk/tutorials/wordpress/wordpress_create_theme.htm
-->
<html>
<head>
<title>FbGadgets</title>
<style type="text/css">
body {
text-align: center;
}
#wrapper {
display: block;
border: 2px #a2a2a2 solid;
width: 90%;
margin: 0px auto;
}
#header {
border: 2px #a2a2a2 solid;
}
#content {
width: 75%;
border: 2px #a2a2a2 solid;
float: left;
}
#sidebar {
width: 23%;
border: 2px #a2a2a2 solid;
float: right;
}
#delimiter {
clear: both;
}
#footer {
border: 2px #a2a2a2 solid;
}
.title {
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}
</style>

 </head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">FbGadgets</a></h1>
<p>Just another WordPress site</p>
</div>
</div>
</div>
<!-- end #header --><div id="main">
<div id="content">
<h1>Main Area</h1>
<h1>Hello world!</h1>
<h4>Posted on December 14th, 2015</h4>
<p><p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
</p>
<hr> </div>
<div id="sidebar">
<h2 >Categories</h2>
<ul >
<li class="cat-item cat-item-1"><a href="http://localhost/responsivewebsite/index.php/category/uncategorised/" >Uncategorised</a> (1)
</li>
</ul>
<h2 >Archives</h2>
<ul >
<li><a href='http://localhost/responsivewebsite/index.php/2015/12/'>December 2015</a></li>
</ul>
</div></div>
<div id="delimiter">
</div>
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>

 </body>
</html>
=============================================================================
CODE WITH BORDER  COLOR
http://www.cssauthor.com/free-responsive-blogger-templates/
http://runolite-nbt.blogspot.co.uk/2014/03/another-one-to-fill-space.html
http://newbloggerthemes.com/moments-blogger-template/demo/

=============================================================================
<!DOCTYPE html">
<!--
https://www.maketecheasier.com/understanding-wordpress-theme/
https://www.siteground.co.uk/tutorials/wordpress/wordpress_create_theme.htm
-->
<html>
<head>
<title>FbGadgets</title>
<style type="text/css">
body {
text-align: center;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH6Cty1wylyyIz3yxJwpDVHmnDgA5w1o5rnR0TxeQN2bGPHVDtB4i-kbPxPKdDJzoPWszmn-BqJOae07_OPNDGqIqqyMJgOOfklCEVLD9aGAjIbP_g77xR1IYZMEhWxclDVEst45j_VX4/s1600/lined_paper.png");
box-shadow:#CCCCCC 0 0 4px 2px;
}
#wrapper {
display: block;
border: 2px #a2a2a2 solid;
width: 90%;
margin: 0px auto;
}
#header {
border: 2px #a2a2a2 solid;
}
#content {
width: 75%;
border: 2px #a2a2a2 solid;
float: left;
}
#sidebar {
width: 23%;
border: 2px #a2a2a2 solid;
float: right;
}
#delimiter {
clear: both;
}
#footer {
border: 2px #a2a2a2 solid;
}
.title {
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}

.color_col_1 {
background:#EC3233;
height:5px;
}
.color_col_2 {
background:#1EB2B2;
height:5px;
}
.entry-colors .color_col_1, .entry-colors .color_col_2, .entry-colors .color_col_3 {
float:left;
height:5px;
width:33.33%;
}
</style>

</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">FbGadgets</a></h1>
<p>Just another WordPress site</p>
</div>
<div class="entry-colors">
<div class="color_col_1"/>
<div class="color_col_2"/>
<div class="color_col_3"/>
</div>
</div>
</div>
<!-- end #header --><div id="main">
<div id="content">
<h1>Main Area</h1>
<h1>Hello world!</h1>
<h4>Posted on December 14th, 2015</h4>
<p><p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
</p>
<hr> </div>
<div id="sidebar">
<h2 >Categories</h2>
<ul >
<li class="cat-item cat-item-1"><a href="http://localhost/responsivewebsite/index.php/category/uncategorised/" >Uncategorised</a> (1)
</li>
</ul>
<h2 >Archives</h2>
<ul >
<li><a href='http://localhost/responsivewebsite/index.php/2015/12/'>December 2015</a></li>
</ul>
</div></div>
<div id="delimiter">
</div>
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>

</body>
</html>
=====================================================================
WAHT IS GROUP SELCTOR CSS
If you have elements with the same style definitions, like this:
http://www.w3schools.com/css/css_syntax.asp
http://www.similarsites.com/site/cssportal.com
http://csstidy.sourceforge.net/
=======================================================================================
http://www.codebeautifier.com/
http://cssslick.co.uk/
and use this option for below like code
only separated selector (split at,) in this software

 h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

=====================================================================
you can group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
OR USE THIS SOFTWARE Compress and tidy up your CSS

=====================================================================
http://devilo.us/
http://www.cssportal.com/css-optimize/
h1, h2, p {
    text-align: center;
    color: red;
}
===================================================================
OTHERS COMPRESSOR
http://speckyboy.com/2013/05/22/tools-for-formatting-organizing-and-sorting-css-code/

====================================================================

----------------------------------------------------------------------------------------------------------------------
https://www.siteground.co.uk/tutorials/wordpress/wordpress_create_theme.htm
https://make.wordpress.org/training/handbook/theme-school/child-themes/

How to create a WordPress theme?

This tutorial will show you how to create a simple WordPress theme. When building your own theme, you can use our Free WordPress themes for reference.

How to create a basic WordPress theme?

To start building your theme, first create a sub-folder in the wp-content/themes directory in your WordPress folder. For the purpose of this tutorial, we will call the folder "tutorial_theme". The name of the folder should correspond to the name of the theme you want to create. To do this you can use either your favorite FTP client or the File Manager tool in your cPanel.
Before you start creating the theme, you should decide how the layout of your website will look like. In this tutorial we will build a WordPress theme that consist of a header, sidebar, content area and a footer ,as shown below:
MAKE FILES ONE BY ONE AND SAVE IN SAME FOLDER AND ZIP THIS FOLDER
WITH WIN RARARCHIVER V 4.20 http://www.rarlab.com/download.htm


SCREENSHOT IMAGE:




----------------------------------------------------------------------------------------------------------------------



o do this we will have to create the following files into the tutorial_theme directory:
  • header.php - This file will contain the code for the header section of the theme;
  • index.php - This is the main file for the theme. It will contain the code for the Main Area and will specify where the other files will be included;
  • sidebar.php - This file will contain the information about the sidebar;
  • footer.php - This file will handle your footer;
  • style.css - This file will handle the styling of your new theme;
You can either create those files locally with a simple text editor(like notepad for example) and upload them via FTP or you can use the File Manager tool in your cPanel to create the files directly on your hosting account.
Now let's take a closer look at each file and what it should contain:

The header.php file

In this file you should add the following code:
<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>
Basically, this is simple HTML code with a single line containing a php code and a standard WordPress function. In this file you can specify your meta tags such as the title of your website, meta description and the keywords for your page.
Right after the title the line we add
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
tells WordPress to load the style.css file. It will handle the styling of your website.
The
<?php bloginfo('stylesheet_url'); ?>
part of the line is a WordPress function that actually loads the stylesheet file.
Next, we have added the beginning of a "div" with class wrapper which will be the main container of the website. We have set class for it so we can modify it via the style.css file.
After that we have added a simple label HEADER wrapped in a "div" with class "header" which will be later specified in the stylesheet file.

The index.php file

<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
The code in this file begins with
<?php get_header(); ?>
which will include the header.php file and the code in it in the main page. It uses an internal WordPress function to do this. We will explain this in details later in this tutorial. Then we have placed a Main Area text to indicate which section of your theme is displayed in this area.
The next few lines consist of a PHP code and standard WordPress functions. This code checks whether you have posts in your blog created through the WordPress administrative area and displays them.
Next, we include the sidebar.php file with this line
<?php get_sidebar(); ?>
In this file you can display your post categories, archives etc.
After this line, we insert an empty "div" that will separate the Main Area and the Sidebar from the footer.
Finally, we add one last line
<?php get_footer(); ?>
which will include the footer.php file in your page.

The sidebar.php file

In the sidebar.php we will add the following code:
<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2>
<ul >
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
In this file we use internal WordPress functions to display the Categories and Archives of posts. The WordPress function returns them as list items, therefore we have wrapped the actual functions in unsorted lists (the <ul> tags).

The footer.php file

You should add these lines to the footer.php file:
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
With this code we add a simple FOOTER lable. Instead of this code you can add links, additional text, the copyright information for your theme and additional objects.

The style.css file

Add the following lines to the style.css file:
body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
This simple css file sets the basic looks of your theme. Those lines set the background of your page and surround the main parts of your site with borders for convenience.
At this point your website should look like this:

As we have previously mentioned, internal WordPress functions are often used in the code of the theme. You can take a look at the complete Function Reference at the official website of WordPress for more information about each function.
From now on you can modify the CSS file, add images, animations and other content to your theme in order to achieve the looks you want for your blog!
----------------------------------------------------------------------------------------------------------------------------
OR USE THIS  CODE FOR functions.php and save in folder
-------------------------------------------------------------------------------------------------------------------
<?php
//Adds thumbnail to post
add_theme_support('post-thumbnails');

//Adds Menus
add_theme_support('menus');

//Register right sidebar
register_sidebar(array(
'name' => __( 'Right Hand Sidebar' ),
'id' => 'right-sidebar',
'description' => __( 'Widgets in this area will be shown on the right-hand side.' ),
'before_title' => '<h2>',
'after_title' => '</h2>',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget'  => '</div><!-- widget end -->'
));

?>



Related Post for LAYOUT2

  • WAMP TO WORDPRESS INSTALL ------------------------------------------------------------------------------------------------------------- READ MORE: STEP NO:0 = CHECK WINDOW OPERATING SYSTEM STEP NO:1 …
  • BUTTON CHANGE INTO DROPDOWN MENU ----------------------------------------------------------------------------------------------------------------- DIV TAG DROPDOWN MENU https://www.youtube.com/watc…
  • CHANGE CSS TEMPLATE INTO BLOGGER TEMPLATE -------------------------------------------------------------------------------------------------------- READ MORE: http://all-free-download.com/free-website-templates/downloa…
  • IMPORT SQL CSV FILE ON PHPMYADMIN --------------------------------------------------------------------------------------------------- READ MORE: ----------------------------------------------------------------…
  • RESPONSIVE BLOGGER TEMPLATE FB GDGETS ---------------------------------------------------------------------------------------------------------------- RESPONSIVE BLOGGER TEMPLATE FB GDGETS CODE: Read More: ht…
  • SIMPLE CSS LAYOUT http://www.onextrapixel.com/2011/10/20/50-handy-css-tools-and-generators-for-developers/ RESPONSIVE BLOGGER TEMPLATE - YOUTUBE ▶ 9:19 https://www.youtube.com/watc…
  • CHANGE CSS TEMPLATE INTO BLOGGER TEMPLATE -------------------------------------------------------------------------------------------------------- READ MORE: DREAMWEAVER BLOGGER TEMPLATE PART 1 https://youtu.be/TaqrgP…
  • CSS CLICK DROPDOWN -------------------------------------------------------------------------------------------------------------- CODE 1: http://koen.kivits.com/articles/pure-css-menu/ ---------…
  • GENERIC BLOGGER TEMPLATE PARTS ---------------------------------------------------------------------------------------------------- WHAT IS IN BLOG? RESPONSIVE BLOGGER TEMPLATE - YouTube ▶ 9:19 …
Posted by on Tuesday, 15 December 2015 at 05:38
Labels:

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets