Tutorials - identity design

Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It

djemals — Sun, 11 May 2025 06:23:26 +0000

If you’re designing for mobile Safari and notice your phone numbers mysteriously turning blue and underlined, you’re not alone. By default, Safari automatically detects phone numbers and converts them into clickable links—often overriding your CSS styles in the process.

The Problem

Safari’s automatic phone number detection is helpful in some cases, but for designers and developers, it can break the intended layout or brand consistency—especially when you’re working with custom fonts or color schemes.

The Simple Fix

The good news is that you can disable this behavior with just one line of code in your tag:

This tells Safari not to automatically detect and format telephone numbers, allowing you full control over how numbers appear on your site.

Pro Tip

If you still want numbers to be clickable but styled your way, you can manually wrap them in tags and apply your own CSS:

(123) 456-7890

Then style it however you like:

.phone {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

Final Thoughts

Safari’s auto-detection can be helpful for users, but problematic for designers. With a simple meta tag or some controlled styling, you can prevent unwanted design changes and keep your UI consistent across all browsers.

For more quick dev tips like this, check back at blog.identitydesign.us

The post Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It first appeared on identity design.

The post Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It appeared first on identity design.

CSS: How to Make an Anchor Not Clickable in HTML

djemals — Tue, 01 Oct 2024 18:43:52 +0000

When building web pages, there are times you might want an anchor link () to be visible but non-functional. Perhaps you’re still working on that section of your website, or the link is for decorative purposes only. Whatever the reason, making an anchor not clickable is simple with a few CSS rules.

The Code Snippet

Let’s start with a quick code snippet that makes an anchor tag unclickable:

Unclickable Link

Then, in your CSS, add the following styles:

.inactive-link {
    pointer-events: none;
    cursor: default;
}

A Use Case for This Approach

Let’s say you have a navigation menu, but one of the pages is under construction. You still want the link to be visible for design consistency, but don’t want users to interact with it. Here’s an example:


  
    Home
    About
    Contact (Coming Soon)

Conclusion

With just a couple of lines of CSS, you can make any anchor tag unclickable. It’s a quick and effective way to manage inactive or placeholder links on your website. Try this technique next time you need a link to be visible but non-functional!

The post CSS: How to Make an Anchor Not Clickable in HTML first appeared on identity design.

The post CSS: How to Make an Anchor Not Clickable in HTML appeared first on identity design.

CSS Only Animation: Zoom on Hover

djemals — Thu, 11 Apr 2024 08:31:49 +0000

In today’s quick tip, we’ll dive into creating a dynamic ‘zoom on hover’ effect that adds an interactive touch to images on your web pages. By incorporating the provided CSS, your images will elegantly scale up when hovered over. This effect, achieved with minimal code, is a fantastic way to enhance your website’s visual appeal and engage your visitors.

DEMO: Zoom on Hover

HTML

CSS

.zoom-in { transition:transform .2s; }
.zoom-in:hover { transform: scale(1.2); }

The post CSS Only Animation: Zoom on Hover first appeared on identity design.

The post CSS Only Animation: Zoom on Hover appeared first on identity design.

CSS Only Animation: Image Swapping on Hover (Logo Swap)

djemals — Sat, 09 Mar 2024 00:27:13 +0000

Explore how to enhance your website’s interactivity with this simple guide on implementing a logo or image swap effect upon mouse hover. Ideal for web designers and developers, this tutorial includes step-by-step instructions, complete with HTML and CSS code snippets, to seamlessly integrate this dynamic visual cue into your web project. Perfect for adding that extra flair to logos or images on your site, learn how to create a more engaging user experience with ease.

DEMO: Swapping Logo/Image on Hover of Mouse

HTML

CSS

.swap { height: 200px; width: 200px; position: relative; }
.swap img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: opacity .9s;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.swap img.hover, .swap:hover img.main { opacity:0; }
.swap img.hover:hover { opacity:1; }

The post CSS Only Animation: Image Swapping on Hover (Logo Swap) first appeared on identity design.

The post CSS Only Animation: Image Swapping on Hover (Logo Swap) appeared first on identity design.

CSS Animation: Image Scrolling on Hover

djemals — Wed, 11 Oct 2023 00:50:39 +0000

In the ever-evolving world of web design, adding interactive and visually appealing elements to your website can greatly enhance the user experience. One exciting way to achieve this is by learning how to create an image scrolling effect on hover with CSS animation. With just a few lines of code, you can transform a static image into an engaging and dynamic component that draws the viewer’s attention. So, let’s dive in and discover how to make your website come to life with CSS image scrolling on hover!

DEMO: Mouse over to see the scrolling animation

HTML

CSS

img { 
	object-fit: cover;
	object-position: top;
	transition: ease-in-out 4s;
	width: 450px;
	height: 300px;
}
img:hover {
	object-position: bottom;
}

The post CSS Animation: Image Scrolling on Hover first appeared on identity design.

The post CSS Animation: Image Scrolling on Hover appeared first on identity design.

HTML-CSS-JS: Simple Hamburger Menu Expandable

djemals — Sat, 10 Dec 2022 01:16:30 +0000

“How to create an expandable hamburger menu?”

DEMO: How It Looks

HTML


  
      
    
      
         Home
         Section 1
         Section 2
         Section 3

CSS

body {
	background-color: black; font-family:sans-serif; 
}
header a {
	color: #111 !important;
	text-decoration: none!important;
	font-weight: 200;
	font-size: 2.2rem;
	line-height: 1.2;
	display: block;
}
.header__menu {
	position: fixed;
	top: 34px;
	right: 30px;
	z-index: 10;
}
.menu__icon {
	z-index: 5;
	display: block;
	position: relative;
	width: 50px;
	height: 22px;
	cursor: pointer;
}
.menu__icon span, .menu__icon::before, .menu__icon::after {
	left: 0;
	position: absolute;
	height: 20%;
	width: 100%;
	transition: all 0.3s ease 0s;
	background-color: white;
}
.menu__icon::before, .menu__icon::after {
	content: '';
}
.menu__icon::before {
	top: 0;
}
.menu__icon::after {
	bottom: 0;
}
.menu__icon span {
	top: 50%;
	transform: scale(1) translate(0, -50%);
}
.menu__icon._active span {
	transform: scale(0) translate(0, -50%);
}
.menu__icon._active::before {
	top: 50%;
	transform: rotate(-45deg) translate(0, -50%);
}
.menu__icon._active::after {
	bottom: 50%;
	transform: rotate(45deg) translate(0, 50%);
}
.menu__body {
	position: fixed;
	top: 0;
	right: -99%;
	width: 34%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	padding: 100px 30px 30px 30px;
	transition: right 0.3s ease 0s;
	overflow: auto;
}
.menu__body._active {
	right: 0;
}
.menu__list > li {
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.menu__body ul {
	padding-left: 1rem;
	list-style: none;
}

JavaScript

Link the below external Javascript into the bottom of your HTML.

With having the hamburger menu on your navigation, your website could look more sophisticated and clean.

The post HTML-CSS-JS: Simple Hamburger Menu Expandable first appeared on identity design.

The post HTML-CSS-JS: Simple Hamburger Menu Expandable appeared first on identity design.

Customize Animations on AOS (Animated On Scroll) Library

djemals — Tue, 15 Nov 2022 20:35:12 +0000

“How to customize animations on AOS Library?”

AOS Library (by michalsnik) is a great way to trigger animation while scroll for your website design. Here’s how to customize animations using AOS library.

Add CSS to your website `header`

Add JS at the end of `body` tag

HTML

CSS

/* Default Style of Boxes */
.box {
  width: 250px;
  height: 250px;
  margin: 2rem auto; 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:sans-serif;
  font-size: 5rem;
  color: #FFF;
}
 
/* Before of Animation 1 */
[data-aos="my-animation-1"] {
  transform: rotate(0deg);
  background: black;
  opacity: 0; 
}
/* After of Animation 1 */ 
[data-aos="my-animation-1"].aos-animate {
  transform: rotate(360deg); 
  opacity: 1; 
}
	
/* Before of Animation 2 */
[data-aos="my-animation-2"] {
  background: black;
  transition-property: background; 
}
/* After of Animation 2 */
[data-aos="my-animation-2"].aos-animate {
  background: cyan; 
}
	
/* Before of Animation 3 */
[data-aos="my-animation-3"] {
  transform: translateX(-100%);
  opacity: 0; 
}
/* After of Animation 3 */
[data-aos="my-animation-3"].aos-animate {
  transform: translateX(0%); 
  background: purple;
  opacity: 1; 
}

DEMO: How It Looks

Download HTML

The post Customize Animations on AOS (Animated On Scroll) Library first appeared on identity design.

The post Customize Animations on AOS (Animated On Scroll) Library appeared first on identity design.

CSS: Button Push Shadow Effect on Hover

djemals — Tue, 08 Nov 2022 22:43:08 +0000

“How to create a shadow effect when hovering on a box?”

DEMO: How It Looks

TRY HOVERING OVER THE BOX!

HTML

TRY HOVERING OVER THE BOX!

CSS

.button-pop {
    border: 2px solid black;
    padding: 1rem; 
    width:200px;
    height:200px;
}
.button-pop:hover {
    position: relative;
    right: 5px;
    bottom: 5px;
    box-shadow: 7px 7px #111;
}

It’s pretty simple. Enjoy coding!

The post CSS: Button Push Shadow Effect on Hover first appeared on identity design.

The post CSS: Button Push Shadow Effect on Hover appeared first on identity design.

CSS: Use your desktop fonts to your website

djemals — Tue, 01 Nov 2022 19:51:15 +0000

“How to use .OTF (or other desktop) fonts to your website?”

If you would like to use your desktop fonts to your website, do this!

CSS

Select and place fonts to the server.
Copy and paste codes below to your stylesheet.
Replace font-family: ‘FONT1‘ on both @font-face and p with your own font name.
You may change normal to bold if necessary.

@font-face {
	font-family: 'FONT1';
	src: url("../fonts/YOUR-FONT-LOCATION.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}
p { 
	font-family: 'FONT1', sans-serif; 
}

The post CSS: Use your desktop fonts to your website first appeared on identity design.

The post CSS: Use your desktop fonts to your website appeared first on identity design.

How to Change the Order of Artboards on Adobe Illustrator

djemals — Fri, 08 Oct 2021 23:15:31 +0000

Adobe Illustrator can create multiple paged PDF using multiple artboards. If you need to rearrange the order of pages, here is how-to.

Artboards are like Canvas in Adobe Photoshop.

The two-digit number starting on the left of each artboard is the order of the content in PDF. To change the order of artboards, open up the Artboard Palette and drag layers as you want.

1 Open -> `Window` (on top menu bar) -> choose `Artboards`

2 Change the Order of Artboards by Dragging the Layers

Just need to save your document in PDF.

The post How to Change the Order of Artboards on Adobe Illustrator first appeared on identity design.

The post How to Change the Order of Artboards on Adobe Illustrator appeared first on identity design.

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

djemals — Wed, 22 Sep 2021 19:33:33 +0000

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

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

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).

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.

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.

3 Export the file into 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!

The post Make Your Photos into a GIF Animation (Stop Motion) Using Photoshop first appeared on identity design.

The post Make Your Photos into a GIF Animation (Stop Motion) Using Photoshop appeared first on identity design.

CSS: Crop Image Width or Height with CSS Only

djemals — Fri, 06 Aug 2021 00:04:12 +0000

Images can be cropped with a couple of CSS lines without using Photoshop or any image editing tools. This is useful when your multiple column thumbnail image height is different like below.

BEFORE

Because of the uneven height of the thumbnails the entire structure could be easily broken.

CSS

Copy the code below and paste into your CSS document.

img {
    height: 200px;
    object-fit: cover;
}

Try object-position: 10% 10%; if you want to move around the position of the image within the area.

AFTER

All 20-30 of your thumbnails will fit perfectly, and your layout won’t look wonky again. This method could be used on any single image on your webpage.

The post CSS: Crop Image Width or Height with CSS Only first appeared on identity design.

The post CSS: Crop Image Width or Height with CSS Only appeared first on identity design.

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

djemals — Mon, 02 Aug 2021 22:14:39 +0000

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.

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

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.

The post WooCommerce Hollow “Empty” Star Rating to “Full” Filled Stars first appeared on identity design.

The post WooCommerce Hollow “Empty” Star Rating to “Full” Filled Stars appeared first on identity design.

Google Workspace / G Suite Setup for Your Own Domain Email

djemals — Fri, 11 Jun 2021 07:10:57 +0000

My new client just called me with an urgent voice, “My email is down. Please fix this as soon as possible.”

My client requested me to build his website, so I set up his old domain name to my hosting server for the work environment, and his email stopped working. He never mentioned about the email that was under his old domain (i.e. client@domain.com). I was in panic for a few minutes, but gladly, I was able to find out that his email is linked to G-Suite (now called Google Workspace).

Here I will show you how to change DNS setting for an email or entire emails under your own unique domain (i.e. you@yourowndomain.com). This setup can be found under your domain provider setup tab, and it’s usually called “Advanced DNS” or “Manage DNS”. Sometimes this can be called “Zone Editor” on your hosting provider setup tab, and this can be modified if your domain is linked to a hosting service.

Clear / Remove MX Record on your DNS

First, you need to see the existence of any MX Record (Mail Exchange records). If you find a single MX Record that are exist on your DNS, remove it.

I removed a MX Record “Priority:0 with “mail.MYDOMAIN.com” from my cPanel. Make sure that is no MX Record on you DNS.

Add Google Workspace / G-Suite MX Record to your DNS

Add below 5 MX Record provided by Google Workspace / G Suite.

Name	TTL	Type	Priority	Destination
Blank or @	Default Value	MX	1	aspmx.l.google.com
Blank or @	Default Value	MX	5	alt1.aspmx.l.google.com
Blank or @	Default Value	MX	5	alt2.aspmx.l.google.com
Blank or @	Default Value	MX	10	alt3.aspmx.l.google.com
Blank or @	Default Value	MX	10	alt4.aspmx.l.google.com

Example

As soon as the records on DNS are saved, all of your emails from your own domain will be transferred through Google Workspace / G Suite and landed on your Gmail inbox.

The post Google Workspace / G Suite Setup for Your Own Domain Email first appeared on identity design.

The post Google Workspace / G Suite Setup for Your Own Domain Email appeared first on identity design.

Use CSS to remove auto-generated empty <p> tags in WordPress

djemals — Sun, 24 Jan 2021 09:26:22 +0000

Can’t complain the great convenient functionality of auto-generating

tag in WordPress, but sometimes it’s pretty annoying as it breaks some lines unintentionally. Here’s how to remove only empty

tag with a simple CSS line.

CSS: Hide/Remove Empty
tags

p:empty {
  display: none;
}

The post Use CSS to remove auto-generated empty

tags in WordPress first appeared on identity design.

The post Use CSS to remove auto-generated empty

tags in WordPress appeared first on identity design.

Woocommerce Conflicts with Bootstrap 4 in WordPress

djemals — Mon, 18 Jan 2021 09:48:36 +0000

I can’t give up on either functionalities: Woocommerce and Bootstrap. A conflict occurs with the wonky looking layout when using Woocommerce and Bootstrap 4 together. See the breakdown when you are on the checkout page. Below a few CSS lines would resolve the wonkiness issue really quick. Now I can enjoy both!

CSS

.woocommerce .col-1, .woocommerce .col-2 { 
    max-width:none; 
}
.woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row,.woocommerce form .form-row { 
    display: block; 
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { 
    max-width: unset; 
}

The post Woocommerce Conflicts with Bootstrap 4 in WordPress first appeared on identity design.

The post Woocommerce Conflicts with Bootstrap 4 in WordPress appeared first on identity design.

Add Bootstrap to Your WordPress Website with a Plugin

djemals — Sat, 02 Jan 2021 07:13:11 +0000

There are a few ways to install Bootstrap 4 to your WordPress website for free. One of the popular choices is to activate a Bootstrap 4 pre-installed theme, but this can be little complicated or not efficient as you might want to use a woocommerce compatible theme or some themes of your favorite.

I recommend to use the “Simple Custom CSS and JS” plugin by Silkypress.com and add 3 lines to your html. By doing this, you have a freedom to choose any theme of your favorite and enjoy Bootstrap for free.

Let me show you how to add in steps.

Go to the admin page of your WordPress website http://YOUR-DOMAIN.com/wp-admin
Go to “Plugins” -> “Add New” -> search for “Simple Custom CSS and JS” plugin. Install the plugin and make it active.
(You will see “Custom CSS & JS” on the sidebar), go to the plugin menu called Custom CSS & JS -> “Add Custom HTML”
Name it as “Header”, check the radio buttons on Header and In Frontend.
Add below CSS line into the code field and publish.
Create another “Add Custom HTML” and name it “Footer”. Check the radio buttons on Footer and In Frontend
Add below JS lines into the code field and publish.

Now you are ready with Bootstrap 4 on your WordPress website. Enjoy!

The post Add Bootstrap to Your WordPress Website with a Plugin first appeared on identity design.

The post Add Bootstrap to Your WordPress Website with a Plugin appeared first on identity design.

Accordion Partial Collapse & Expand Demo Template for Bootstrap

djemals — Mon, 30 Nov 2020 05:20:22 +0000

Bootstrap has provided accordion “Collapse” JavaScript plugins for Bootstrap users, but has no explanation making the accordion partially expand and collapse.

Below is the demo/template to build your accordion partially expand and collapse within the given height. The HTML includes CDN (content delivery network) to connect Bootstrap/Jquery’s CSS and JavaScript files, so it’s ready to be used! Click to download below.

DEMO: How It Looks

HTML


  
    Accordion Title
    Accordion content goes here

CSS

.partialcollapse .collapse {
    display: block;
    height: 120px !important;
    overflow: hidden;
}
.partialcollapse .collapsing {
    height: inherit!important;
}
.partialcollapse .collapse.show {
    height: auto !important;
} 
.partialcollapse .collapse+button:after {
    content: '+ Show More';
}
.partialcollapse .show+button:after, .partialcollapse .collapsing+button:after {
    content: '- Show Less';
}

Download HTML

The post Accordion Partial Collapse & Expand Demo Template for Bootstrap first appeared on identity design.

The post Accordion Partial Collapse & Expand Demo Template for Bootstrap appeared first on identity design.

All-in-one Bootstrap 4 / Jquery Responsive HTML Template

djemals — Fri, 16 Oct 2020 09:52:23 +0000

This is the All-in-one HTML Template to build your Bootstrap 4 (ver. 4.5.2) website. The HTML includes CDN (content delivery network) to connect Bootstrap/Jquery’s CSS and JavaScript files, so you literally need this single HTML to run.

HTML

Write your code here.

Download HTML

The post All-in-one Bootstrap 4 / Jquery Responsive HTML Template first appeared on identity design.

The post All-in-one Bootstrap 4 / Jquery Responsive HTML Template appeared first on identity design.

CSS Only: Pop-up Modal Lightbox on Page Load

djemals — Fri, 10 Apr 2020 18:24:30 +0000

I’ve shared a way to add a pop-up or modal lightbox with CSS only on my earlier post, Easy Modal Lightbox Pop-Up. I’ve received many request how to make this modal pop up on page load instead of using a button. So, here’s how-to:

HTML

Copy the code below and paste into your HTML document.


   
      
         ×
         Modal Headline
         Modal description goes here.

CSS

Copy the code below and paste into your CSS document.

.modal {
	z-index: 10;
	display: block;
	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}}

.animate-opacity is optional as it’s the animated effect when modal opens.

You can tweak the animation time. It’s currently 0.8 seconds opac 0.8s , but change the timing as your need.

The post CSS Only: Pop-up Modal Lightbox on Page Load first appeared on identity design.

The post CSS Only: Pop-up Modal Lightbox on Page Load appeared first on identity design.

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

djemals — Sun, 01 Dec 2019 06:10:59 +0000

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.

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" }

The post Remove ‘Built with Storefront & WooCommerce’ with CSS lines on WordPress Storefront Theme first appeared on identity design.

The post Remove ‘Built with Storefront & WooCommerce’ with CSS lines on WordPress Storefront Theme appeared first on identity design.

Add a Copyright Text / Info Using CSS on WordPress Websites

djemals — Thu, 19 Sep 2019 20:05:49 +0000

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.

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;
}

The post Add a Copyright Text / Info Using CSS on WordPress Websites first appeared on identity design.

The post Add a Copyright Text / Info Using CSS on WordPress Websites appeared first on identity design.

(No Programming) Use JavaScript to Load Header and Footer Templates. Works Just Like PHP Include

djemals — Mon, 29 Apr 2019 23:41:33 +0000

I’ve looking for this for years, but it’s actually much simpler than I thought. You can build your HTML website with universal header and footer (so you don’t have to repeat update multiple files over and over again) by adding a simple JavaScript/Jquery line without using any programming PHP scripts.

HTML







Hello World!

Instruction

Create a header.html and put all the header portion starting with .
Create a footer.html and put all the footer portion end with .
Create a index.html and copy and paste the HTML code (from the top of this article) into your HTML document.
Build your own content by replacing the text “Hello World!” and save.
Open the index.html and review yourself.

You can duplicate the index.html and rename it differently for any additional pages you wish to create. This JavaScript works on a server environment, so this will not be able to load header and footer if you are opening the files from your desktop which means you need to upload your files via FTP and access your HTMLs live.

Now, you’ve created a website without using any programming scripts.

The post (No Programming) Use JavaScript to Load Header and Footer Templates. Works Just Like PHP Include first appeared on identity design.

The post (No Programming) Use JavaScript to Load Header and Footer Templates. Works Just Like PHP Include appeared first on identity design.

CSS / HTML: Make Absolute Center (Vertical & Horizontal)

djemals — Sat, 09 Feb 2019 01:05:02 +0000

For some reasons, making an article absolute center was pretty tricky with HTML.

Horizontal centering is mostly done by text-align:center or margin:auto tags in css. Vertical alignment has to do with positions or vertical-align:middle, and many times an image or other elements are not centering correctly.

Try this below, this is one easy way making your content elements absolute center in vertical and horizontal.

DEMO: Vertical & Horizontal Absolute Centering

Hello.
Your centered content is here!

CSS

Copy the code below and paste into your CSS document.

body {
	display: flex;
	justify-content: center;
	align-items: center;
        text-align:center;
}

Easy and fantastic!

The post CSS / HTML: Make Absolute Center (Vertical & Horizontal) first appeared on identity design.

The post CSS / HTML: Make Absolute Center (Vertical & Horizontal) appeared first on identity design.

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

djemals — Tue, 29 Jan 2019 19:50:57 +0000

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.




   
      
         ×
         Modal Headline
         Modal description goes here.

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!

The post CSS Only: Easy Modal Lightbox Pop-up (Animated) first appeared on identity design.

The post CSS Only: Easy Modal Lightbox Pop-up (Animated) appeared first on identity design.

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

djemals — Fri, 07 Sep 2018 22:14:42 +0000

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

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

The post Why FileZilla Upload Files Repeatedly Saying “File Transfer failed after transferring”? first appeared on identity design.

The post Why FileZilla Upload Files Repeatedly Saying “File Transfer failed after transferring”? appeared first on identity design.

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

djemals — Sat, 28 Jul 2018 00:17:43 +0000

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.


    My Ribbon

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!

The post How Create a HTML/CSS Ribbon. Simple and Light (None Jpg/Png Image) first appeared on identity design.

The post How Create a HTML/CSS Ribbon. Simple and Light (None Jpg/Png Image) appeared first on identity design.

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

djemals — Thu, 24 May 2018 10:56:02 +0000

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:

Go to https://www.cloudflare.com/
Create your account by signing up. Log in afterwards.
“+Add Site” on top right.
Add your site information.
Hit “Next” on “We’re querying your DNS records”.
Confirm the “Free” plan.
It will show DNS query result for your site. Review and hit “Continue”
Change your nameservers(DNS) as described.
On Domain Summary, change “SSL: Full” to “Flexible” no need to hit “Save”.
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.

The post Get a free SSL Certificate (Secure Socket Layer) – Change HTTP to HTTPS for your website domain first appeared on identity design.

The post Get a free SSL Certificate (Secure Socket Layer) – Change HTTP to HTTPS for your website domain appeared first on identity design.

Force an Anchor Tag Not Clickable with CSS

djemals — Fri, 05 Jan 2018 20:28:26 +0000

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;
}

The post Force an Anchor Tag Not Clickable with CSS first appeared on identity design.

The post Force an Anchor Tag Not Clickable with CSS appeared first on identity design.

CSS Vertical Align Center

djemals — Wed, 16 Mar 2016 21:50:42 +0000

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.


    
    Box One
    Vertical Align Center
    


    
    Box One
    Vertical Align Center



    
    Box One
    Vertical Align Center

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!

The post CSS Vertical Align Center first appeared on identity design.

The post CSS Vertical Align Center appeared first on identity design.

Simple JavaScript Redirect Code for HTML

djemals — Thu, 03 Mar 2016 09:24:58 +0000

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.

Download Sample

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

The post Simple JavaScript Redirect Code for HTML first appeared on identity design.

The post Simple JavaScript Redirect Code for HTML appeared first on identity design.

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

djemals — Wed, 06 Jan 2016 01:58:25 +0000

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!

The post Resolved! Loading Your Google Fonts Over https (SSL) Sites first appeared on identity design.

The post Resolved! Loading Your Google Fonts Over https (SSL) Sites appeared first on identity design.

CSS: A Simple Way to Set the Table Column Width

djemals — Fri, 18 Dec 2015 21:01:07 +0000

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.

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

The post CSS: A Simple Way to Set the Table Column Width first appeared on identity design.

The post CSS: A Simple Way to Set the Table Column Width appeared first on identity design.

Circled Number Lists (HTML/CSS)

djemals — Tue, 08 Dec 2015 07:55:11 +0000

You can make a circle around your Ordered List,

DEMO: How It Looks

Circle Around Numbers in Steps (HTML & CSS)

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.
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.
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.
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.
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.



    Lorem ipsum dolor sit amet, felis dui nam, vivamus turpis bibendum et massa.


    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. 


    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.


    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.


    Quis mus donec, volutpat placerat nam et eros quam enim, id tincidunt aliquam libero odio, suspendisse a quam tristique ligula.

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

The post Circled Number Lists (HTML/CSS) first appeared on identity design.

The post Circled Number Lists (HTML/CSS) appeared first on identity design.

Quick Start Guide to MailChimp for WordPress

djemals — Mon, 13 Oct 2014 19:11:30 +0000

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.

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!

The post Quick Start Guide to MailChimp for WordPress first appeared on identity design.

The post Quick Start Guide to MailChimp for WordPress appeared first on identity design.

Responsive Google Adsense is Easy!

djemals — Wed, 24 Sep 2014 21:42:51 +0000

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.

1. You simply add a

around it.
2. Named the class to responsive-ad on the

3. Added the class responsive-ad to . 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 tag.
7. Add

The

Tutorials - identity design

Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It

The Problem

The Simple Fix

Pro Tip

Final Thoughts

Related posts:

CSS: How to Make an Anchor Not Clickable in HTML

The Code Snippet

A Use Case for This Approach

Conclusion

Related posts:

CSS Only Animation: Zoom on Hover

DEMO: Zoom on Hover

HTML

CSS

Related posts:

CSS Only Animation: Image Swapping on Hover (Logo Swap)

DEMO: Swapping Logo/Image on Hover of Mouse

HTML

CSS

Related posts:

CSS Animation: Image Scrolling on Hover

DEMO: Mouse over to see the scrolling animation

HTML

CSS

Related posts:

HTML-CSS-JS: Simple Hamburger Menu Expandable

DEMO: How It Looks

HTML

CSS

JavaScript

Related posts:

Customize Animations on AOS (Animated On Scroll) Library

Add CSS to your website header

Add JS at the end of body tag

HTML

CSS

DEMO: How It Looks

Related posts:

CSS: Button Push Shadow Effect on Hover

DEMO: How It Looks

HTML

CSS

Related posts:

CSS: Use your desktop fonts to your website

CSS

Related posts:

How to Change the Order of Artboards on Adobe Illustrator

1 Open -> Window (on top menu bar) -> choose Artboards

2 Change the Order of Artboards by Dragging the Layers

Related posts:

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

1 Load Photo in Photoshop

2 Make Timeline Frames

3 Export the file into GIF

Related posts:

CSS: Crop Image Width or Height with CSS Only

BEFORE

CSS

AFTER

Related posts:

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

Related posts:

Google Workspace / G Suite Setup for Your Own Domain Email

Clear / Remove MX Record on your DNS

Add Google Workspace / G-Suite MX Record to your DNS

Example

Related posts:

Use CSS to remove auto-generated empty <p> tags in WordPress

CSS: Hide/Remove Empty tags

Related posts:

Woocommerce Conflicts with Bootstrap 4 in WordPress

CSS

Related posts:

Add Bootstrap to Your WordPress Website with a Plugin

Related posts:

Accordion Partial Collapse & Expand Demo Template for Bootstrap

DEMO: How It Looks

HTML

Add CSS to your website `header`

Add JS at the end of `body` tag

1 Open -> `Window` (on top menu bar) -> choose `Artboards`

CSS: Hide/Remove Empty
tags