Author Archives: vgorbic1

musicfortrio.com

Goal: Develop an e-commerce website for the “Music for Trio” company that sells music online. Use WordPress as a CMS for the site with a e-commerce plugin. Test and deploy the site on the company’s server. Provide ongoing maintenance.
Web technologies used: HTML5, CSS, PHP, WordPress.
Tools and software: Photoshop, MS Visual Studio Code
Release date: October, 2017
Project type: Contract work for Music for Trio.
musicfortrio.com

Remove the Form on Contact Form 7 WordPress plugin after the submission

To remove form fields on a contact form that uses Contact Form 7 WordPress plugin after the successful submission, add this code to the functions.php file in the WordPress installation:

add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
/* <![CDATA[ */
document.addEventListener( 'wpcf7mailsent', function( event ) {
  jQuery(".wpcf7-form.sent").find('p').hide();
}, false );
/* ]]> */
</script>
<?php
}

Display the Woocommerce Product Tags in a simple list

Default setting of the WordPress WooCommerce Product Tag Widget displays the tags in a cloud. If you want to display the tags in a simple list, add the follow code to the function.php file:

add_filter('woocommerce_product_tag_cloud_widget_args', 'nwb_woo_tag_cloud_filter');
function nwb_woo_tag_cloud_filter($args) {
	$args = array(
		'smallest' => 14, 
		'largest' => 14, 
		'format' => 'list', 
		'taxonomy' => 'product_tag', 
		'unit' => 'px', 
		);
	return $args;
}

Copy a Website from the Internet

HTTrack is a free (GPL, libre/free software) and easy-to-use offline browser utility.

It allows you to download a World Wide Web site from the Internet to a local directory, building recursively all directories, getting HTML, images, and other files from the server to your computer. HTTrack arranges the original site’s relative link-structure. Simply open a page of the “mirrored” website in your browser, and you can browse the site from link to link, as if you were viewing it online. HTTrack can also update an existing mirrored site, and resume interrupted downloads. HTTrack is fully configurable, and has an integrated help system.

An overlay layer for a background image

Make an overlay layer for a background image on your template. This is the HTML:

<header id="bg-section">
  <div class="dark-overlay">
   ...
   </div>
  </div>

The SASS:

$dark-overlay: rgba(0,0,0,0.7);

#bg-section {
    background: url('img/bg.jpg') no-repeat center top fixed;
    background-size: cover;
    background-attachment: fixed;
    min-height: 700px;

    .dark-overlay {
        background-color: $dark-overlay;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 700px;
    }
}

Bootstrap 4 beta Starter Template for Vue.js

This is an HTML5 Bootstrap 4 Beta template with Bootstrap CDN links with SRI. Great start for developing Vue.js applications.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>