Today we received a contact form fill out with the following message:

Notice#: 491343

Date: 2021-01-21

YOUR IMMEDIATE ATTENTION TO THIS MESSAGE IS ABSOLUTELY NECESSARY!

YOUR DOMAIN sigma1.com WILL BE TERMINATED WITHIN 24 HOURS We have not received your payment for the renewal of your domain sigma1.com

We have made several attempts to reach you by phone, to inform you regarding the TERMINATION of your domain sigma1.com

CLICK HERE FOR SECURE ONLINE PAYMENT: LINK REMOVED FOR YOUR SECURITY

IF WE DO NOT RECEIVE YOUR PAYMENT WITHIN 24 HOURS, YOUR DOMAIN sigma1.com WILL BE TERMINATED

CLICK HERE FOR SECURE ONLINE PAYMENT: LINK REMOVED FOR YOUR SECURITY ACT IMMEDIATELY.

The submission notification sigma1.com will EXPIRE WITHIN 24 HOURS after reception of this email

This type of scam involves scaring the reader into clicking on the link in hopes of resolving the issue before their domain gets deleted. If you get this notification, simply log into your registrar and see the status or just call them and see your status.

When working on any type of project for both yourself and your clients, getting good images is always a difficult task. Sometimes they provide you with a large folder of images or sometimes you are left to your own devices and have to use stock photos to complete the project. The problem with both of these are that usually the photos you do obtain are not all cohesive with one another and that detracts from the quality of the brand as a whole.

Something I like to do when working with photos for a client is use Lightroom to edit the photos and create a preset that I can use all all subsequent photos to ensure a cohesive feel across not just the website but also social media, printed graphics, advertisements and more.

You can see a wonderful example using this preset for our client's website - The Las Vegas Farm

If you are feeling lazy you can see a comparison here:

With The Filter
Without The Filter

We have decided to create a free Adobe Lightroom Preset for you to start using on your projects today. If you sign up for our newsletter, we will send you an additional 3 free presets with no questions asked!

We have added instructions on how to use it on both mobile and desktop in the folder titled readme.txt

We have had a few people ask us how we managed to get our sidebar to "stick" as your scroll down the page. So we decided to write a tutorial about it! If you look at one of our longer blog posts you can see that as you scroll down the page the side bar moves with you. We do this to highlight our important information like signing up for our newsletter and providing a quick way for people to get in contact with us should they happen to like out blog.

We have seen tons of implementations of using a plugin to make items sticky throughout the website. However, this is the best way to do it as it is less than 20 lines of CSS, mobile responsive, and you don't need a plugin!


@media only screen and ( min-width: 1405px ) {
 .sticky-column {
  position: sticky !Important;
  position: -webkit-sticky !Important;
  top: 150px !Important; /* Change the height from the top here */
 }
}
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) {
 .sticky-column {
  position: sticky !Important;
  position: -webkit-sticky !Important;
  top: 150px !Important; /* Change the height from the top here */
 }
}
CSS

Let's break down this code, shall we?

  1. We are using CSS media queries to ensure that it is compatible with all different devices.
  2. If you look at top: 150px it is how many pixels that the column is spaced from the top. In our case we are using a fixed header so it looks less than 150px but you will most likely need to adjust it to suit your needs

Then to use it, you simply create a two column layout like you see on this blog posting right in front of you. On the column you want sticky, just add the class .sticky-column and you are good to go! Another cool feature is you do not need to make a column sticky per se, but you can also make any element sticky as well. Just assign it .sticky-column and you are good to go. On second thought, if you are going to assign it to elements, change the selector to something more universal to help keep your code organized & clean.

When building a website and the customer needs a bit of custom functionality added to it, most designers look for a plugin to assist in this process. However, sometimes it is easier and more convenient to simply add a snippet of code instead of adding the dreaded just one more plugin problem. For using this you have 2 different options, you can either add these codes to your functions.php file or you can use a plugin the two best ones are Code Snippets and Advanced Scripts. Now let's jump right in!

1. Automatically Empty Trash

This snippet will automatically empty your WordPress trashcan after a specified amount of time. If you need to change it from weekly then simply change the "7" to something else like "1" to make it daily. This is useful for WooCommerce products, old blog posts and other similar scenarios in which constantly emptying the trash is too burdensome.

// automatically empty trash weekly 
define( 'EMPTY_TRASH_DAYS', 7 );
PHP

2. Get Home URL

This is useful if you are building a website on a sub-directory setup and you want the user to be able to click on the logo and take them home. An example of this scenario is if I was building a website on https://sigma1.com/new-website if I simply set the logo link wrapper to "/" it will take them to https://sigma1.com and not the homepage of https://sigma1.com/new-website. To prevent hard-coding these situations you would need to use this PHP function:

function sigma1_get_home_url() {
    return  get_home_url();   
}
PHP

Or you can use it in practice like this:

<?php echo get_home_url(); ?>
PHP

Credit: WordPress Developer Handbook

3. Lock Your WordPress Site

Sometimes when working on a client's website we want to lock the entire website to prevent people from looking at it while under development. There are tons of plugins that perform this function, but we are trying to avoid using plugins! Here is the code:

// Redirect users who arent logged in...
function members_only() {
    global $pagenow;
    // Check to see if user in not logged in and not on the login page
    if( !is_user_logged_in() && $pagenow != 'wp-login.php' )
          auth_redirect();
}
add_action( 'wp', 'members_only' );
PHP

4. Change The Logo On Your WordPress Login Page

function my_login_logo_one() { 
?>

<style>
body.login div#login h1 a {
 background-image: url(http://localhost/wordpress/one.jpeg);  //Add your own logo image in this url 
padding-bottom: 30px; 
} 
</style>

<?php
} add_action( 'login_enqueue_scripts', 'my_login_logo_one' );
PHP

ACF is a great plugin that allows you to make dynamic websites with ease. When we have a client that wants to manage, update and add new content to their website we set up ACF so they can manage it with ease. One field we like to use is the "Page Link" field that allows them to select a page that they want a page or a button to link to. Using this field is slightly different and less straightforward than the others.

Here is the code:

function sigma1_get_button_link($button_id){

$page_id = get_field($button_id, false, false );
if( $page_id ):
    return get_the_permalink( $page_id );
    echo get_the_title( $page_id );
endif;
}
PHP

For this blog post, we will show you how to add even more CSS hover animations for links and/or menu items. If you want to see the first post check out here

We have provided a few more CSS hover animations that have a similar look and feel that will help enhance the style of your website.

The first style is the initial one we wrote about on our previous blog. This underline grows from the right.

Grows From Left

 
a.left-hover
{
    position: relative;
}
a.left-hover:before {
  content: "";
  position: absolute;
  width: 0;
  height: 5px;
  bottom: 0;
  left: 0;
  background-color: #8c61ff;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
a.left-hover:hover:before {
 visibility: visible;
  width: 100%;
}
CSS

The next animation is very similar, but this one grows from the right

Grows From Right

a.right-hover
{
    position: relative;
}
a.right-hover:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  right: 0;
  background-color: #8c61ff;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
a.right-hover:hover:before {
  visibility: visible;
  width: 100%;
}
CSS

For our last animation, we will animate the bottom border to come from the middle outward.

Grows From Middle

a.middle-hover
{
    position: relative;
}

a.middle-hover:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #8c61ff;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}
CSS

When designing a website for our client Sterling Wealth Management we decided to take a modern approach and utilize underlined words to draw attention and add emphasis. An example of this would be:

Look at this underlined word

As you can see your eyes are directly focused on the word that is underlined giving you the ability to draw attention to specific parts of the page. To add this code simply place the following CSS into your stylesheet:

.underline-word {
    display: inline-block;
    position: relative;
    padding: 0 10px;
}
.underline-word::after{
    content: '';
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0%;
    left: 0;
    background: #8c61ff;
    z-index: -1;
}
CSS

Once that is added then you simply call it into your HTML markup by using the following:

<h2>Look at this underlined <span class="underline-word">word</span></h2>
HTML, XML, Markup

If you look at the above CSS snippet, you can see several different styles being rendered, however, the one you are probably most interested in is the one regarding the color - background: #8c61ff; simply change that with any other color value and you're ready to go!