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

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.

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.

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.

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.

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.

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.

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.

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.

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.

(Resolved) Fix PHP / MultiPHP Version Upgrade Error in WHM/Cpanel

djemals — Wed, 09 Sep 2020 07:11:35 +0000

Upgrading your PHP version might be a requirement, when upgrading your WordPress to the latest version or any related plugins. My firewall tool recommended me to upgrade my WordPress, which I did, and I saw this warning message (below) with the website being down. I was proceeding PHP upgrade from version 5.6 to 7.4 using the MultiPHP Manager in Cpanel.

Warning: Use of undefined constant WP_CONTENT_DIR – assumed ‘WP_CONTENT_DIR’ (this will throw an Error in a future version of PHP) in /home/XXXXX/public_html/wp-includes/load.php on line 115

Let me get to the point straight. The error was occurred by the auto-generated PHP handler (ver 7.4) from .htaccess that was conflicting with another PHP handler (ver 5.6) that was running simultaneously in the server.

My old PHP handler looks like this:

# Use PHP56 as default
AddHandler application/x-httpd-php56 .php

    suPHP_ConfigPath /opt/php56/lib

My new PHP handler looks like this:

# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php74” package as the default “PHP” programming language.

  AddHandler application/x-httpd-ea-php74 .php .php7 .phtml

# php -- END cPanel-generated handler, do not edit

In my case, the upgrade from the MultiPHP Manager was generating the 7.4 PHP handler in the public_html folder, and my old PHP version 5.6 handler was already existed in the folder above public_html which is above the root directory. That was the reason it was causing the error. You can’t run multiple PHP handlers for a single website.

My solution was to simply remove (or rename if you don’t want to delete the file) the .htaccess file (PHP 5.6) from one level above the root directory. Now it works like a charm!

The post (Resolved) Fix PHP / MultiPHP Version Upgrade Error in WHM/Cpanel first appeared on identity design.

The post (Resolved) Fix PHP / MultiPHP Version Upgrade Error in WHM/Cpanel appeared first on identity design.

Use Dropbox as Website Server Hosting FTP

djemals — Tue, 11 Aug 2020 08:59:08 +0000

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

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

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

Example

Change above dropbox link as below.

The post Use Dropbox as Website Server Hosting FTP first appeared on identity design.

The post Use Dropbox as Website Server Hosting FTP appeared first on identity design.

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

djemals — Mon, 09 Mar 2020 07:13:17 +0000

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

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

The post Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review first appeared on identity design.

The post Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review 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.

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 to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns

djemals — Tue, 28 Aug 2018 08:01:17 +0000

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

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

Change data-toggle to data-hover. Done!

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

The post How to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns first appeared on identity design.

The post How to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns 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.

backend - identity design

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:

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:

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:

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:

How to Add a Sitemap of a WordPress Website

1. DOWNLOAD YOAST SEO PLUGIN

2. ENABLE XML SITEMAPS AND GET THE SITEMAP URL

3. SUBMIT A SITEMAP ON GOOGLE SEARCH CONSOLE

Related posts:

How to Duplicate/Migrate WordPress Website – Duplicator

1. BACKUP FILES & DOWNLOAD

2. DATABASE CREATION ON NEW SERVER

3. UPLOAD BACKED UP FILES TO NEW SERVER

Related posts:

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

Change of code in “Contact form 7” plugin

Related posts:

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

Related posts:

Make Your WordPress into a Multisite (Create a Network)

1. Deactivate all plugins

2. Edit WP-CONFIG.PHP

3. Create a Network on Your WordPress

What if the Sub-directory installation is not available?

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

5. Add Additional Codes to your .HTACCESS

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:

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

The Malware Files

The Solution

REMOVE THE BLUE HIGHLIGHTED CODE

Related posts:

cPanel: Change / Increase Maximum Upload File Size

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

1. Locate `wp-config.php`

Add CSS to your website `header`

Add JS at the end of `body` tag

CSS: Hide/Remove Empty
tags