Development – Page 17

HTML

CSS

#homepage-video {
	&.embed-responsive {
		position: relative;
		display: block;
		height: 0;
		padding: 0;
		overflow: hidden;
	}
	&.embed-responsive .embed-responsive-item,
	&.embed-responsive iframe,
	&.embed-responsive embed,
	&.embed-responsive object,
	&.embed-responsive video {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	&.embed-responsive-16by9 {
		padding-bottom: 35%;
	}
	&.embed-responsive-4by3 {
		padding-bottom: 55%;
	}
}

November 23, 2016January 29, 2022

Header menu background color change on scrolling

Development, Front End, jQuery / JavaScript

$(window).scroll(function () {
	var scroll = $(window).scrollTop();

	if (scroll >= 100) {
		$("header").addClass("scrolling");
	} else {
		$("header").removeClass("scrolling");
	}
});

November 21, 2016January 29, 2022

Import large SQL files into local DataBase

Back End, Database, Development

MAC OS

/Applications/MAMP/Library/bin/mysql -u root --password wp_schleese < schleese.sql

Windows

C:/xampp/mysql/bin/mysql.exe -u root --password wp_schleese < schleese.sql

November 10, 2016April 11, 2022

Landing Splash Page Full Screen Banner Background

CSS, Development, Front End

EXAMPLE
full screen example

HTML

CSS

.splash-banner {
  background: #f28f2d url();
  height:100vh;
  after:: {
    
  }
}
.scroll-down-icon {
    width: 100%;
    position: absolute;
    bottom: 35px;
    left: 0;
    text-align: center;
    z-index:6;
}

November 10, 2016January 29, 2022

Auto Tel Link (a tag In The Current Version of Framework)

Development, Front End, jQuery / JavaScript

EXAMPLE

HTML

19054567890

jQuery(function($) {
  $(document).ready(function() {
    $(".tel").each(function () {
	var href = "";
	href = $(this).attr("href");
	if (href == "" || href == null) {
		href = $(this).text();
		href = href.replace(/\s+/g, '');
		href = href.replace(/[{()}]/g, '');
		href = href.replace(/-/g, '');
		href = href.replace(/\./g, '');
	}
	if (href.indexOf("tel") < 0) {
		$(this).attr("href", ("tel:" + href));
	}
	});

  });
});

CSS

a, .a {
  text-decoration: none;
  border-bottom: 1px solid #f28f2d;
  //replace #f28f2d with colour of choice
  -moz-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
  -webkit-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
  transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
}

a:hover, a:focus, .a:hover, .a:focus {
  color: #f28f2d;
}

November 10, 2016January 29, 2022

Link Style (a tag) Default Setup

CSS, Development, Front End

EXAMPLE

HTML

Link item style

CSS

a, .a {
  text-decoration: none;
  border-bottom: 1px solid #f28f2d;
  //replace #f28f2d with colour of choice
  -moz-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
  -webkit-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
  transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
}
a:hover, a:focus, .a:hover, .a:focus {
  color: #f28f2d;
}

October 20, 2016April 11, 2022

WordPress – Custom Login Form shortcode

Back End, Development, WordPress Functions and Hooks

function custom_login_form( $args ) {
	$redirect_url = 'https://christinewilson.ca';
	$defaults = shortcode_atts( array(
		'echo'              => false,
		'redirect'          =>  $redirect_url,
		'form_id'           => 'loginform',
		'label_username'    => 'Username',
		'label_password'    => 'Password',
		'label_remember'    => 'Remember Me',
		'label_log_in'      => 'Log In',
		'id_username'       => 'user_login',
		'id_password'       => 'user_pass',
		'id_remember'       => 'rememberme',
		'id_submit'         => 'wp-submit',
		'remember'          => true,
		'value_username'    => NULL,
		'value_remember'    => false
	), $args );
	$login_args = wp_parse_args( $args, $defaults );
	return wp_login_form( $login_args );
}
add_shortcode( 'login_form', 'custom_login_form' );

October 12, 2016January 29, 2022

PHP – get and save a file on the server

Back End, Development, PHP

$site = 'http://finance.yahoo.com/d/quotes.csv?s=IAC-A.TO&f=snll1c';
$homepage = file_get_contents($site);
$filename = 'wp-content/themes/infor/cache/quotes.csv';
$handle = fopen($filename,"w");
fwrite($handle,$homepage);
echo "Success";
fclose($handle);

October 11, 2016January 29, 2022

Custom Fancybox CSS Style

CSS, Development, Front End

EXAMPLE
Here is an example implementation of fancy box on the Albany Pump website.

CSS File

body {  
  // fancybox skin style
  .fancybox-skin {
  	// -webkit-box-shadow:none;
  	// -moz-box-shadow: none;
  	// box-shadow:none;
  	// background:none;
  }

  // close button
  .fancybox-close {
  	// background: url(../images/IMAGE-NAME.png) no-repeat;
  	// background-size: 20px 20px;
  	// top: -40px;
  }
  .fancybox-close:hover, .fancybox-close:focus {
  }

  // fancybox caption text area
  .fancybox-text {
  }

  // fancybox next control button
  .fancybox-next span {
  }
  .fancybox-next span:hover, .fancybox-next span:focus {
  }

  // fancybox previous control button
  .fancybox-prev span {
  }
  .fancybox-prev span:hover, .fancybox-prev span:focus {
  }

  .fancybox-title.fancybox-title-float-wrap {
  	span {
  	}
  	> .child {
  	// border-radius: 0px;
  	// background-color: rgba(0,112,60,0.85);
  	// white-space: normal;
  	// text-shadow: none;
  	}
  }
}

October 11, 2016January 29, 2022

jQuery Window Resize

Development, Front End, jQuery / JavaScript

    var $window = jQuery(window);

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 1400) {            
            jQuery("#first-tab").click(function() {
           	//do something
            });
        } else {
            jQuery("#first-tab").click(function() {
		//do something
            });
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
    jQuery(window).bind('resize', checkWidth);

Category: Development

Add responsive full width video on background

Header menu background color change on scrolling

Import large SQL files into local DataBase

Landing Splash Page Full Screen Banner Background

Auto Tel Link (a tag In The Current Version of Framework)

Link Style (a tag) Default Setup

PHP – get and save a file on the server

Custom Fancybox CSS Style

jQuery Window Resize