Dev Blog Archives - YellowWebMonkey Web Design https://www.yellowwebmonkey.com/category/dev-blog/ YellowWebMonkey Web Design Thu, 17 Feb 2022 23:45:51 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.1 https://www.yellowwebmonkey.com/wp-content/uploads/2020/07/favicon.ico Dev Blog Archives - YellowWebMonkey Web Design https://www.yellowwebmonkey.com/category/dev-blog/ 32 32 How to create a custom stylesheet in your Shopify Store https://www.yellowwebmonkey.com/how-to-create-a-custom-stylesheet-in-your-shopify-store-2/ Fri, 17 Jul 2020 12:24:47 +0000 https://www.yellowwebmonkey.com/how-to-create-a-custom-stylesheet-in-your-shopify-store-2/ It is often necessary to add custom styling to your Shopify theme. If you add it to your theme.scss.liquid and the theme is updated you will lose all of your changes. So we create a new SCSS file to keep all the custom styles nice and safe as well as much easier to edit.   …

How to create a custom stylesheet in your Shopify Store Read More »

The post How to create a custom stylesheet in your Shopify Store appeared first on YellowWebMonkey Web Design.

]]>
It is often necessary to add custom styling to your Shopify theme. If you add it to your theme.scss.liquid and the theme is updated you will lose all of your changes. So we create a new SCSS file to keep all the custom styles nice and safe as well as much easier to edit.  

1. Create a new asset for CSS styling: custom.scss.liquid

This is where we are going to put all our custom CSS styles

2. Connect new asset to the theme

We need to link to theme.liquid so the custom styles show on our website

Go to Layout > theme.liquid and scroll down until you see

{{ 'theme.scss.css' | asset_url | stylesheet_tag }}

Underneath this add

{{ 'custom.scss.css' | asset_url | stylesheet_tag }} 

Screen Shot 2020 07 15 at 6.05.40 PM

3. Testing our CSS styles

Now let’s add some custom CSS to check everything is working correctly. I always like to check by changing the background to red so it’s nice and easy to see that our CSS is working:

body {background: red;}

4. Preview the CSS changes

Go and preview the website. You can see there’s a red background on the website which means now anything that we modify inside the custom CSS is going to make modifications to our website

(insert image red-background)

 

* Don’t forget to remove the background code we added and then you are ready to style your website – have fun!

The post How to create a custom stylesheet in your Shopify Store appeared first on YellowWebMonkey Web Design.

]]>
Add a Sitemap for your Shopify Customers without an App https://www.yellowwebmonkey.com/add-a-sitemap-for-your-shopify-customers-without-an-app-2/ Thu, 02 Jul 2020 12:23:30 +0000 https://www.yellowwebmonkey.com/add-a-sitemap-for-your-shopify-customers-without-an-app-2/ For your e-commerce shop, a sitemap is a page which lists all of your products, collections, shop categories as well as other pages. It links them well and makes them easily available for your customers. A sitemap is usually found in the footer menu of a website.  Although Shopify provides the XML sitemap for Google, …

Add a Sitemap for your Shopify Customers without an App Read More »

The post Add a Sitemap for your Shopify Customers without an App appeared first on YellowWebMonkey Web Design.

]]>
For your e-commerce shop, a sitemap is a page which lists all of your products, collections, shop categories as well as other pages. It links them well and makes them easily available for your customers. A sitemap is usually found in the footer menu of a website.  Although Shopify provides the XML sitemap for Google, you generally have to install a paid app to have a sitemap for your customers. We code a customer sitemap into all Shopify sites we manage and wanted to share the code with others.  All the code snippet are loaded into Gist and you can learn more about how to include a sitemap to your website here:

See in action:

1. Create a new page template: ywm-sitemap.liquid

Place this code after the div that includes {{ page.content }} and remove the existing div that holds the h1

2. Create a new section: ywm-sitemap.liquid

3. Next add CSS styling to custom.css.liquid

If you don’t have custom.css.liquid in your theme, you can create a new asset

4. Set sitemap page to use new template

Go to Pages > Add New > Choose the Template suffix: page-ywm-sitemap > Save

5. Add the Sitemap page to your footer menu

Go to Navigation > Footer Menu > Add new menu item > Give it a name and within the Link dropdown choose pages and select Sitemap > Add > Save Menu

6. Adjust sitemap settings.

Go into theme > Customize

Go to the page you just added. Here you can change your settings – add a heading, text and choose what to include on the sitemap.

sitemap1


sitemap2


sitemap3

The post Add a Sitemap for your Shopify Customers without an App appeared first on YellowWebMonkey Web Design.

]]>
Shopify Announcement/Promotion Bar with Options https://www.yellowwebmonkey.com/shopify-announcement-promotion-bar-with-options/ Fri, 12 Jun 2020 12:39:33 +0000 https://www.yellowwebmonkey.com/shopify-announcement-promotion-bar-with-options/ Although most Shopify templates have an announcement bar, they are not very customizable.  We built this custom section for a client because they have frequent promotions and need the colors to match the sale graphic.  We also added animation to it to draw more attention.  The result works great and is easy to install.  We …

Shopify Announcement/Promotion Bar with Options Read More »

The post Shopify Announcement/Promotion Bar with Options appeared first on YellowWebMonkey Web Design.

]]>
promo sidebarAlthough most Shopify templates have an announcement bar, they are not very customizable.  We built this custom section for a client because they have frequent promotions and need the colors to match the sale graphic.  We also added animation to it to draw more attention.  The result works great and is easy to install.  We have all the code snippets loaded into Gist and you can read more about it below:

Here is the finished product:

Contact UsNeed custom Shopify Liquid work?


1. Create a new section: ywm-promotion-bar.liquid

2. Create a new snippet for Hex to RGB: hex2rgb.liquid

This code is from granteagon and taken from Shopify-hex2rgb.liquid

{% assign hex2rgb_rgb = hex2rgb_hex | remove: '#' | downcase | split: '' %} 	{% assign hex2rgb_str = '' %} 	{% assign hex2rgb_chars = 'a,b,c,d,e,f' | split: ',' %} 	{% assign hex2rgb_remainders = '10,11,12,13,14,15' | split: ',' %} 	{% for hex2rgb_i in (0..5) %} 	{% assign hex2rgb_is_char = 0 %} 	{% for hex2rgb_c in (0..5) %} 	{% unless hex2rgb_is_char == 1 %} 	{% if hex2rgb_rgb[hex2rgb_i] == hex2rgb_chars[hex2rgb_c] %} 	{% assign hex2rgb_is_char = 1 %} 	{% capture hex2rgb_str %}{{ hex2rgb_str }}{{ hex2rgb_remainders[hex2rgb_c] }}|{% endcapture %} 	{% endif %} 	{% endunless %} 	{% endfor %} 	{% if hex2rgb_is_char == 0 %} 	{% capture hex2rgb_str %}{{ hex2rgb_str }}{{ hex2rgb_rgb[hex2rgb_i] }}|{% endcapture %} 	{% endif %} 	{% endfor %} 	{% assign hex2rgb_rgb = hex2rgb_str | split: "|" %} 	{% assign hex2rgb_r = hex2rgb_rgb[0] | times: 16 | plus: hex2rgb_rgb[1] %} 	{% assign hex2rgb_g = hex2rgb_rgb[2] | times: 16 | plus: hex2rgb_rgb[3] %} 	{% assign hex2rgb_b = hex2rgb_rgb[4] | times: 16 | plus: hex2rgb_rgb[5] %}

3. Upload new asset for animations: animations.css

Download the animations from Justin Aguilar and upload as a new asset.

http://www.justinaguilar.com/animations/css/animations.css

4. Modify Theme: theme.liquid

For this scenario, we are only loading on the homepage, so that is why we have the conditionals for the homepage only. You can remove that if you want to load elsewhere.

5. Create a new asset for CSS styling: ywm-promotion-bar.scss

I usually just add the code to my existing custom.scss.liquid though.

6. Go into theme->CUSTOMIZE

Go to the homepage or whatever page you added it to. You can adjust the settings like the video at the beginning of this post.

Contact UsNeed custom Shopify Liquid work? Let us know! Whether its custom sections, theme customizations, or Shopify SEO optimization we can knock it out!

The post Shopify Announcement/Promotion Bar with Options appeared first on YellowWebMonkey Web Design.

]]>
Use Custom Google Tags to Track Events on Your Website https://www.yellowwebmonkey.com/use-custom-google-tags-to-track-events-on-your-website/ Wed, 22 Apr 2020 21:02:42 +0000 https://www.yellowwebmonkey.com/use-custom-google-tags-to-track-events-on-your-website/ You’ve just created new content on your site: a podcast, downloadable infographic, submission form, etc., but aren’t quite sure what your site visitors view as valuable content. Google Analytics gives us some of this information by telling us what pages are popular and where visitors come from in terms of both traffic and demographics, but …

Use Custom Google Tags to Track Events on Your Website Read More »

The post Use Custom Google Tags to Track Events on Your Website appeared first on YellowWebMonkey Web Design.

]]>
You’ve just created new content on your site: a podcast, downloadable infographic, submission form, etc., but aren’t quite sure what your site visitors view as valuable content. Google Analytics gives us some of this information by telling us what pages are popular and where visitors come from in terms of both traffic and demographics, but website owners developing marketing and content strategies need to know more about the behavior of visitors on their site and they’re missing some key pieces of the puzzle. Those missing insights can be uncovered with event tracking. While you can add Google Analytics event tracking code to every page of your site, it’s much simpler to use Google Tag Manager (GTM). Google Tags can be customized and configured to track the specific behaviors through tracking clicks made on your website. 

 

Below are the instructions for setting up some of the most frequently used types. We recommend configuring variables first, followed by triggers, and then the tag itself. After setting up the tag, use preview mode and the Chrome extension Google Tag Assistant to verify that the tag is firing appropriately for a click on the website.

 

1. Set Variables

First, ensure that the correct variables are configured properly by opening “Variables” from the menu on the left

gtags variables 

 

Under “Built in Variables” click the “Configure” button

variables configure

 

Select the following variables from the “Built in Variables” options

built in var

clicks

 

Create a new “User Defined Variable” for Google Analytics by clicking the “New” tab and selecting the following variables

GA settings

 

Create the following Variable for tracking pdf document clicks

pdf clicks

 

2. Set Triggers

triggers

 

-To track Download Clicks add the following trigger:

download clicks trigger 700

 

-To track Email Link Clicks add the following trigger:

email link clicks trigger 700

 

-To track Download Clicks add the following trigger:

download trigger 700

 

-To track PCO form clicks add the following trigger:

pco form clicks 700

 

-To track Spotify audio clicks add the following trigger:

spotify clicks

 

-To track subsplash clicks add the following trigger:

subsplash clicks 700

 

-To track telephone call clicks add the following trigger:

call clicks 700

 

-To track Vimeo video clicks add the following trigger:

vimeo clicks 700

 

-To track a PDF document click add the following trigger:

pdf doc clicks

 

-To track Youtube video clicks add the following trigger:

yt clicks 700

 

3. Add Google Tags

-Click the “Tags” tab and the “New” button to create a new Google Tag
-Rename the tag

rename tag 700

 

-To add a Spotify audio click tag configure the “tag” and “triggering” options as follows:

spotify tag 700

 

-To track download clicks configure the “tag” and “triggering” options as follows:

download clicks tag 700

 

-To track email link clicks, configure the “tag” and “triggering” options as follows:

email link clicks tag 700

 

-To add Google Analytics Universal Analytics configure the “tag” and “triggering” options as follows:

google analytics tag 700

 

-To track a form click, such as a CRM (customer relationship management) form, configure the “tag” and “triggering” options as follows:

pco form click tag 700

 

-To track a PDF form click configure the “tag” and “triggering” options as follows:

pdf click tag 700

 

-To track a telephone call click configure the “tag” and “triggering” options as follows:

phone tag 700

 

-To track video clicks (Vimeo or YouTube) configure the “tag” and “triggering” options as follows:

video tag 700

 

 

4. Click Submit

 

 

5. Click Publish

 

 

6. Click Skip

 

 

7. Go to the website and verify that the tags are firing appropriately by using preview mode in Google Tags and Google Tag Assistant.

 

 

These new insights can help inform and guide your marketing and business strategies.

 

There’s a difference between hiring someone to build a website with your preferred CMS (content management system), functions and graphics, and hiring a web designer to optimize the user experience and behavior flow for your site.

The post Use Custom Google Tags to Track Events on Your Website appeared first on YellowWebMonkey Web Design.

]]>
Fix Breadcrumbs Markup on Joomla site https://www.yellowwebmonkey.com/fix-breadcrumbs-markup-on-joomla-site/ Mon, 23 Sep 2019 15:04:46 +0000 https://www.yellowwebmonkey.com/fix-breadcrumbs-markup-on-joomla-site/ You may have noticed that Google Search Console recently added a New Structured Data Report for Breadcrumbs in order to allow users to evaluate whether their breadcrumb markup has been implemented correctly.   Twitter lit up with posts and pictures like this one:  {source}<blockquote class=”twitter-tweet”><p lang=”en” dir=”ltr”>Thanks Google Search Console, I think I got your …

Fix Breadcrumbs Markup on Joomla site Read More »

The post Fix Breadcrumbs Markup on Joomla site appeared first on YellowWebMonkey Web Design.

]]>
You may have noticed that Google Search Console recently added a New Structured Data Report for Breadcrumbs in order to allow users to evaluate whether their breadcrumb markup has been implemented correctly.

 

Twitter lit up with posts and pictures like this one: 

{source}<blockquote class=”twitter-tweet”><p lang=”en” dir=”ltr”>Thanks Google Search Console, I think I got your point 😁🙋🏻‍♀️😅 <a href=”https://t.co/xndAFcclWy”>pic.twitter.com/xndAFcclWy</a></p>&mdash; Aleyda Solis (@aleyda) <a href=”https://twitter.com/aleyda/status/1175032969414828032?ref_src=twsrc%5Etfw”>September 20, 2019</a></blockquote> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>{/source}

 

The default Joomla breadcrumbs do not put a link on the last breadcrumb, and that is causing the validation issue. The dilemma is that you do not want a link that simply goes to itself or that confuses users.

 

The solution is to go to template code and make an override for mod_breadcrumbs
You can accomplish this in less than 5 minutes by following the video at the bottom

 

Around line 56, find

<?php if (($key !== $penult_item_key) || $show_last) : ?>       <span class="divider">           <?php echo $separator; ?>       </span> <?php endif; ?> 

And replace with

<?php if (($key !== $penult_item_key) || $show_last) : ?>      <link itemprop="item" href="<?php echo $item->link; ?>">       <span class="divider">           <?php echo $separator; ?>       </span> <?php endif; ?> 

 

Around line 65, find

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="active">         <span itemprop="name">       <?php echo $item->name; ?>         </span>         <meta itemprop="position" content="<?php echo $key + 1; ?>"> </li> 

And replace with

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="active"> <link itemprop="item" href="<?php echo $item->link; ?>">         <span itemprop="name">       <?php echo $item->name; ?>         </span>         <meta itemprop="position" content="<?php echo $key + 1; ?>"> </li> 

Here is a short video of how to create the template overrides:

{source}<iframe src=”https://share.getcloudapp.com/rRuErrKL?embed=true” width=”575″ height=”400″ style=”border:none” frameborder=”0″ allowtransparency=”true” allowfullscreen=”true”>              </iframe>{/source}

The post Fix Breadcrumbs Markup on Joomla site appeared first on YellowWebMonkey Web Design.

]]>
Redirect PDF File Only When Missing https://www.yellowwebmonkey.com/redirect-pdf-file-only-when-missing/ Tue, 22 Jan 2019 14:34:16 +0000 https://www.yellowwebmonkey.com/redirect-pdf-file-only-when-missing/ We have a client that has hundreds of training and product manuals and many have been removed over time.  That creates broken links and frustrated customers for them.  They had two folders that these resided in, /images/documents/ and /im_uploads/ We recommend creating a new page with a specific message that the resource is missing and …

Redirect PDF File Only When Missing Read More »

The post Redirect PDF File Only When Missing appeared first on YellowWebMonkey Web Design.

]]>
redirect PDF file when missingWe have a client that has hundreds of training and product manuals and many have been removed over time.  That creates broken links and frustrated customers for them.  They had two folders that these resided in, /images/documents/ and /im_uploads/

We recommend creating a new page with a specific message that the resource is missing and then adding a search form and links to browse.  In the example below, we made such a page with a url of https://www.mysite.com/missing-file

To redirect we put together this htaccess redirect:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} ^/images/documents/.* [NC,OR]
RewriteCond %{REQUEST_URI} ^/im_uploads/.* [NC]
RewriteRule ^(.*)\.pdf$ https://www.mysite.com/missing-file [L,R=301]

 

It first checks if the url being tested is an actual file or directory.  This is important so that we do not redirect working files. 

The next two lines confine this to the two folders we want to check because we don’t want to be affecting things in the media folder or whatnot.  If you only need to check one folder, make sure you remove the OR from the end of the line you keep.  The [NC] makes the match case insensitive which we used because there were many variants of the file names and wanted to catch them all.

The rule line tells it to take all the pdf files (you can modified to another file extension for other uses) and then redirect to the new page we setup.  The [L] means it is the last rule and it should “exit” out of the htaccess and not apply any other rules.  The [R=301] is very important for SEO because it tells search engines that it is a permanent redirect.

The post Redirect PDF File Only When Missing appeared first on YellowWebMonkey Web Design.

]]>
Cannot Access Modules In Mijoshop https://www.yellowwebmonkey.com/cannot-access-modules-in-mijoshop/ Thu, 03 Jan 2019 22:07:35 +0000 https://www.yellowwebmonkey.com/cannot-access-modules-in-mijoshop/ It is seriously frustrating to install a 3rd party extension into Mijoshop, only to get the error “The page you are looking for could not be found! Please contact your administrator if the problem persists.” afterwards.  There are generally two ways to fix this: 1. Access Issue Some extensions require that you give permissions first.  …

Cannot Access Modules In Mijoshop Read More »

The post Cannot Access Modules In Mijoshop appeared first on YellowWebMonkey Web Design.

]]>
It is seriously frustrating to install a 3rd party extension into Mijoshop, only to get the error “The page you are looking for could not be found! Please contact your administrator if the problem persists.” afterwards.  There are generally two ways to fix this:

1. Access Issue

Some extensions require that you give permissions first.  Go to users->user groups->Administrators and then for both Access Permissions and Modify Perrmisions, hit Unselect All, then Select All.  

 

2. Corrupted modules folder

In FTP, go to /public_html/components/com_mijoshop/opencart/admin/controller/extension and remove /modules/ folder (it will re-generate).

The post Cannot Access Modules In Mijoshop appeared first on YellowWebMonkey Web Design.

]]>
Redirect Loop after No Changes https://www.yellowwebmonkey.com/redirect-loop-after-no-changes/ Thu, 13 Dec 2018 21:56:10 +0000 https://www.yellowwebmonkey.com/redirect-loop-after-no-changes/ We had a site that suddenly had an important menu item error out with a redirect loop.  The odd part was we made no changes directly to the item.  The main culprit for this is using the .htaccess but we hadn’t made changes to that file in months.  There was also nothing in the Redirect …

Redirect Loop after No Changes Read More »

The post Redirect Loop after No Changes appeared first on YellowWebMonkey Web Design.

]]>
redirect loop problem in joomlaWe had a site that suddenly had an important menu item error out with a redirect loop.  The odd part was we made no changes directly to the item.  The main culprit for this is using the .htaccess but we hadn’t made changes to that file in months.  There was also nothing in the Redirect Manager that would affect it.  The issue ended up being that both the main menu item and another menu item that was set as menu alias had the same alias.  It had been like this for probably a year, so our hypothesis is that something in a recent Joomla core upgrade caused it to no longer like that.  

The post Redirect Loop after No Changes appeared first on YellowWebMonkey Web Design.

]]>
Prevent Joomla Multilingual Language Code within external files https://www.yellowwebmonkey.com/prevent-joomla-multilingual-language-code-within-external-files/ Thu, 15 Nov 2018 16:32:28 +0000 https://www.yellowwebmonkey.com/prevent-joomla-multilingual-language-code-within-external-files/ If you have your website setup to be multilingual, then you probably have the System – Language Code plugin enabled.  However, this can cause issues if you want to directly link to a file or non-Joomla folder on your site.  Some examples are direct links to multimedia (images, PDF, videos), or navigating to other installations …

Prevent Joomla Multilingual Language Code within external files Read More »

The post Prevent Joomla Multilingual Language Code within external files appeared first on YellowWebMonkey Web Design.

]]>
If you have your website setup to be multilingual, then you probably have the System – Language Code plugin enabled.  However, this can cause issues if you want to directly link to a file or non-Joomla folder on your site.  Some examples are direct links to multimedia (images, PDF, videos), or navigating to other installations like a store or Mautic that you have in a subfolder.  

Unfortunately, the solution I used is a hack of a core Joomla file which is not ideal.  If someone knows a better way, please add in the comments.  The only page I found when researching was on StackExchange but it didn’t address external links.  We use Watchful.li for montioring, so we have just added the file path to their plugin so we get an email alert if it is overwritten.

Here is the hack in /public_html/plugins/system/languagecode/languagecode.php :

After line 28:  

$app = JFactory::getApplication();

 

Add: 

$myUrl = JUri::getInstance();
$myPath = 'mautic';

 

and on line 31, change from 

if ($app->isClient('site'))

to

if ($app->isClient('site') && strpos($myUrl, $myPath) !== false)

 

 

The post Prevent Joomla Multilingual Language Code within external files appeared first on YellowWebMonkey Web Design.

]]>
Quick and Easy Tools https://www.yellowwebmonkey.com/quick-and-easy-tools/ Sun, 14 Oct 2018 17:53:43 +0000 https://www.yellowwebmonkey.com/quick-and-easy-tools/ Quick Difference http://www.quickdiff.com/ An Online Tool to do a ‘quick and dirty’ diff of two text or code fragments   Jack of All Trades http://sortmylist.com/  This is an incredible tool that can quickly reformat any text by adding, replacing, deleting, or sorting based on specified criteria.   htaccess Functionality Tester https://htaccess.madewithlove.be/ To test your htaccess …

Quick and Easy Tools Read More »

The post Quick and Easy Tools appeared first on YellowWebMonkey Web Design.

]]>
Quick Difference

http://www.quickdiff.com/

An Online Tool to do a ‘quick and dirty’ diff of two text or code fragments

 

Jack of All Trades

http://sortmylist.com/ 

This is an incredible tool that can quickly reformat any text by adding, replacing, deleting, or sorting based on specified criteria.

 

htaccess Functionality Tester

https://htaccess.madewithlove.be/

To test your htaccess rewrite rules, simply fill in the url that you’re applying the rules to, place the contents of your htaccess on the larger input area and press “Test” button.

 

htaccess Syntax Tester

http://www.htaccesscheck.com/

Sick of one silly typo in a .htaccess file causing your entire site to be broken? This simple checker will validate that your .htaccess lines are free of any syntax errors.

 

PHP Code Syntax Tester

https://phpcodechecker.com/

 This free service performs a line-by-line analysis for common mistakes and errors in your PHP syntax and will not execute or save your code.

PHP Functionality Tester

http://phptester.net/

 Same as above?

REGEX Tester

https://regex101.com/

Online regex tester and debugger: PHP, PCRE, Python, Golang & JavaScript 

SSL Certificate Tester

https://www.sslshopper.com/ssl-checker.html

This SSL Checker will help you diagnose problems with your SSL certificate installation. You can verify the SSL certificate on your web server to make sure it is correctly installed, valid, trusted and doesn’t give any errors to any of your users. To use the SSL Checker, simply enter your server’s hostname (must be public) in the box below and click the Check SSL button. If you need an SSL certificate, check out the SSL Wizard

Redirect Checker

http://www.redirect-checker.org/index.php

 

Check your URL redirect for accuracy. Do you use search engine friendly redirections like to many redirects or do you loose link juice for seo by redirects using HTTP Statuscode 301 vs. 302. Check now!

Please insert URL to check redirection.

Redirect/HTTP Status Code Tester

https://httpstatus.io/

Check status code, response headers, redirect location and redirect chain of a HTTP connection.

 

IP Address Checker

https://whatismyip.com

Lets you find an hide your IP address.

Full DNS Record Test

https://intodns.com/

IntoDNS checks the health and configuration and provides DNS report and mail servers report.

And provides suggestions to fix and improve them, with references to protocols’ official documentation.

 

DNS Propagation Check

https://www.whatsmydns.net/

whatsmydns.net lets you instantly perform a DNS lookup to check a domain names current IP address and DNS record information against multiple name servers located in different parts of the world.

This allows you to check the current state of DNS propagation after having made changes to your domains records.

MX Records

https://mxtoolbox.com/diagnostic.aspx

This test will connect to a mail server via SMTP, perform a simple Open Relay Test and verify the server has a reverse DNS (PTR) record.  It will also measure the response times for the mail server.  If you don’t know your mail server’s address, start with a MX Lookup.

The post Quick and Easy Tools appeared first on YellowWebMonkey Web Design.

]]>
Make Opencart/Mijoshop Success Message More Noticeable https://www.yellowwebmonkey.com/make-opencart-mijoshop-success-message-more-noticeable/ Mon, 13 Aug 2018 20:24:34 +0000 https://www.yellowwebmonkey.com/make-opencart-mijoshop-success-message-more-noticeable/ We use Mijoshop on quite a few client sites.  While I love how extendable it is, I HATE how after adding an item to cart, it only adds a bootstrap alert message that is not very noticeable on it.  Here is a solution that is only CSS to animated it and make the links pop …

Make Opencart/Mijoshop Success Message More Noticeable Read More »

The post Make Opencart/Mijoshop Success Message More Noticeable appeared first on YellowWebMonkey Web Design.

]]>
We use Mijoshop on quite a few client sites.  While I love how extendable it is, I HATE how after adding an item to cart, it only adds a bootstrap alert message that is not very noticeable on it.  Here is a solution that is only CSS to animated it and make the links pop a bit more:

The code for this is:

#mijoshop .alert.alert-success {animation-duration: 2.5s;animation-name: slidein;animation-iteration-count: 1;}

.alert-success a, .alert-success a:hover, .alert-success .alert-link, .alert-success .alert-link:hover {color: #356635;font-weight: bold;}

@keyframes slidein {
from {margin-left:100%;width:300%}
to {margin-left:0%;width:100%;}
}

 

* Animation adapted from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

The post Make Opencart/Mijoshop Success Message More Noticeable appeared first on YellowWebMonkey Web Design.

]]>
Recolor Form Field Placeholder Text https://www.yellowwebmonkey.com/recolor-form-field-placeholder-text/ Wed, 14 Mar 2018 19:04:20 +0000 https://www.yellowwebmonkey.com/recolor-form-field-placeholder-text/ *::-webkit-input-placeholder {color: #666;}*:-moz-placeholder {color: #666;}*::-moz-placeholder {color: #666;}*:-ms-input-placeholder {color: #666;}#form-application select, #form-application select option:disabled, select option.placeholder {color: #666;}

The post Recolor Form Field Placeholder Text appeared first on YellowWebMonkey Web Design.

]]>
*::-webkit-input-placeholder {color: #666;}
*:-moz-placeholder {color: #666;}
*::-moz-placeholder {color: #666;}
*:-ms-input-placeholder {color: #666;}
#form-application select, #form-application select option:disabled, select option.placeholder {color: #666;}

The post Recolor Form Field Placeholder Text appeared first on YellowWebMonkey Web Design.

]]>