Tag Archives: css3

flex layout

vary good source for flex layout
https://codepen.io/anon/pen/VKxRoE?editors=1100

Advertisements

How make your background image full size of the screen and cross mobile,table and desktop in Foundation

Recently a task is using the existing foundation basic page to rewrite it to a new design. It is my first time working in Foundation Framework, previous I always using bootstrap.

And from doing this get understand how foundation works. Wow, take a day to achieve it.

And for make the background image full size of the screen and cross the mobile,table and desktop that took me few hours to fix it.

I just like to put my piece of code over there, hope that could help my fans.

.main-background{    
	background:#f38f04 url('/images/bg-img.png') no-repeat center center fixed; 
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
	width: 100% !important;
	z-index: 0;
}

the fixed and width:100% !important that is very important to make it happens.

Bootrap Jumbotron into WordPress Theme

In this post I will use a bootstrap Jumbotron template,here is the link http://getbootstrap.com/examples/jumbotron/  I will  customize it into wordpress theme

You need download bootstrap into” yourtheme “folder, whatever theme name you like to call it.

bootstrap_to_wordpress2

 

Those fold should inside your theme folder, don’t worry what are inside it except everything from bootstrap, the other file is empty now.

1) for wordpress could read you theme you need put those on top of your style.css:

/*
Theme Name: Bootstrap to WordPress
Theme URI: http://sandywebdesigner.com
Author: Sandy Zhang
Author URI: http://sandywebdesigner.com
Description: Example theme for  how to convert static Bootstrap site into dynamic WordPress theme
Version: 1.0
License:
License URI:
Text Domain: bootstrap-to-wp

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/

/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
.admin-bar .navbar-fixed-top {
margin-top: 30px;
}
/* Below is the style for navigation in functions.php add a class to sub-menu to the navigation so I just write a simple style to it,you could customize it by yourself */
@media (min-width:768px) {
.sub-menu {
display: none;
position: absolute;
background: #222;
padding: 10px 15px;
width: 150px;
}

li:hover .sub-menu {
display: block;
}

}

.sub-menu li {
margin-bottom: 10px;
list-style: none;
}

.sub-menu li:last-child {
margin-bottom: 0;
}

.sub-menu a  {
color: #999;
text-decoration: none;
}

.sub-menu a:hover  {
color: #fff;
}

.current-menu-item > a, .current-menu-parent > a {
background: #000;
}
.current-menu-parent li a {
background: inherit;
}
.current-menu-parent .current-menu-item a {
color: #fff;
font-weight: bold;
}

.sidebar{
margin-top:40px;
color:#444;
}
.sidebar h3{
color:#888;
}
.widget{
margin:10px 0 30px;
}
article .post{
margin:20px 0;
}

.featured-image img,
.portfolio-piece img,
.portfolio-image img {
max-width:100%;
}

.prev-next{
font-size:24px;
margin-top:30px;
text-align:right;
}

@media (max-width:540px) {
.portfolio-piece h4{
font-size:.8em;
}
.prev-next{
font-size:15px;
margin-top:15px;
text-align:right;
}

}

2)header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’);?>/images/favicon.ico”>

<title>
<?php wp_title(‘|’,true,’right’);?>
<?php bloginfo(‘name’)?>

</title>

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div class=”navbar navbar-inverse navbar-fixed-top” role=”navigation”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>
</div>
<div class=”navbar-collapse collapse”>
<?php
$args = array(
‘menu’ => ‘mainmenu’,
‘menu_class’ => ‘nav navbar-nav’,
‘container’ => ‘false’
);
wp_nav_menu($args);
?>
</div><!–/.navbar-collapse –>
</div>
</div>

3)footer.php

<hr>

<footer>
<p>&copy; <?php bloginfo(‘name’);?> <?php echo date(‘Y’); ?></p>
</footer>
</div> <!– /container –>
<?php wp_footer(); ?>
</body>
</html>

3)index.php

<?php get_header(); ?>

<div class=”container”>

<div class=”row”>
<div class=”col-md-9″>
<?php if(have_posts()):while(have_posts()):the_post();?>
<div class=”Page-header”>
<h1><?php the_title(); ?></h1>
</div>
<?php the_content();?>
<?php endwhile; else:?>

<div class=”Page-header”>
<h1>Oh no!</h1>
</div>
<p>No content is appearing for this page!</p>
<?php the_content();?>

<?php endif;?>

</div>
<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

4)functions.php

<?php
function theme_styles(){
wp_enqueue_style( ‘bootstrap_css’, get_template_directory_uri() . ‘/css/bootstrap.min.css’ );
wp_enqueue_style( ‘main_css’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘theme_styles’ );

function theme_js(){
global $wp_scripts;
wp_register_script( ‘html5_shiv’, ‘https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js&#8217;, ”, ”, false );

wp_register_script( ‘respond_js’, ‘https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js&#8217;, ”, ”, false );

$wp_scripts->add_data( ‘html5_shiv’, ‘conditional’, ‘lt IE 9’ );
$wp_scripts->add_data( ‘respond_js’, ‘conditional’, ‘lt IE 9’ );
wp_enqueue_script( ‘bootstrap_js’, get_template_directory_uri() . ‘/js/bootstrap.min.js’, array(‘jquery’), ”, true );
wp_enqueue_script( ‘theme_js’, get_template_directory_uri() . ‘/js/theme.js’, array(‘jquery’,’bootstrap_js’), ”, true );

}

add_action( ‘wp_enqueue_scripts’, ‘theme_js’ );

add_theme_support(‘menus’);
add_theme_support(‘post-thumbnails’);

function register_theme_menus() {
register_nav_menus(
array(
‘header-menu’    => __( ‘mainmenu’ )
)
);
}
add_action( ‘init’, ‘register_theme_menus’ );

function create_widget( $name, $id, $description ) {

register_sidebar(array(
‘name’ => __( $name ),
‘id’ => $id,
‘description’ => __( $description ),
‘before_widget’ => ‘<div class=”widget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’
));
}

create_widget( ‘Front Page Left’, ‘front-left’, ‘Displays on the left of the homepage’ );
create_widget( ‘Front Page Center’, ‘front-center’, ‘Displays in the center of the homepage’ );
create_widget( ‘Front Page Right’, ‘front-right’, ‘Displays on the right of the homepage’ );
?>

See how simple it is, index.php you completed, then use this index.php to create other template like page.php. single.php, etc. Have fun!

 

 

 

 

 

 

Create a video in your HTML5 page, here is the javascript code you needed it

Here i put the java script source code make your video work.

here the final file you needed it.

function doFirst(){
    barSize=600;
    myMovie=document.getElementById(‘myMovie’);
    playButton=document.getElementById(‘playButton’);
    bar=document.getElementById(‘defaultBar’);
    progressBar=document.getElementById(‘progressBar’);
    
    playButton.addEventListener(‘click’,playOrPause,false);
    bar.addEventListener(‘click’,clickedBar,false);
}
function playOrPause(){
   if(!myMovie.paused && !myMovie.ended ) {
       myMovie.pause();
       playButton.innerHTML=’Play’;
       window.clearInterval(updateBar);
   }else{
       myMovie.play();
       playButton.innerHTML=’Pause’;
       updateBar=setInterval(update,500);
   }
}

function update(){
    if(!myMovie.ended){
        var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);
        progressBar.style.width=size+’px’;
    }else{
         progressBar.style.width=’0px’;
          playButton.innerHTML=’Play’;
          window.clearInterval(updateBar);
    }
}

function clickedBar(e){
    if(!myMovie.paused && !myMovie.ended){
        var mouseX=e.pageX-bar.offsetLeft;
        var newtime=mouseX*myMovie.duration/barSize;
        myMovie.currentTime=newtime;
        progressBar.style.width=mouseX+’px’;
        
    }
}
window.addEventListener(‘load’,doFirst,false);

Then here is your css code for add video to your html5 page–continue

Here I put the css style for mark up your video appearance. not very beautiful, but it works, you could change this to what you like.

Css3 style below: (next post is the javascript file, you need add to make the video works.)

body{
text-align:center;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
#skin{
width:700px;
margin:10px auto;
padding:5px;
background:red;
border:4px solid black;
border-radius: 10px;
}
nav{
margin:5px 0px;
}
#buttons{
float:left;
width:70px;
height:22px;
}
#defaultBar{
position: relative;
float:left;
width:600px;
height: 16px;
padding:4px;
border:2px solid black;
background-color:yellow;
}
#progressBar{
position: absolute;
width:0px;
height:16px;
background:blue;
}

Create a video in your HTML5 page–continue

Here I am going to continue my post. HTML5 page added video is much easy now.

put below source code in your html body ,next post is the css style.

<section id = “skin”>
<video id=”myMovie” width=”640″ height=”360″>
<source src=”videos/movie.mp4″ type=’video/mp4′ >
</video>

<nav>
<div id=”buttons”>
<button type=”button” id=”playButton”>Play</button>
</div>
<div id=”defaultBar”>
<div id=”progressBar”>
</div>
</div>
<div style=”clear: both;”>

</div>

</nav>

</section>