identity design

Stop Losing Your Code — Use an Astra Child Theme!

djemals — Mon, 14 Jul 2025 00:44:57 +0000

If you’ve ever added custom functions to your functions.php file—only to find them gone after a few weeks—it’s likely because your parent theme (like Astra) was updated. WordPress themes often reset modified files during updates, which can cause your hard work to disappear. The solution? Use a Child Theme.

Why Your Code Disappears

When you add code directly to the parent theme’s functions.php, that file gets overwritten whenever the theme is updated—whether automatically or manually. If your carefully built features suddenly vanish, it’s time to switch to a Child Theme setup.

What is a Child Theme?

A Child Theme is a safe way to extend or customize a WordPress theme without touching the original (parent) theme files. It inherits everything from the parent theme, but allows you to add or override specific functionality—like custom functions, styles, or templates.

How to Install an Astra Child Theme in WordPress

You have two easy options:

Generate your own: Visit the official Astra Child Theme Generator and download a ready-to-use child theme ZIP file.
Download ours directly: Use our pre-made version here:
astra-child.zip

How to Install the Child Theme (Step-by-Step)

Log in to your WordPress admin dashboard.
Go to Appearance → Themes
Click the “Add New” button, then “Upload Theme”
Upload the astra-child.zip file
Activate the theme: You’ll now see “Astra Child” as an option

Where to Add Your Custom Code

Now that you’re using a child theme, open the functions.php file inside the child theme folder. This is where you can safely paste in your code snippets—such as custom shortcodes, script enqueueing, or other PHP-based logic—without fear of losing them after updates.

Bonus Tip: Astra Pro Compatibility

If you’re using Astra Pro, don’t worry—your Pro features are handled by the Astra Pro plugin and will continue to work regardless of whether you’re using the parent or child theme. Just make sure the plugin remains activated.

Final Thoughts

If you’ve ever experienced your functions.php customizations disappearing, it’s likely due to a theme update. The permanent fix is simple: switch to a Child Theme. It takes just a few minutes and protects your customizations for the long haul.

Need help? Reach out via our contact page and we’d be happy to assist.

The post Stop Losing Your Code — Use an Astra Child Theme! first appeared on identity design.

The post Stop Losing Your Code — Use an Astra Child Theme! appeared first on 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.

How to Fix Missing Google Fonts After Changing Your WordPress Elementor Website Domain

djemals — Tue, 06 May 2025 05:54:58 +0000

How to Fix Missing Google Fonts After Changing Your Elementor Website Domain

If you’ve built your website using Elementor on a temporary domain and later connected it to your official domain, you might encounter an issue where Google Fonts are not loading or appearing broken. This is a common problem that usually stems from outdated internal URLs or cached files. Here’s a step-by-step guide to fix it.

Step 1: Update Elementor URLs

When changing domains, Elementor may still be referencing the old domain path for fonts and styles.

Go to WordPress Dashboard > Elementor > Tools > Replace URL
Enter your old URL (e.g., https://sitename.hostinger.com)
Enter your new URL (e.g., https://yourdomain.com)
Click the Replace URL button

Step 2: Regenerate Elementor CSS Files

Elementor stores styles in cached CSS files, which need to be regenerated after a domain change.

Go to Elementor > Tools > General
Click Regenerate CSS
Click Sync Library if necessary

Step 3: Clear Browser and Plugin Cache

Even after updating URLs, cached files from your browser or caching plugins might still cause issues.

Clear your browser cache (Chrome, Safari, Firefox, etc.)
Clear cache from plugins like LiteSpeed Cache, WP Rocket, or Autoptimize

Step 4: Check Font Load Status in Developer Tools

Use Chrome DevTools (F12) to inspect if Google Fonts are loading properly in the section.

Look for a tag like
Check the Console tab for any CORS or Mixed Content errors

Step 5: Ensure SSL and Mixed Content Are Correct

If your new domain lacks a proper SSL certificate or is loading resources over HTTP, Google Fonts may be blocked.

Ensure your domain has a valid SSL certificate installed
Use the Really Simple SSL plugin to force HTTPS for all content

Final Thoughts

By following these 5 steps, you can resolve most font loading issues after migrating your Elementor site to a new domain. The most critical action is using Elementor’s Replace URL tool to correct outdated paths in your styles and settings.

The post How to Fix Missing Google Fonts After Changing Your WordPress Elementor Website Domain first appeared on identity design.

The post How to Fix Missing Google Fonts After Changing Your WordPress Elementor Website Domain appeared first on identity design.

Top 5 Free Design Template Sites Every Designer Should Know

djemals — Fri, 02 May 2025 06:47:28 +0000

If you’re a designer or developer looking to save time and improve your output, free templates can be your best friend. From HTML layouts to graphic templates, these sites offer ready-made resources that are easy to customize and adapt. Here are 5 of the best places to find high-quality free design templates—no strings attached.

1. HTML5 UP

html5up.net provides fully responsive HTML/CSS templates built on clean code and sleek layouts. Ideal for landing pages, personal portfolios, and minimalist websites. Best of all? They’re free under a Creative Commons license.

2. Canva Templates

canva.com/templates offers thousands of free templates for Instagram posts, resumes, presentations, posters, and more. It’s great for quick mockups, mood boards, or when you need print-ready graphics in a pinch.

3. Figma Community

figma.com/community is a goldmine for UI designers. You’ll find wireframes, UI kits, dashboards, mobile layouts, and design systems—all created and shared by fellow designers. Simply duplicate and start editing.

4. Mixo.io – Landing Page Templates

mixo.io/templates offers free landing page templates powered by AI. Whether you’re launching a SaaS product, portfolio, or app, Mixo generates modern, mobile-ready templates you can edit in minutes.

5. Identity Design – Freebies

blog.identitydesign.us/freebies is our curated library of free HTML templates, email layouts, posters, and more—crafted from real-world design projects. Ideal for freelance designers, agencies, and students looking for usable, customizable files.

Final Thoughts

Great design doesn’t always start from scratch. These free resources help you prototype faster, test ideas, and deliver polished results. Bookmark your favorites, tweak to match your brand, and build better—faster.

Explore more freebies at Identity Design Freebies

The post Top 5 Free Design Template Sites Every Designer Should Know first appeared on identity design.

The post Top 5 Free Design Template Sites Every Designer Should Know appeared first on identity design.

How to Suppress Errors and Warnings in WordPress for Emergencies

djemals — Wed, 06 Nov 2024 22:58:07 +0000

How to Suppress Errors and Warnings in WordPress for Emergencies

There are times in website development when errors or warnings start displaying on your WordPress site, sometimes affecting its look and functionality. If you’re facing a critical issue on your live site and need a quick way to hide these errors temporarily, WordPress allows you to suppress them in emergencies by adding a couple of lines of code.

Suppressing Errors and Warnings in WordPress

WordPress has a built-in debugging mode that developers use to catch issues. However, on a live website, you typically want this debugging turned off to prevent visitors from seeing backend issues. Here’s how to do it:

1. Locate `wp-config.php`

First, connect to your website using an FTP client or access your hosting control panel, then find and open the wp-config.php file, which is in the root directory of your WordPress installation.

2. Set WP_DEBUG to False

Make sure the debugging mode is off by setting WP_DEBUG to false. Look for the following line in your wp-config.php file:

define( 'WP_DEBUG', false );

3. Add the Suppression Code

Right after the WP_DEBUG line, add the following code to suppress any errors or warnings:

define( 'WP_DEBUG', false );
/*Suppress any errors or warnings*/
error_reporting(0);
@ini_set('display_errors', 0);

Here’s what each line does:

error_reporting(0); – This tells the server not to report any errors, effectively silencing warnings, notices, and error messages.
@ini_set('display_errors', 0); – This setting prevents errors from being displayed to users by setting display_errors to 0.

Why Use This Code?

When you’re in an emergency situation—such as if your site is displaying unsightly errors or breaking the layout due to warnings—this code can provide a quick solution. Keep in mind that it’s best to suppress errors only as a temporary measure. Long-term, you should address the underlying issues causing the warnings or errors to keep your website stable and secure.

Important Note

While suppressing errors can help in an emergency, it’s crucial to track down the source of any issues afterward. Hidden errors can make debugging more difficult and may affect website performance or functionality over time. For a better long-term approach, consider using a staging environment where you can fix issues without affecting your live site.

Conclusion

In emergencies, suppressing errors and warnings in WordPress is a helpful, quick solution to keep your site looking professional and functional. Just add the code above to your wp-config.php file after WP_DEBUG is set to false, and your visitors won’t see any backend issues on the front end. However, always remember to investigate and resolve any issues afterward for a stable, error-free site.

The post How to Suppress Errors and Warnings in WordPress for Emergencies first appeared on identity design.

The post How to Suppress Errors and Warnings in WordPress for Emergencies appeared first on identity design.

How to Disable / Maintenance Mode Your Website on WordPress

djemals — Sat, 19 Oct 2024 06:14:14 +0000

When working on your WordPress website, there may be times when you need to disable it temporarily for maintenance, updates, or major changes. Thankfully, WordPress offers easy ways to put your website into maintenance mode, ensuring visitors don’t see a broken or incomplete version of your site.

Disabling a Website in WordPress

In WordPress, there are a couple of ways to enable maintenance mode on your website. Let’s explore two common methods:

1. Using a Maintenance Mode Plugin

Plugins like “Maintenance” or “WP Maintenance Mode” are specifically designed for this purpose. With a few simple clicks, you can activate maintenance mode, display a custom message to your visitors, and work on your site privately.

Steps to follow:

Install and activate a maintenance mode plugin from the WordPress plugin directory.
Customize the settings such as the message and design for the maintenance page.
Activate the plugin to enable maintenance mode.

2. Enabling Maintenance Mode via wp-config.php

If you prefer not to use a plugin, you can enable maintenance mode directly by editing the wp-config.php file. Here’s how:

Connect to your WordPress site using FTP or through your hosting control panel.
Open the wp-config.php file, located in the root directory.
Add the following line of code just before the “That’s all, stop editing!” comment:

define('WP_MAINTENANCE_MODE', true);

Save the file and upload it back to your server.

This will activate a default maintenance mode page for your visitors while you work on your website.

Conclusion

Disabling your WordPress website temporarily for maintenance is a smart way to ensure that visitors don’t encounter incomplete or malfunctioning pages. Whether you use a plugin or a quick code addition, activating maintenance mode in WordPress is a simple task. Keep your site professional even when it’s under construction by using these techniques.

The post How to Disable / Maintenance Mode Your Website on WordPress first appeared on identity design.

The post How to Disable / Maintenance Mode Your Website on WordPress 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.

How to Add Deny Access to the .htaccess File

djemals — Mon, 08 May 2023 23:03:49 +0000

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

Order allow,deny
Deny from all

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.

The post How to Add Deny Access to the .htaccess File first appeared on identity design.

The post How to Add Deny Access to the .htaccess File appeared first on identity design.

Renewing an Expired SSL Certificate with AutoSSL in cPanel: A Quick Guide

djemals — Sat, 18 Feb 2023 00:51:44 +0000

An SSL (Secure Sockets Layer) certificate is a digital certificate that encrypts data and ensures secure communication between a web server and a client browser. It’s essential to renew your SSL certificate before it expires to maintain a secure connection on your website. If your website is hosted on a cPanel server, you can renew your SSL certificate using the AutoSSL feature in just a few simple steps. In this blog post, we will guide you through the process of renewing an expired SSL certificate with AutoSSL in cPanel.

Step 1: Log in to your cPanel account

The first step is to log in to your cPanel account. You can do this by accessing the cPanel login URL provided by your web hosting company and entering your cPanel username and password.

Step 2: Go to SSL/TLS Status page

Once you’re logged in, go to the SSL/TLS Status page. You can find it by using the search bar or by scrolling down to the Security section of the cPanel dashboard.

Step 3: Renew the SSL certificate

On the SSL/TLS Status page, you will see a list of all the SSL certificates installed on your server, including any that have expired. Check on all expired domain names and click the “Run AutoSSL” button. Wait for a few minutes until the “Success” sign appears. If it doesn’t work, you can try uninstalling the SSL certificate by clicking on SSL/TLS Status – “View Certificate” or SSL/TLS – “Manage SSL sites.” Then click “Uninstall.” Go back to the SSL/TLS Status page and reinstall the SSL certificate with “Run AutoSSL” again.

Optional for WordPress users: Add “Really Simple SSL” plugin and activate HTTPS for your domain.

If you’re using WordPress, you can add the “Really Simple SSL” plugin and activate HTTPS for your domain. The plugin will automatically detect your SSL certificate and configure your website to use HTTPS. This will ensure that all pages on your website are secure and encrypted. To add the plugin, go to the WordPress plugin directory and search for “Really Simple SSL.” Install and activate the plugin, and then follow the prompts to activate HTTPS for your domain.

And that’s it! By following these simple steps, you can renew an expired SSL certificate and maintain a secure connection on your website.

The post Renewing an Expired SSL Certificate with AutoSSL in cPanel: A Quick Guide first appeared on identity design.

The post Renewing an Expired SSL Certificate with AutoSSL in cPanel: A Quick Guide 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 Add a Sitemap of a WordPress Website

djemals — Mon, 19 Sep 2022 09:28:47 +0000

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

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

2. ENABLE XML SITEMAPS AND GET THE SITEMAP URL

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

3. SUBMIT A SITEMAP ON GOOGLE SEARCH CONSOLE

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

The post How to Add a Sitemap of a WordPress Website first appeared on identity design.

The post How to Add a Sitemap of a WordPress Website appeared first on identity design.

YARPP for WordPress: How to remove the “You May Also Like” header on the sidebar widget area

djemals — Fri, 08 Jul 2022 22:20:07 +0000

YARPP (Yet Another Related Posts Plugin) is one of the greatest plugins in WordPress that provides related posts automatically using an algorithm, but there are a few things that can’t be easily fixed through its settings.

How to remove the “You May Also Like” header on the sidebar widget YARPP Plugin for WordPress?

I’ve tried many options in the settings, but they didn’t seem to work. Try using the CSS code below to remove it easily.

CSS

Copy the code below and paste it into your CSS document.

.yarpp-related-widget h3 { display:none; }

Tada!

The post YARPP for WordPress: How to remove the “You May Also Like” header on the sidebar widget area first appeared on identity design.

The post YARPP for WordPress: How to remove the “You May Also Like” header on the sidebar widget area appeared first on identity design.

How to remove the “Related Posts” on YARPP Plugin for WordPress

djemals — Fri, 08 Jul 2022 22:12:20 +0000

YARPP(Yet Another Related Posts Plugin) is a one of the greatest plugins in WordPress that provides related posts automatically with algorithm, but there are a few things can’t be easily fixable on its setting.

How to remove the “Related Posts” on YARPP?

I’ve tried many options on their settings to remove the Related Posts on the bottom of a page, but it seems not working. Try below CSS line to remove it with ease.

CSS

Copy the code below and paste into your CSS document.

.yarpp-related-website { display:none; }

Tada!

The post How to remove the “Related Posts” on YARPP Plugin for WordPress first appeared on identity design.

The post How to remove the “Related Posts” on YARPP Plugin for WordPress appeared first on identity design.

How to Duplicate/Migrate WordPress Website – Duplicator

djemals — Tue, 10 May 2022 00:37:55 +0000

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

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

2. DATABASE CREATION ON NEW SERVER

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

3. UPLOAD BACKED UP FILES TO NEW SERVER

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. )
Open a web browser -> http://YOUR-DOMAIN.com/installer.php
Select the checkbox, “I have read and accept all terms & notices*”
Select Remove all data and input your Database, User and Password and hit Test Database. If looks good, hit Next.
Click Next for step 4, Login the site with Site Login.

The post How to Duplicate/Migrate WordPress Website – Duplicator first appeared on identity design.

The post How to Duplicate/Migrate WordPress Website – Duplicator appeared first on identity design.

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

djemals — Mon, 21 Feb 2022 09:14:04 +0000

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

The post WordPress Contact Form 7 Submit Button Not Working (Nonstop Wheel Spinning) first appeared on identity design.

The post WordPress Contact Form 7 Submit Button Not Working (Nonstop Wheel Spinning) appeared first on identity design.

Display Product Description On Shopify Cart Page

djemals — Fri, 18 Feb 2022 21:13:22 +0000

Shopify cart page won’t have description blurb in default. Below is how to add the description blurb on the cart page.

Display Product Description on Shopify Cart Page

Tested on “Dawn Theme”

{{ item.product.description }}

Add the code to the main-cart-items.liquid file.

The post Display Product Description On Shopify Cart Page first appeared on identity design.

The post Display Product Description On Shopify Cart Page appeared first on identity design.

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

djemals — Mon, 07 Feb 2022 21:58:03 +0000

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.

Display Inventory Quantity on Shopify Product Page

Tested on “Dawn Theme”

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

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

{%- when 'popup' -%}

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

The post Display Inventory Quantity “X items available in stock” On Shopify Product Page first appeared on identity design.

The post Display Inventory Quantity “X items available in stock” On Shopify Product Page appeared first on identity design.

Freebies: Kebab Kabob Display Menu Template (PSD)

djemals — Wed, 12 Jan 2022 09:03:56 +0000

The “Kebab” or “Kabob” Mediterranean food display menu template in Photoshop (PSD) by Identity Design is designed in high resolution and ready to use. It’s layered in PSD and available for a free download.

Terms

All Identity Design Freebies can be used for both personal and commercial use.
You may not redistribute or resell Identity Design Freebies in any shape or form.

Download

The post Freebies: Kebab Kabob Display Menu Template (PSD) first appeared on identity design.

The post Freebies: Kebab Kabob Display Menu Template (PSD) appeared first on identity design.

Web Developer / Designer Bookmarks

djemals — Wed, 05 Jan 2022 01:32:31 +0000

Get Inspired!

Behance

Trendy portfolios. Showcase. Adobe.

dribbble

World designers. Top creatives.

awwwards

Awards of design.

Cyrillic Design

Awards of design.

Qode Interactive

High quality WordPress Templates.

Image sharing. Social Media.

Design Resources

Unsplash

Freely-usable photo library.

Freepik

Powerful vector library.

Creative Market

6 free goods. Every week.

Pixelbuddha

Free & premium resources.

Google Fonts

Free web fonts. Downloadable.

Material Icons

Free web icons from Google.

Bensound

Royalty free music.

Tools

Pingdom Website Speed Test

Analyze web. Speed test.

Whois Lookup

Find IP. DNS

Custom Shape Dividers

Custom dividers for web. SVG

Cool Backgrounds

Customize backgrounds in PNG. Abstract. Lines. Gradient.

themer

Generates colors

Web Fundamentals

Web skills learning. HTML, CSS, JavaScript and browser

The post Web Developer / Designer Bookmarks first appeared on identity design.

The post Web Developer / Designer Bookmarks appeared first on identity design.

Freebies: Car Cover Website Mock Up Template (PSD)

djemals — Sat, 25 Dec 2021 19:55:44 +0000

The Car Cover Website Design mockup in Photoshop (PSD) by Identity Design is designed in high quality 2400 pixel in width. This clean & sophisticated design is ready to use on your own design before it’s cut up in HTML. It’s layered in PSD and available for a free download.

Terms

All Identity Design Freebies can be used for both personal and commercial use.
You may not redistribute or resell Identity Design Freebies in any shape or form.

Download

The post Freebies: Car Cover Website Mock Up Template (PSD) first appeared on identity design.

The post Freebies: Car Cover Website Mock Up Template (PSD) appeared first on identity design.

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

djemals — Mon, 11 Oct 2021 07:12:59 +0000

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.

The post WooCommerce Astra: How to Disable Cart Bubble on Hover of the Cart Menu first appeared on identity design.

The post WooCommerce Astra: How to Disable Cart Bubble on Hover of the Cart Menu 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.

How to Change Bootstrap Carousel Slider Animation to Fade Out Effect or Remove the Sliding Effect

djemals — Sat, 18 Sep 2021 00:07:29 +0000

The sliding effect is the default animation for Bootstrap Carousel. Below code is how a general Bootstrap Carousel Slider would look like.

Change Sliding Animation to a “Fade” Effect

Add a class name, carousel-face right after slide. You can also add data-interval="3000" to control the speed of the animation. 1000 is 1 second, and 3000 is 3 seconds. You can replace ‘3000’ with your desired slider speed.

Remove the Sliding Effect Completely

You can completely remove the sliding effect on your carousel. Simply remove slide from the class of div.

The post How to Change Bootstrap Carousel Slider Animation to Fade Out Effect or Remove the Sliding Effect first appeared on identity design.

The post How to Change Bootstrap Carousel Slider Animation to Fade Out Effect or Remove the Sliding Effect appeared first on identity design.

Solved: Adobe Creative Cloud Access to Manage Apps Permission Issue

djemals — Mon, 13 Sep 2021 22:56:13 +0000

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.

Edit ServiceConfig.xml

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

AppsPaneltrueSelfServeInstallstrue

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.

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

The post Solved: Adobe Creative Cloud Access to Manage Apps Permission Issue first appeared on identity design.

The post Solved: Adobe Creative Cloud Access to Manage Apps Permission Issue appeared first on identity design.

Make Your WordPress into a Multisite (Create a Network)

djemals — Fri, 03 Sep 2021 23:09:27 +0000

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

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

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

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

What if the Sub-directory installation is not available?

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.

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.

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

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

The post Make Your WordPress into a Multisite (Create a Network) first appeared on identity design.

The post Make Your WordPress into a Multisite (Create a Network) appeared first on identity design.

CSS: Make Perfect Responsive YouTube Embedded Iframed Videos

djemals — Mon, 16 Aug 2021 20:19:19 +0000

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

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!

The post CSS: Make Perfect Responsive YouTube Embedded Iframed Videos first appeared on identity design.

The post CSS: Make Perfect Responsive YouTube Embedded Iframed Videos 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.

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

djemals — Mon, 26 Apr 2021 09:18:24 +0000

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.

The post Malware/Virus: Fix and Remove “WP-VCD” from my WordPress first appeared on identity design.

The post Malware/Virus: Fix and Remove “WP-VCD” from my WordPress appeared first on identity design.

cPanel: Change / Increase Maximum Upload File Size

djemals — Wed, 14 Apr 2021 08:53:09 +0000

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.

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

The post cPanel: Change / Increase Maximum Upload File Size first appeared on identity design.

The post cPanel: Change / Increase Maximum Upload File Size 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.

identity design

Stop Losing Your Code — Use an Astra Child Theme!

Why Your Code Disappears

What is a Child Theme?

How to Install an Astra Child Theme in WordPress

How to Install the Child Theme (Step-by-Step)

Where to Add Your Custom Code

Bonus Tip: Astra Pro Compatibility

Final Thoughts

Related posts:

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

The Problem

The Simple Fix

Pro Tip

Final Thoughts

Related posts:

How to Fix Missing Google Fonts After Changing Your WordPress Elementor Website Domain

How to Fix Missing Google Fonts After Changing Your Elementor Website Domain

Step 1: Update Elementor URLs

Step 2: Regenerate Elementor CSS Files

Step 3: Clear Browser and Plugin Cache

Step 4: Check Font Load Status in Developer Tools

Step 5: Ensure SSL and Mixed Content Are Correct

Final Thoughts

Related posts:

Top 5 Free Design Template Sites Every Designer Should Know

1. HTML5 UP

2. Canva Templates

3. Figma Community

4. Mixo.io – Landing Page Templates

5. Identity Design – Freebies

Final Thoughts

Related posts:

How to Suppress Errors and Warnings in WordPress for Emergencies

How to Suppress Errors and Warnings in WordPress for Emergencies

Suppressing Errors and Warnings in WordPress

1. Locate wp-config.php

2. Set WP_DEBUG to False

3. Add the Suppression Code

Why Use This Code?

Important Note

Conclusion

Related posts:

How to Disable / Maintenance Mode Your Website on WordPress

Disabling a Website in WordPress

1. Using a Maintenance Mode Plugin

2. Enabling Maintenance Mode via wp-config.php

Conclusion

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:

How to Add Deny Access to the .htaccess File

1. Access your website’s .htaccess file

2. Add the deny access rule

3. Save the changes

Related posts:

Renewing an Expired SSL Certificate with AutoSSL in cPanel: A Quick Guide

Step 1: Log in to your cPanel account

Step 2: Go to SSL/TLS Status page

Step 3: Renew the SSL certificate

Related posts:

HTML-CSS-JS: Simple Hamburger Menu Expandable

1. Locate `wp-config.php`

Add CSS to your website `header`

Add JS at the end of `body` tag