Category Archives: How-To

stop sign

How to Add Deny Access to the .htaccess File

The .htaccess file is an important configuration file for websites that use the Apache web server. It allows you to control various aspects of your website, such as redirections, password protection, and caching. However, because the .htaccess file is so powerful, it is also a target for hackers and other malicious actors who may try to exploit it to gain access to your website or server.

One way to protect your .htaccess file is to add a “deny from all” rule to it. This will prevent anyone from accessing the file directly, including hackers who may be trying to modify it.

Here’s how to add a deny access rule to your .htaccess file:

1. Access your website’s .htaccess file

First, you’ll need to access your website’s .htaccess file. You can do this by connecting to your website’s server via FTP or SSH, and navigating to the directory where your website’s files are stored. The .htaccess file should be located in the root directory of your website.

2. Add the deny access rule

Next, open the .htaccess file in a text editor and add the following line at the top of the file:

#deny access to .htaccess
<Files .htaccess>
Order allow,deny
Deny from all
</Files>

This rule specifies that access to the .htaccess file should be denied for all users.

3. Save the changes

Save the changes to your .htaccess file and upload it back to your website’s server.

By adding a deny access rule to your .htaccess file, you can help protect your website from malicious attacks and unauthorized access. However, it’s important to remember that this is just one of many security measures that you should take to protect your website. Be sure to keep your software and plugins up-to-date, use strong passwords, and implement other security best practices to keep your website secure.

How to Add a Sitemap of a WordPress Website

Adding a sitemap for search engines is vital when launching a website unless you want to keep it secret. There are many ways to add a website’s sitemap, but using Yoast SEO plugin could be the easiest way to do it.

1. DOWNLOAD YOAST SEO PLUGIN

  1. Go to Plugins -> Add New and search for the Yoast SEO plugin.
  2. Download and activate it.

2. ENABLE XML SITEMAPS AND GET THE SITEMAP URL

  1. Go to Yoast SEO from the left menu -> General
  2. Enable “On” mode on the XML sitemaps.XML sitemaps
  3. Click on See the XML.
  4. Copy the sitemap url. sitemap url

3. SUBMIT A SITEMAP ON GOOGLE SEARCH CONSOLE

  1. Add a new property (if you haven’t already) for the website you wish to submit the sitemap to on Google Search Console.
  2. Go to Sitemaps from the left menu.
  3. Add a new sitemap by pasting the sitemap URL from step 2 and click on Submit.
  4. *The Status might show Couldn't fetch, but it will update. Couldn't fetch

How to Duplicate/Migrate WordPress Website – Duplicator

Work effective and save time if you are a web developer using WordPress. Duplicate your existing work and use as a template. Get Duplicator and install/active the plugin and follow the instruction below. We have 3 main steps to get all duplicate/migration process done.

1. BACKUP FILES & DOWNLOAD

  1. Get Duplicator plugin
  2. Duplicator -> Create new
  3. Next -> Build
  4. Download Installer.php and ...Archive.zip file

2. DATABASE CREATION ON NEW SERVER

  1. Create Database from MySQL® Databases in cPanel.
  2. Name your database. Add _wp at the end of the database name
  3. Add a user, _user at the end of the database name
  4. Add the user to the database you created. Finally add All Privileges to the user.

3. UPLOAD BACKED UP FILES TO NEW SERVER

  1. Access cPanel on new hosting server. Go to cPanel -> File Manager. Select public_html or very root folder of your WordPress files -> upload your saved Installer and Archive files. (*You can also use FTP (Filezilla) to upload these files. )
  2. Open a web browser -> http://YOUR-DOMAIN.com/installer.php
  3. Select the checkbox, “I have read and accept all terms & notices*”
  4. Select Remove all data and input your Database, User and Password and hit Test Database. If looks good, hit Next.
  5. Click Next for step 4, Login the site with Site Login.
300x200 Contact 7

WordPress Contact Form 7 Submit Button Not Working (Nonstop Wheel Spinning)

Despite the popularity of its name, “Contact form 7” with millions of active installations, numerous plugin users have called out the error when hitting the submit button on the form. The error seems to be occurred by change of environment such as migration of the website. Here’s the solution how this can be resolved.

  • Go to the WP Admin (Backend) -> Plugins -> Plugin File Editor.
  • Select plugin to edit dropdown to select Contact Form 7 and select the file, wp-contact-form-7.php
  • On line 30 (the number can be different) after ‘WPCF7_LOAD_JS’, change true to false

Change of code in “Contact form 7” plugin

if ( ! defined( 'WPCF7_LOAD_JS' ) ) {
	define( 'WPCF7_LOAD_JS', false );
}

Display Inventory Quantity “X items available in stock” On Shopify Product Page

Shopify product page is not so friendly about exceeding the number of quantity in stock. The notification pops up, but users won’t know how much they can actually add more. you-cant-add-more

Display Inventory Quantity on Shopify Product Page

Tested on “Dawn Theme”

<div class="quantity_available">{% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 0 %}
{{ product.variants.first.inventory_quantity }} items available in stock.
{% endif %}</div>

Add this code right above this code from main-product.liquid file.

{%- when 'popup' -%}

items-available

The “8 items available in stock.” is now displayed above the Add to cart button.

WooCommerce Astra: How to Disable Cart Bubble on Hover of the Cart Menu

I’ve been searching how to remove/hide the cart bubble on hover of the cart icon on header in Astra / WooCommerce combination.

This can’t be modified via Appearance -> Customize setting. Instead, I was able to hide the element with a simple CSS line as below:

.ast-site-header-cart:hover .widget_shopping_cart, .woocommerce .ast-site-header-cart:hover .widget_shopping_cart{ display:none; }

Feel free to comment me if this doesn’t work for you.

Chicken turn animation

Make Your Photos into a GIF Animation (Stop Motion) Using Photoshop

I took a bunch of snap shots with my Canon EOS 5D, a DSLR Camera. I thought this could be all put together and exported to a short GIF animation clip for my client’s Instagram.

1 Load Photo in Photoshop

Go to File on the top left menu on Photoshop and select Scripts -> Load Files into Stack

scriptsLoad files into stack

Click Browse and select your photos, hit Okay (You might need to sort your files in name so they can be played in order).

load layers

2 Make Timeline Frames

Open the Timeline palette from the Window menu.

Select the first layer on the Layers palette, click on the Create Frame Animation button (You might have to use the Dropdown button to do this).
Create Frame Animation

Go to the properties of the Timeline palette (3 lines icons at the top right), select the rest of the layers and select Make Frames from Layers.

Make Frames from Layers

You will see all layers have been converted into frames in timeline.

Double check the duration of the animation and leave it to Forever if you want the animation to be repeated and loop forever.
Forever menu

3 Export the file into GIF

Export to GIF

Go to File -> Save for web (or Commend + Option + Shift + S) and select the image format into “GIF” and hit Save.

Now your wonderful GIF animation has been created. Enjoy sharing!

You don't have access

Solved: Adobe Creative Cloud Access to Manage Apps Permission Issue

After the upgrade to new MacOS, I got the message, “You don’t have access to manage apps” from Adobe Creative Cloud, and it won’t let me install or manage any Adobe softwares.

For Mac users, go to the Library -> Application Support -> Adobe -> OOBE -> Configs and copy ServiceConfig.xml to you desktop (You will not be able to edit the file in the folder so you need to make a copy to your desktop). From your desktop, I chose Adobe Dreamweaver to opened the file.
service-config

Edit ServiceConfig.xml

You’ll see a short line of code with two individual false contents. Change both to true.

<config><panel><name>AppsPanel</name><visible>true</visible></panel><feature><name>SelfServeInstalls</name><enabled>true</enabled></feature></config>

Once done, drag your ServiceConfig.xml back to the Configs to overwrite the file.

Restart the Adobe Creative Cloud Widget


Quit and restart Creative Cloud. You may need to restart your computer if you don’t see the change.

Creative Cloud is now working

Ta-Da! Creative Cloud is now back on track!

Wordpress Multisite

Make Your WordPress into a Multisite (Create a Network)

WordPress website can be turned into a Multisite which a feature that enables you to manage a network of websites from one place. This feature is really useful for creating numbers of sub-sites like in franchise business where you share the basic information in one place but needs multiple WooCommerce sites to collect payments and get notification separately.

1. Deactivate all plugins

Wordpress deactivate plugins

This is first thing you would have to do. Go to the WP Admin (Backend) -> Pluggins -> deactivate all your active plugins.

2. Edit WP-CONFIG.PHP

Add define code

Open wp-config.php file using FTP or cPanel -> File Manager.

Find /* That's all, stop editing! Happy blogging. */ line in wp-config.php file (it’s on very end of the file)

/* Multisite */
define( 'WP_ALLOW_MULTISITE', true );

Copy the code and paste above, “That’s all…” in wp-config.php.

3. Create a Network on Your WordPress

network setup

Once you are done with the process #1 and #2, the Network Setup menu should appear on your WordPress Admin page -> Settings -> Network Setup.

Very careful on either choosing Sub-domains or Sub-directories method in your WordPress network as you can’t go back once selected. I prefer the Sub-directories method as it’s much easier, and I like my sub-sites URL go after the slash /.

addresses site in your wordpress

What if the Sub-directory installation is not available?

subdomain installation

I once had a hard time couldn’t figure out why sub-directory installation can’t be selected. But, it’s very simple as deleting some files. Once you see this message, just remove all your existing posts and pages from WP Admin. Empty upload folder if necessary, and come back to this page again. You’ll now able to select the Sub-directory installation.

4. Add Additional Codes to your WP-CONFIG.PHP

After you hit the Install button, WordPress will guide you what to add on your wp-config.php file with some additional lines. In my case, I had to add the following.

additional codes to wp-config

5. Add Additional Codes to your .HTACCESS

This step should also kindly described with #4. Open up the .htaccess file using FTP or cPanel -> File Manager. If you use cPanel’s File Manager, there is a chance .htaccess file be hidden. Go to the Settings menu and make “Show Hidden Files” active.

show hidden files

Paste the code you received from the WordPress Network Setup page. I only removed and replaced the highlighted lines as below.

htaccess replacement

Now, your WordPress site turned into a Multisite. Enjoy!

Youtube Thumbnail

CSS: Make Perfect Responsive YouTube Embedded Iframed Videos

YouTubes are great way to embed videos for websites, and it’s really easy to get code to place on your website. Right-click on the video you wish to embed, select “Copy embed code” from the drop-down menus. Paste the code into the HTML fields and BAM! your video just added to the page.

The video might look great with your desktop screen, but depends on your device screens sizes with dimensions, the video might have black empty spaces on top and bottom of the videos. How do I fix this?

Make Youtube Video Responsive for All Screen Sizes without Leaving Black Areas

Add a wrap .iframe-wrap around the iframe code you embedded.

HTML

<div class="iframe-wrap">
  <iframe width="708" height="398" src="https://www.youtube.com/embed/c9RzZpV460k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS

Copy the code below and paste into your CSS document.

.iframe-wrap {
    position: relative;
    padding-bottom: 50%; /**YOU MIGHT HAVE TO ADJUST TO FIT PERFECTLY**/
}
iframe {
    position: absolute;
    width: 100%
    height: 100%;
}

As commented in the .iframe-wrap, you might have to adjust to fit perfectly. It normally fits well between 50% to 60%. Enjoy coding!

WooCommerce Hollow “Empty” Star Rating to “Full” Filled Stars

5 hollow stars looked my customers rated 0 star on my item not 5 stars. (But it’s 5 star rated though!) For users who sees hollow stars in WooCommerce, there must be mis-specifying font-family in your CSS.

SC-hollow-stars

Check if you have installed the “Easy Social Icons” plugin that is activated with WooCommerce.

Easy Social Icons

Simply deactivate the plugin as it is conflicting the “Font Awesome 5 Free” font-family with WooCommerce. Once the Easy Social Icons plugin deactivated, you will see the full, filled star ratings on your item.

filled star rating

Deceptive Site

Malware/Virus: Fix and Remove “WP-VCD” from my WordPress

My Wordfence (a security plugin for WordPress) alarmed with the “Critical Problems” flag due to the result of the malware / virus scan from my website. I had a similar incident before, and it was a nightmare for me to fix and retrieve the suspended website back to normal.

The Malware Files

  • wp-content/themes/Divi/functions.php
  • wp-core.php
  • unzipper.php
  • wp-includes/wp-vcd.php
  • wp-includes/wp-tmp.php
  • wp-includes/wp-feed.php

The hacker used “wp-” for naming the files, so it’s hard to determine if these are core WordPress files.

However, I was able to know before Google suspend my website away with the red screen, “Deceptive Site ahead”.

This malware is called, “WP-VCD”. It could create random administrator users to control my settings, and in a worse case, my whole hosting server can be infected.

The Solution

The solution was simple. I was able to just trash/remove below files straight from the file manager on my hosting server (The root directory called, “public_html”).

  • wp-core.php
  • unzipper.php
  • wp-includes/wp-vcd.php
  • wp-includes/wp-tmp.php
  • wp-includes/wp-feed.php

However, the infected “functions.php” file was a bit tricky. The malware attack was placed on the existed theme file so can’t just remove it. You would have to edit the “functions.php” file to fix 100%. But, don’t panic. I will carefully show you what to edit from the file.

Use FTP program like Filezilla, or go to the Cpanel -> File Manager -> Root Directory – “wp-content” -> themes -> (your theme) -> functions.php. Open up the file, and remove the first set of PHP snippets code like below. In my case, remove the very first line of file to the line 184 until you see the ending PHP bracket ?>.

REMOVE THE BLUE HIGHLIGHTED CODE

One side note is always back up each files before you permanently terminate in case you have to go back, and do it as soon as possible before Google red flag on your precious webpage.

cPanel: Change / Increase Maximum Upload File Size

Don’t let any large sized file holding you back from uploading!

Here is my story. I was transferring my website from a server to a server. I was exporting one database and one large compressed website file for the “Duplicator” plugin in WordPress. The database file went-in pretty quickly through the File Upload tool, but my compressed file did not as it was over 600 MB in file size.

You can change the maximum size of an uploaded file in cPanel. Go to your cPanel, find the MultiPHP INI Editor from the menu. MultiPHP INI Editor Icon

You will face a bunch of lists on the table.
Upload file size limit table Scroll to find upload_max_filesize and change the value to your desired upload file size. I put mine as 512M. Ta-Da!

Use Dropbox as Website Server Hosting FTP

Looking for a free FTP server? Use Dropbox as your web hosting server for free. First, you have to download and install Dropbox to your computer. Save your file you wish to host for your website in the dropbox folder. Right click and hit “Share”.


Hit “Create Link” and then “Link Settings”. Change “Team Members” to “Anyone with Link” under “Who has access” field. Save your setting, “Copy Link”, and now you are ready to provide the image or other resource url to the website.

All given Dropbox links are ended with ?dl=0. Change it to ?raw=1, and it will be live and your Dropbox will be working as a FTP server.

Example

<img src="https://www.dropbox.com/s/gjgkjqlecf6ek9c/design-custom-j316.jpg?dl=0" /> 

Change above dropbox link as below.

<img src="https://www.dropbox.com/s/gjgkjqlecf6ek9c/design-custom-j316.jpg?raw=1" />
Bootstrap TIme Interval

Bootstrap Uneven Column Heights Issue in Layout Grid System

Bootstrap columns could go wrong and look uneven when columns have different heights. Use float: left to clear out the float properties and to stack blocks to the closest side.

.col-lg-3:nth-child(5n) { clear: left; }

If you have multiple blocks (for instance, 4-column layout) use float: left pseudo-element to apply the class every 5th element 5n.

Thumbnail Reviews

Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review

Very strange? I just made the reviews functionality active on my WordPress Woocommerce website, and I see the icons are broken with square boxes (some says “SSSSS”). There should be some CSS conflicts where the icon fonts were not properly loaded. So, I’ve came up overwriting some CSS styling including a new font-family to the page, and it’s working!

p.stars a:before, p.stars a:hover, p.stars a:visited, p.stars a:focus, p.stars a:hover~a:before, p.stars:hover a:before, p.stars.selected a:not(.active):before, p.stars.selected a.active:before, p.stars.selected a.active~a:before {
    font-family: 'star';
    content: '\53';
    line-height: 1.4 !important;
}
Storefront Thumb

Remove ‘Built with Storefront & WooCommerce’ with CSS lines on WordPress Storefront Theme

Woocommerce offers one of a greatest E-Commerce template themes for free called, “Storefront“. From the Nav to checkout process, all required functionality in order to run an E-Commerce are ready for you to download and activate. But, one little thing is bugging at the bottom of the page, “Built with Storefront & WooCommerce.” line, however, it’s possible to get it out with a few lines of CSS.

Store front copyright

Remove and replace copyright information on Storefront theme

footer .site-infos { display:none; } 				
footer .footer-widgets { border: 0 !important;	}	
footer .footer-widgets::after {  content: "© ADD THIS FOR YOUR COPYRIGHT INFO" }
Oulook on purple sky

Insert or Import an HTML Email (Designed Template) into Outlook Email

If you are a marketer, you should be familiar with email marketing platforms like MailChimp, Campaign Monitor or SendGrid. Most of the email tools, you should be able to drag and drop or hard-code to build email templates. Sometimes I have to use my Outlook (not those email marketing platforms) to send a “designed” email for a company internal announcement to save my bills.

Let me walk you through step-by-step how to insert or import an HTML email ino your Outlook Email.

  1. Save your designed (hard coded) HTML (Download this sample for a test)
  2. Open your Outlook, and click “New Email”.
  3. Click the “Insert Tab” -> “Attach File” -> select the HTML you wish to insert -> click the small dropdown (caret) right next to the “Insert” button -> “Insert as Text”. Insert Screenshot
  4. Done!

Now you are ready to use your just-made designed email template for Outlook!

Redirect HTTPS

Redirect HTTP Website to Secure HTTPS Website Using Simple .htaccess in cPane/Hosting

Check your website if it’s already HTTPS (SSL Certificate is) valid and active by changing http:// to https:// in the URL. If you find your website is already HTTPS active, then let’s make an automatic redirect so users can land on your secured page.

Open your cPanel -> File Manager -> public_html (or very top of your folder structure), and create a file, .htaccess. Add the code to the file and save:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Or download this in a file, unzip, add a period before like this -> “.htaccess”, and upload in your hosting/cPanel (or very top of your folder structure).

Add a Copyright Text / Info Using CSS on WordPress Websites

Let’s don’t bother spending hours to look for footer.php or widgets in WordPress to add your Copyright line on the footer of website. Here’s one easy method to add using CSS.
copyright

Add copyright text / info with CSS for WordPress/Bootstrap websites

footer > div:before {
    content: "© Copyright (YEAR). All rights reserved.";
    font-size: 14px;
    color: #777;
    text-align: center;
    display: block;
    margin: 20px auto;
}
Pop up thumbnail

CSS Only: Easy Modal Lightbox Pop-up (Animated)

Now you can add pop-ups or modal lightbox with CSS only (and really minor single line of JavaScript) on your html, wordpress or bootstrap website, so don’t be afraid.

DEMO: CSS Modal Lightbox

HTML

Copy the code below and paste into your HTML document.

<button onclick="document.getElementById('modal-1').style.display='block'">Click Here</button>

<div id="modal-1" class="modal animate-opacity">
   <div class="modal-content">
      <div class="modal-inner">
         <span onclick="document.getElementById('modal-1').style.display='none'" class="modal-close">&times;</span>
         <h4>Modal Headline</h4>
         <p>Modal description goes here.</p>
      </div> 
   </div>
</div>

You can add multiple modals. Copy the entire codes and replace all modal-1 into modal-2 and modal-3 …

CSS

Copy the code below and paste into your CSS document.

.modal {
	z-index: 10;
	display: none;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5)
}
.modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	max-width: 600px
}
.modal-inner { padding: 20px 30px; }
.modal-close {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	right: 0;
	top: 0;
	background: #ccc;
	padding: 6px 10px;
}
.animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}}

These 4 classes would do the job, and the last class, .animate-opacity is the animated effect when modal opens (so it’s optional).

You can tweak the animation time slower or faster by changing the speed time. It’s currently 0.8 seconds, opac 0.8s, but change it as you need it. Have fun!

Why FileZilla Upload Files Repeatedly Saying “File Transfer failed after transferring”?

If you are stuck uploading files in FileZilla that it repeats the progress bar but not happening anything, and saying “File Transfer failed after transferring XX bytes” in the status log, then one of the possible reasons could be the limit has been reached in your FTP. Most likely, the file(s) you were attempting to upload has exceeded file size (Quota) in FTP account/user. You can request the webmaster of the website (or do it yourself if you have access) to change the file limit to ‘unlimited’ as below.

Change FTP file size limit on cPanel

ftp

  1. Go to the server side and enter cPanel
  2. Find FTP Accounts
  3. Find your FTP account and increase the Quota (File size limit) ‘unlimited’ if possible.

How to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns

Your bootstrap top level menu will not be clickable when you add more menus under it like sub-navs or dropdowns. There are some How-Tos of adding a snippet of JavaScript or php online to make it work, but it seems to be risky and complicated.

Here’s a simple solution changing 1 word from your Bootstrap HTML file:

<li class="dropdown" data-dropdown="dropdown"> 
   <a href="URL" class="dropdown-toggle" data-hover="dropdown">X</a> 
   <ul class="sub-menu dropdown-menu"> 
      <li></li> 
   </ul> 
</li>

Change data-toggle to data-hover. Done!

If you use “Bootstrap-basic” theme on your WordPress, look for a file called, “BootstrapBasicMyWalkerNavMenu.php” under “inc” folder. Find the code “data-toggle” and replace with “data-hover“. Isn’t this super easy!?

How Create a HTML/CSS Ribbon. Simple and Light (None Jpg/Png Image)

Here’s a simple html/css line that could generate a ribbon background with text.

DEMO: CSS Ribbon for Your Website

My Ribbon

HTML

Copy the code below and paste into your HTML document.

<div class="ribbon">
    <span class="ribbon-text">My Ribbon</span>
</div>

CSS

Copy the code below and paste into your CSS document.

.ribbon {
    position: relative;
    background: blue;
    text-align: center;
    z-index: 1;
    width: 240px;
    height: 52px;
    margin: 0 auto;
}
.ribbon-text {
    position: relative;
    display: block;
    font-size: 2em;
    color: white;
 }
.ribbon:before {
    content: '';
    border: 26px solid blue;
    border-left-color: transparent;
    border-left-width: 14px;
    position: absolute;
    top: 0;
    left: -20px;
}
.ribbon:after {
    content: '';
    border: 26px solid blue;
    border-right-color: transparent;
    border-right-width: 21px;
    position: absolute;
    top: 0;
    right: -27px;
}

You can tweak around with different colors and size of the ribbon. Have fun!

Get a free SSL Certificate (Secure Socket Layer) – Change HTTP to HTTPS for your website domain

After Google label non-HTTPS sites as “not secure”, SSL(Secure Socket Layer), the domain with HTTPS is strongly encouraged by Google. SSL Certificate used to be quite pricy as it cost generally $80 – $200 annually, but as the demand increased, there is a way to obtain SSL certificate completely free!

Step-by-step Guide:

  1. Go to https://www.cloudflare.com/
  2. Create your account by signing up. Log in afterwards.
  3. “+Add Site” on top right. Screen Shot 2018-05-24 at 12.42.25 AM
  4. Add your site information.
  5. Hit “Next” on “We’re querying your DNS records”.
  6. Confirm the “Free” plan.
  7. It will show DNS query result for your site. Review and hit “Continue”
  8. Change your nameservers(DNS) as described. Screen Shot 2018-05-24 at 12.36.56 AM
  9. On Domain Summary, change “SSL: Full” to “Flexible” no need to hit “Save”. Screen Shot 2018-05-24 at 12.41.50 AM
  10. You are done with the DNS setting. Wait a few hours to 48 hours making sure test your site with adding “https://” in front of your domain url. Once it picks it up with “Not secure” message, then we are in good shape.

If you are using wordpress websites, install a plugin called, “Really Simple SSL”. To find “plugins” on the backend, find the “Plugins” from the left menu, -> “Add new” -> look for “Really Simple SSL”, install and activate the plugin. This plugin will help your website to redirect any old HTTP to HTTPS.

Force an Anchor Tag Not Clickable with CSS

Yes, it is possible to make your anchors not clickable with simple CSS lines on your website. I know sometimes you developers can’t change the core HTML codes and only have access to the CSS file. Below is the CSS that does the magic.

Make an Anchor Tag Nonclickable with CSS

a {
 pointer-events: none;
 cursor: default;
}
Remove Proudly Powered by Wordpress Thumbnail

Remove Proudly powered by WordPress Theme and Replace with Your Own © Copyright Information

WordPress Theme users, let’s remove “Proudly powered by WordPress” from the footer of your website. It’s pretty simple. A line of CSS would do the job.

Remove “Proudly powered by WordPress” on Twenty Sixteen, Twenty Seventeen, Twenty Nineteen, Twenty Twenty-One Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

footer .site-info { 
 display: none !important; 
}
footer.site-footer:after {
 content: "© YOUR WEBSITE NAME";
}

Replace YOUR WEBSITE NAME as you like.

footer.site-footer:after {
 content: "© YOUR WEBSITE NAME";
 margin: auto;
}

If you want to center align the Copyright line, add margin:auto like below:

Remove “Powered by WordPress” on Twenty Twenty Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

.powered-by-wordpress {
    display: none;
}

Remove “Proudly Powered by WordPress” on Twenty Twenty-Two Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

.has-text-align-right {
    display: none;
}

Now it’s all good!

Storefront

Remove “Storefront designed by WooThemes” on Woocommerce Storefront Theme

Get Custom Phone Case Now!

Woocommerce offers a well designed free template for everyone called, the Storefront. By adding the CSS codes below, you can remove the credits, “Storefront designed by WooThemes” without editing or deleting a line of the core programmings. So instead of deleting anything, you are just hiding the text actually. So it’s a risk free, easy and fast!

Remove “Storefront designed by WooThemes” Credits

Place the CSS line on the WordPress backend where CSS is located:
(Go to the Backend page -> Appearance -> Editor)

footer .site-info { 
 display: none !important; 
}
footer .col-full:after { 
 content: "© YOUR COMPANY NAME";
 font-size: 15px;
 color: #777;
 line-height: 140%;
 text-align: center;
 display: block;
 margin: 20px auto;
}

Now you’ll see the line, “Storefront designed by WooThemes” is gone. Feel free to edit the font-size and color of your own.

Thumbnail of JavaScript

Make Clickable Link with JavaScript instead of HTML Anchor

Sometimes you just can’t edit the HTML but still need to make the div clickable. Here’s how with using JavaScript. *Jquery needs to be installed.

<script> 
$('.YOUR-CLASS-NAME').each(function() {
var link = $(this).html();
$(this).contents().wrap('<a href="YOUR-URL-LINK"></a>');
});
</script>

You need to replace .YOUR-CLASS-NAME with your div’s class and replace "YOUR-URL-LINK" with your destination link. Pretty simple, heh?

Vertical Align Center Thumbnail

CSS Vertical Align Center

Let’s  vertical align your design elements with CSS and HTML! Despite how popular people search for this method, vertical centering your contents seems not easy than you think for beginners. Below method could be the one of the simplest ways you can make it happen.

DEMO: How to Vertically Align Middle with CSS

Vertical Align Demo

Box One

Vertical Align Center

Box Two

Vertical Align Middle

Box Three

Vertical Align Center

HTML

Copy the code below and paste into your HTML document.

<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
</div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>

You can tweak around with different colors of the boxes or texts. Have fun!

CSS

Copy the code below and paste into your CSS document. You need to make the same min-height and line-height on the outer part of the div. In my case, I have 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

In case if this css isn’t working, you can try as below.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

You can tweak around with different colors of the boxes or texts. Have fun!

JavaScript Redirect

Simple JavaScript Redirect Code for HTML

Here’s the one of the simplest ways to redirect your site’s traffic.

Redirect to Different URL

Copy the code below and paste it to your blank html.

<script language="javascript">
window.location.href="http://YOUR-REDIRECT-PAGE"
</script>

*Replace YOUR-REDIRECT-PAGE with your new URL.

Storefront

Remove Product Description and Reviews Tabs in Woocommerce Storefront Theme

Wocommerce offers the tabs: “Product Description”, “Reviews and/or “Additional Information” in the product detail page. Let’s find a way to remove or disable the tabs while you are using in the “Storefront” theme.

Remove “Product Description”, “Reviews” and “Additional Information” Tabs

Go to the backend -> Appearance -> Editor -> Find “storefront-functions.php” on the right. Input below code in the very bottom. “Update File” after adding the codes.

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['reviews'] ); // Remove the reviews tab
unset( $tabs['additional_information'] ); // Remove the additional information tab

return $tabs;

}

If you wish to keep one or two of the three tabs, just remove the corresponding line from the codes. Enjoy woocommerce!

HTTPS thumbnail

Resolved! Loading Your Google Fonts Over https (SSL) Sites

I couldn’t believe how amazingly simple it was! I was searching for days and nights how to make my google fonts properly load over on my WordPress https (SSL) site.

Here’s the basic story. I’m running an e-Commerce store with a Secure Sockets Layer installed on the domain. I created the logo with “La Belle Aurore” font from Google. When customers pay for their purchase, they have to land on the cart page showing https. My logo won’t be properly showing when my customer uses IE (Internet Explorer 11) browsers or my Safari from iPhones, so I really had resolve this issue.

I’ve seen some people trying to resolve the issue by creating weird code in the .htaccess file or tweaking the .function file in WordPress theme. I’ve tried it, but none of them actually worked for me.

Ta-Dah! It was simpler than I thought. I deleted the http: part on my CSS file, and it worked like magic! So DO “//fonts.googleapis.com/css?family=XXX”, NOT “http://fonts.googleapis.com/css?family=XXX”

@import url(//fonts.googleapis.com/css?family=NAME_OF_YOUR_FONT_FAMILY);

I used “La Belle Aurore” font on my site, so here’s what I have. @import url(//fonts.googleapis.com/css?family=La+Belle+Aurore); I hope this method save your time as well. Good luck!

Table Width CSS Thumb

CSS: A Simple Way to Set the Table Column Width

Here’s a very simple way to size your table width with a few lines of CSS instead of giving inline values to it. This method is much easier for creating responsive tables.

DEMO: How It Looks

35% 15% 5% 35% 10%
A B C D E
A B C D E
A B C D E

CSS

Copy the code below and paste into your CSS document.

table tr td { padding:20px }
table td:nth-child(1) { width:35%; }
table td:nth-child(2) { width:15%; }
table td:nth-child(3) { width:5%; }
table td:nth-child(4) { width:35%; }
table td:nth-child(5) { width:10%; }

HTML

Copy the code below and paste into your HTML document.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

You can copy both CSS and HTML codes to your file and tweak around as you like!

Circled Numbers

Circled Number Lists (HTML/CSS)

Get Custom Phone Case Now!

You can make a circle around your Ordered List, <ol> as below without using image formats like JPG or PNG, so this way you can reduce the developing and loading time for your site.

DEMO: How It Looks

Circle Around Numbers in Steps (HTML & CSS)

  1. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
  2. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
  3. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
  4. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
  5. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.

CSS

Copy the code below and paste into your CSS document.

ol {
    counter-reset:item; 
    margin:0; 
    padding-left:0; 
}
ol>li {
    counter-increment:item; 
    list-style:none inside; 
    margin: 40px 0;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 1.3;
}
ol>li:before {
    content:counter(item) ;
    margin-right: 20px;
    padding: 8px;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 65px;
    background: #fe862c;
    color: #fff;
    text-align: center; 
    font: 56px 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 100;
    float: left;
}

HTML

Copy the code below and paste into your HTML document.

<ol>
<li>Lorem ipsum dolor sit amet, felis dui nam, vivamus turpis bibendum et massa.</li>
<li>At augue, erat dui odio. Duis lectus, laoreet et, dolor nascetur tellus tellus sit etiam, massa leo dolor. Magna mi vitae et, lectus pellentesque, nec magna et ante, vehicula torquent venenatis tempor eget, elementum condimentum. </li>
<li>Integer porttitor donec, justo in, in pede, et leo ornare viverra erat ac. Dui diam, a sed purus, porta penatibus. Magna in, congue quam pulvinar cras malesuada condimentum nunc, vestibulum ut dolor tortor fusce nibh sollicitudin.</li>
<li>Vitae in, a pulvinar velit laoreet, tristique nascetur sapien. Placerat nunc a integer tincidunt sem, vivamus turpis, erat pulvinar interdum rhoncus nonummy vitae, etiam eleifend arcu non cras a commodo.</li>
<li>Quis mus donec, volutpat placerat nam et eros quam enim, id tincidunt aliquam libero odio, suspendisse a quam tristique ligula.</li>
</ol>

You can copy both CSS and HTML codes to your file and tweak around as you like. Enjoy coding!

mailchimp

Quick Start Guide to MailChimp for WordPress

This post will be a quick start guide to MailChimp for WordPress plugin. You might use it to collect massive email data from the visitors of your website in order to send a blast of email for your personal or commercial needs. For beginners, MailChimp is a great place to start with your email campaign where that is available to “send 12,000 emails to 2,000 subscribers for free”.

  • 1

    Download the MailChimp for WordPress Plugin. https://wordpress.org/plugins/mailchimp-for-wp/ or go to your WordPress Admin -> Plugins -> Add New -> (Search for) MailChimp for WordPress -> Download & Activate.

  • 2

    Sign up MailChimp website for free. http://mailchimp.com/

  • 3

    Create and name your list. Go to the ‘List’ menu on the sidebar. Create a list.

  • 4

    Go to your name at the top of the sidebar and select ‘Account’.

  • 5

    Create API Key. On the top menu click ‘Extras’ -> API keys -> ‘Create A Key’

  • 6

    Copy the API Key you just created and Paste it onto your ‘MailChimp for WP’ (your WordPress Admin -> MailChimp for WordPress -> MailChimp Settings) then ‘Save Changes’

  • 7

    Check and make sure you see ‘CONNECTED’ sign on ‘MailChimp API Settings’. Click on the button -‘Renew MailChimp lists’

  • 8

    Go to the admin -> ‘MailChimp for WP’ -> ‘Checkboxes’ and check on the ‘MailChimp Lists’ box and save.

  • 9

    Go to the admin -> ‘MailChimp for WP’ -> ‘Forms’and check on the ‘Lists this form subscribes to’ box and save.

  • 10

    On the ‘Form’ setting page, copy the form shortcode below ‘Form mark-up’ and paste into any posts or pages you want to show your subscriber form, or you can use a MailChimp form widget to subscribe emails. (For widget users, go to the admin -> drag and drop ‘MailChimp Sign-Up Form’ to your widget sidebar.

  • Screen Shot 2014-10-13 at 12.37.18 AM

  • 11

    Test your email. Once you actually test subscribing with your email, you would get a successful message “Thank you, your sign-up request was successful! Please check your e-mail inbox.”, but if miss any steps from above, you might see a message “oops. Something went wrong. Please try again later.”

Enjoy the MailChimp for WordPress plugin / widget!

Responsive

Responsive Google Adsense is Easy!

We are facing a big transition in web design. In recent days, majority of well developed websites are made in responsive websites. Responsive design is the development responding to the environment based on screen size of a device. That being said the content elements must evolve to meet the technology as millions of bloggers are using Google Adsense technology to monetize their content.

Below is the HOW-TO guide to tweak the current Google Adsense code with the new responsive Google Adsense banners on your site. You don’t need to have a deep understanding of it’s frame work. Here’s an easy way to make it happen.

Our DEMO is here. Just look at the header section of this site. Do you see a wide horizontal banner (728 px x 90 px)? Try resize the browser to make it smaller and reload the page. Try even smaller like you are using a mobile and reload the page. Do you see the size of the ad is changing as it’s responding?

Let’s first take a look at your current Google Adsense Code below. You can get this code from Google Adsense Site → My ads (top menu) → “Get Code” from one of your ad unit.

Make sure you select “asynchronous” code type from the drop down menu.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-8255226778912403"
     data-ad-slot="1054112722"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

1. You simply add a <div> around it.
2. Named the class to responsive-ad on the <div>
3. Added the class responsive-ad to <ins>. So it’s now adsbygoogle responsive-ad.
4. Changed the style to display:block
5. You must replace data-ad-client numbers and data-ad-slot numbers with yours..
6. Added data-format="auto" before closing </ins> tag.
7. Add <style> tags. You can tweak it whatever you want.

<div class="responsive-ad">	
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle responsive-ad"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<style type="text/css">
.responsive-ad { width: 320px; height: 50px; margin: 0 auto; }
@media (min-width:480px) { .responsive-ad { width: 468px; height: 60px; } }
@media (min-width:768px) { .responsive-ad { width: 728px; height: 90px; } }
</style>

The <style> above has set a minimum of 768px (and up) for desktops, a minimum of 480px (and up but below 768px) for tablet, and 320px (and up but below 480px) for mobile. You may feel free to change the numbers of min-width: as your site structure.

Enjoy your blogging and monetizing with the new Responsive Google Adsense!

parallax smooth scrolling

Download: Simple Parallax Smooth Scrolling Website Template

With new technologies of HTML5, CSS3 and JavaScript, parallax scrolling is one of the hottest trends in web design industry. Floating with different speed of scrolling background elements could make a website stronger in storytelling. It’s easy to find parallax resources online, but it’s hard to find a function with smooth scrolling effect.

parallax-smooth-scrolling

Here’s the parallax website with “SMOOTH” scrolling effect for you to download. The website is made of HTML5/CSS/JavaScript. It’s free to use for your website, but it only works on Google Chrome. For other browsers everything works perfectly except for the smooth scrolling effect.

trash

How to Remove or Uninstall Plugins like Phantasm in Adobe Illustrator?

Get Custom Phone Case Now!

Plugins are great for Adobe Illustrator. There are many open shared plugins and it’s free to use. But sometimes a plugin has a trial period for 15 to 30 days, and it asks you to pay for the software and you just don’t want to purchase it, like Astute Graphics in my case (It’s a great plugin and would recommend to use, but for me, I found a way to change group of hue adjustments with my Adobe Illustrator CC built-in function so I no longer needed the plugin). When the trial period has expired, a pop-up window shows up every time when I open Adobe Illustrator, like this, and it’s a bit annoying:

Astute Graphics Phantasm

After you’ve select the ‘continue’ button, you can check to see the Phantasm plugin has been installed to your system by going to the top menu ‘illustor’ -> ‘About Phantasm’.

About Phantasm

Let’s close the Adobe illustrator by go to the top menu ‘Illustrator’ -> ‘Quit Illustrator’.

Okay, here’s what you should do to remove/uninstall the plugin:

1. Go to Applications folder: Finder -> Go -> Applications (or Shift + Commend + A)

Trash the Plugin

2. Go to Adobe Illustrator -> Plug-ins -> Trash ‘Phantasm.aip’ the plugin.

Done!

Top menu

Go and open Adobe Illustrator and check if the plugin has been removed completely by going to the top menu ‘illustor’ (you won’t see ‘About Phantasm’ anymore).

Weird Code

WordPress Appearing Strange Weird Characters / Codes

Get Custom Phone Case Now!

This was pretty shocking moments when seeing the weird strange codes on my WordPress website. I was looking all over to resolve the issue and it worked for me. This could has happened because you have upload your plugin directly through FTP and didn’t go through the backend and install it proper way.

Which I did to make all this mess. I uploaded my files directly through FTP.

weirdcodes

I had back ups files, but these weird strange characters were showing up on top of every pages I go even I replaced it with my backed up files.

If you see the similar things showing, just de-activate the plugin that causing the issue, or you can delete the plugin folder directly from your FTP. And here’s what you should do next, re-install the plugin through the WordPress backend (admin) panel. It worked like a charm.

You might still see after, but don’t go crazy. There is a good chance your browser’s cache might need to be refreshed. Hit “Reload” the browser or Shift + “Reload” and it should work fine.