Creating a Low Highlight behind Links

So this post came about because I was fidgeting with different WordPress themes and decided I wanted to set out and learn how to change the way my post links were appearing. I came across a theme that was highlighting the lower half of text and which looked kinda cool in my opinion. Here’s an example of it working on my personal site:

This quest led me to discover two new CSS functions: Linear Gradients and Transitions. I’m excited to now have these under my tool belt! I’ve never had any formal training for CSS, so this trial & error thing is how I’ve been learning. :)


Linear Gradients

Now I had previously known that using background-color would highlight the entire text, but that wasn’t what I was after. Apparently, if you want to cut the highlight in half, you have to use what’s called a linear-gradient. It works something like this:

linear-gradient(angle, color-stop, color-stop)

I had to do a little reading to wrap my head around the ‘color-stop’ idea, but I found this article helpful if you care to read further. But to break it down, the angle is referring to the angle of the color line. This could be horizontal (my scenario) but it can also be vertical, at a 45° angle, or simply not specified. The next two sections, color-stop, color-stop are basically what’s used to customize the color gradient. You can specify using either length or percentage, and in my case we’ll want to use the latter.

p a {
background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #E6DFE4 65%);
}

So this is what I’m using. I only want these changes to effect the links (a) in the main paragraph text (p). The background of the links (i.e. the highlight) will be a 180° angle (i.e. horizontal). In the second portion, I’m specifying that a little over the top half of the links will be transparent, while the bottom half will be a nice shade of pink. I encourage you to play around with the percentages so you can get a sense for how they work. I could have done 50%-50%, but I wanted the highlight to fall a little below the halfway mark so you could still read the text.

Incorporating a Hover Action

This next piece is pretty simple. Now that I’ve got the links where I want them, I wanted the highlight to completely fill the text when I hover over the link with my mouse. Like so:

This was done by using the background-color property that I mentioned above. Here’s what I used:

p a:hover {
	background-color: #E6DFE4;
}

Easy peasy, right? It’s just basically removing the linear gradient and doing a full blown highlight when I hover over the link. The only issue that I noticed, and it’s super picky, but it highlighted too quickly. Lol, I wish I wasn’t serious, but this led to my next discovery…

Adding a Transition

In reading this guide, I learned that transition properties allow you to change values over a specified duration rather than having them occur immediately. Just what I was looking for. Transition properties take the following form:

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

For me, this translates to the following:

transition: all 0.8s ease;

I’ve only got one transition, but I’m calling all transition properties to keep it simple. I want the effect to take place over 0.8s and I want it to happen with ease! You can choose from a handful of predefined transition-timing-funtions like ease-in or step-start and I’ll link to them here. Finally, I don’t want to delay the animation so I left the final transition-delay out.

Now when I hover over links with my mouse, it just sort of fades in to a full highlight. *chef’s kiss*

The Final Product

p a {
	text-decoration: none !important;
	background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #E6DFE4 65%);
}

p a:hover {
	background-color: #E6DFE4;
	transition: all 0.8s ease;
}

^I added one last line to the top which is essentially removing any previous text-decoration defined by my theme. Check out the GIF below to view this in action:

Filtering Alias Email Notifications into Slack

Ok, today I set out to revamp Sales team notifications for our reseller registrars. I’ll be documenting as I go, but will first share a little back story:

We have some Domain of One’s Own schools that register Top Level domains for all of their users, so keeping those domains separate from shared hosting and consolidated in their own reseller registrar account is crucial. But as you could imagine, we’ve got a handful of these reseller accounts to monitor, and all of these accounts have their own thresholds for funds. It’s important that we keep a solid buffer of funds in each account so X number of domain renewals and registrations can be handled on a given day.

Coming back to the notifications. Our registrar, Logicboxes, will send out email notifications when funds reach a certain threshold within each reseller account. Which sounds simple enough, right? I wish! Unfortunately the email address for these notifications is also the standard billing email address, so changing it to a personal email isn’t really possible. And to make matters worse, the email address is LOUD. So loud, in fact, that we avoid checking the inbox all together and have instead resorted to manually checking reseller account funds daily.

This works fine, but I don’t like it. Manually checking makes way for human error (who is checking what? where’s the communication around the work? what if someone forgets?) and it’s definitely not scalable if we bring in new employees or take on additional reseller accounts.

I should also mention that each reseller account has their own custom email address (school@reclaimhosting.com) which acts as an alias for our catch-all email address, info@reclaimhosting.com.

My idea here was to create a sales@reclaimhosting.com email account and begin routing some of these sales-related emails out of the catch-all info@reclaimhosting.com account and into their own inbox. (I’ve wanted to do this anyway for a while now.) From there, I want to filter/forward useful notifications (like the funds threshold notice) into our designated #sales slack channel. I don’t expect doing this will eliminate the desire to manually check on reseller accounts, but I’m hoping that it will create a failsafe and centralized space to talk about the work that’s happening.


Creating a Sales Email & Setting up Alias Accounts

Reclaim Hosting runs mail though GSuite, so I started first by creating a new email account for sales@reclaimhosting.com. I had to remove the original sales@ alias first.

Next, I moved over all school@reclaimhosting.com aliases that were originally sitting on info@reclaimhosting.com. GSuite has a guide here if you’re interested.

Before doing anything else, I tested to make sure the aliases were working properly by sending an email from my personal email to school@reclaimhosting.com. It worked pretty immediately:


Setting up the Email App with Slack

Before connecting any email to Slack, I needed to first figure out what the ‘low funds in reseller account’ email notification looked like. To essentially generate the notification, I checked on the funds we had our reseller accounts, and then changed the threshold settings to a dollar less than that.

While waiting on those notifications to come through, I set up the forwarding email address in Slack. Using this guide, I went with the option to “Connect the Email app to your Workspace” because I wanted to have the option to choose which emails were being sent; I didn’t want to route the entire inbox into Slack.

Next, I chose the #sales channel since that’s where I want the notifications to arrive:

I went through integration settings, taking note of the custom email address that slack generated for me. That’s what I’ll use when filtering/forwarding specific ‘low funds’ emails.

After saving my settings, I tested the integration in Slack by sending a test email from my personal inbox to the custom address that the Slack Email App gave me:

The notification showed up beautifully in the #sales channel! By the way, I love that Slack allows you to upload a favicon and really customize how the notification comes in.

Defining Email Filters

The final piece was obviously to make sure that the proper notifications were being filtered into Slack. I didn’t want every email from sales@reclaimhosting.com coming into our #sales channel, just the ‘low funds’ notification. First, I set up my email forwarder in Gmail under Settings > Forwarding and POP/IMAP:

In this step you’ll have to confirm the forwarder email address with a confirmation code, but that wasn’t a problem since I previously tested the connection and the code came directly into Slack. From there I made sure the forwarder was disabled for the time being.

Next, I set up my filter rules in Gmail using this guide. By now I had received the ‘Low Funds’ notification from Logicboxes based on my new threshold settings so I was able to click filter messages like this next to the email:

I added in my simple filter settings (the Logicboxes email is actually coming from support@reclaimhosting.com) and clicked Create Filter:

On the following window, I gave it a quick Label, selected my forwarding address from the dropdown field, and then clicked Create Filter:

^I created a filter like this for each “school@reclaimhosting.com” email address.

The next ‘Low Funds’ notification came directly in the #sales Slack channel as planned. Woo!

Custom Page Templates in WordPress

In an effort to start unpacking all things WordPress, I decided to start first with understanding how a few basic WP dashboard tools are working on the backend. Today I’m looking at Page Templates.

Now it’s one thing to troubleshoot the WordPress file system in little spurts as tickets present themselves, and another thing entirely to build out your own page template. So while this may seem like basic knowledge to some, is was quite empowering for me!

For this post and likely others, I’m playing with a WordPress install at https://labrumfield.com/custom/. The theme I’m using is called Aileron. (This is a completely random choice, but I did like that it was pretty simple in terms of overall design– I was looking for a blank slate to work with.)

You can use FTP or File Manager for this one. I’ll work in File Manager since this is pretty simple! I started first by navigating to the wp-content folder of my WordPress install, and then going further into my theme folder at themes>aileron.

The first thing I did was create a new file in the theme folder called laurenstemplate.php. I know very little about php, but I do know that every file needs a title. I added the following to my new file:

<?php /* Template Name: Lauren's Template */ ?>

After clicking save, I went back to my WordPress dashboard, created a new Page, and selected Lauren’s Template from the dropdown that now magically existed under Page attributes:

Now the live version of my new page looked like this:

…which makes sense, right? Because my laurenstemplate.php file is completely empty.

I didn’t want to recreate the wheel when adding content, and I know that WordPress is already looking to a template for pages called page.php, so I started by cloning that to my new file.

As shown in the gif above, you’ll want to copy the full page.php content, aside from the top title/description into your new template.php file. Make sure to remove you ?> from your top php opener if you need to, and then click save! Now when I reload my WordPress page using Lauren’s Template, this is what I see:

Woo! Now we’ve have something to work with. (Feel free to stop reading here if you don’t care about design changes for this specific theme.) But let’s say I want to remove the sidebar and center the page content. There’s a section in my code that’s calling the sidebar right here:

By simply removing the highlighted line the sidebar goes away, but the content is still pushed to the left. I’ve added some text (and an awesome gif that inspired our Roadshow) to the page to see the changes a little more clearly:

Upon inspecting the page further (I used right-click>Inspect Element in Google Chrome) I noticed that the content area of my site was pulling in columns, which also explained why simple CSS to make the site width set to 100% wasn’t changing anything:

In the code that I copied over to laurenstemplate.php, this is what I saw next to my content-area class:

I removed the aileron_layout_class so my code looked like this:

After clicking save, those changes to the template are now applied:

Creating Different Versions of cPanel for different User Groups in WHM

cPanel Packages work great in Domain of One’s Own or Managed Hosting environments where an administrator wants to offer different versions of cPanel to the end user. (i.e. Student vs. Faculty accounts; Beginner vs. Advanced accounts; 1GB vs. 5GB accounts… you get the picture.) Watch the video tutorial below to get a sense of what’s possible, and how you would go about creating your own cPanel packages in WHM.

Introduction: 0:20
Overview: 2:23
Package Settings: 5:15
Feature List: 7:28
Installatron Apps: 9:22
Changing Packages: 14:42

A written guide on cPanel Packages can also be found here.

How to redirect a top-level domain without impacting subfolders

So I got a ticket this morning (thank you Skidmore Domains!) regarding domain redirection and ending up teaching myself the fix thanks to my bff Google! Now I’m not sure if this solution is “best practice” since it involves tweaking the .htaccess file, but it worked and I’m proud of it nonetheless. :)

Support Scenario:

Can I redirect a top-level domain without impacting subdirectories of that domain?

For instance, let’s say I have a subdomain called bigpicture.labrumfield.com that I want to redirect to my main domain at labrumfield.com. Easy enough– all I would need to do is add the redirect in my cPanel account following this guide.

But let’s say that in addition to the above redirect, I also have an Omeka instance at bigpicture.labrumfield.com/omeka that I need to keep in tact. If I were to proceed with setting up a redirect in cPanel, all subdirectories, including my Omeka instance, would redirect to labrumfield.com as well.

To set up a redirect for the top-level domain only (or in this case my top level subdomain) we need to add a few conditions to the .htaccess file for the site that needs to be redirected, bigpicture.labrumfield.com.

If you’re not all too familiar with .htaccess files, you’ll need to know that this is a hidden file in your File Manager. To make sure hidden files are visible, click on Settings in the top right of your window and check Show Hidden Files:

(Psst, if you’re interested in learning more about .htaccess files in general,
I have an entire blog post dedicated to that here: Understanding .htaccess)

Next, navigate to the site directory that you’re redirecting, select .htaccess, and click edit:

In the next .htaccess window, add the following lines:

RewriteEngine On 
RewriteCond %{HTTP_HOST} ^(www.)?bigpicture.labrumfield.com
RewriteRule (.*) https://labrumfield.com [R=301,L]

Here’s a screenshot of my .htaccess file:

And if you’ve got conflicting redirect rules like:

RewriteOptions inherit

that are currently listed, those need to be commented out or removed as well.

Press save changes. The proper redirects should start happening pretty immediately! (Also worth noting that you may need to clear your browser cache to see the changes.)

Quick Actions: Converting .HEIC to .jpg

I just moved to Jacksonville, FL and this will be the new office! Excited to transform this space over time, but for now I’m just really content with enjoying the morning light.

This post is completely out of the norm of what I usually write about, but wanted to document a workflow that I use fairly regularly when uploading photos to my computer.

With the rollout of iOS 11, I’ve noticed that if I airdrop photos from my iPhone to my Mac, the photos will drop in on my desktop as .HEIC files. It’s not all the time, so I’m not sure if its a random setting on my phone that I could change, and I’ve honestly been too lazy to dig into it. But at the point that it hits my desktop as an .HEIC file, I know I won’t be able to upload it to my blog, for example, since this is the error that’s returned:

If you Google how to covert files from .HEIC to .jpg or .png, there are all these online, free ‘conversion tools’ which makes me irrationally annoyed. I want to convert these myself, dammit! So I figured out how to set up a Quick Action on my Mac that will do the converting without having to pop my photos into any sort of online conversion thing.

1.Search for the Automator on your computer. Open it up and click New Document.

2. Select Quick Action, then select Choose.

3. Search Copy in the top left search bar, then select and drag Copy Finder Items to the empty space on the right:

4. You’ll now have the option to choose where you want converted images to be saved. I’m usually working right on my desktop and like to file them later, so for now I’ll leave mine as the Desktop folder. I’m also going to check the box called Replacing Existing Files because I don’t want to create a copy of the .HEIC file, I just want to replace it with the .jpg file.

5. Next, we’re going to search for another action on the left-hand search bar. Search Change Type, then select and drag Change Type of Images over to the right blank space (beneath Copy Finder Items):

6. In the Change Type of Images box that appears, click the dropdown menu and select JPEG.

7. Finally, we want to name our Quick Action and save it as a workflow. From the Automator window, click FileSave, and name your action to something like Convert to JPG. Then click Save.

Boom! Now let’s test it out. Right click on your .HEIC image, hover your mouse over Quick Actions, and then select your newly created Action:

Voilà!

Activating Installatron Apps on a per User/Group Basis

I’ve seen a little confusion surrounding the ability to enable/disable applications on a per user/group basis within a Domain of One’s Own environment, so I thought I’d follow up with a little tutorial:

We should already know that it’s possible to set different user groups for cPanel accounts via Hosting Packages, and then customize the cPanel features that are accessible to each user group (i.e. Hosting Package) via Feature Manager. But is it also possible to customize which installatron applications are available to each user group?

In short, this is 100% possible. Follow the steps below to read more about this:

Pretend Scenario

Domain of One’s Own administrators have determined two user groups within their hosting environment: Beginner and Advanced users. All users will receive the ‘Beginner’ or ‘default’ cPanel package upon sign up, and then administrators can switch to the Advanced hosting package for one-off users as needed. Now, our administrators want to make sure that our Advanced cPanel accounts have access to more installatron apps while the Beginner cPanel Accounts only have access to, say, WordPress, Omeka, and Scalar.

How To Create Groups of Users in Installatron

Installatron > Groups > Create a New Group:

If you’ve got existing hosting packages already set up, I recommend naming these Installatron groups with corresponding titles. From there, you can assign individual cPanel usernames or entire cPanel packages to that Installatron group:

Click Save.

Now navigate to Installatron > Access Control and select the newly created group in the top right hand corner:

Proceed to enable/disable applications like normal. (Steps on this can be found here.) Click save.

Now, any cPanel username or cPanel package that was added to the Installatron group list will see those changes immediately:

Simple as that!

Email Notification Template for Zendesk Support Tickets

Last week I had a bit of free time and started looking for a way to add the Reclaim Hosting brand to the support ticket notifications that are sent out to users when they put in a request. If you have no idea what I’m talking about, here’s what the support notification used to look like when a user put in a ticket to support@reclaimhosting.com:

Before:

In short, my goals were to:

  • Make sure the Reclaim Hosting logo was visible
  • Remove the ‘Powered by Zendesk’ branding at the bottom
  • Add in extra Reclaim Hosting documentation resources
  • Keep the integrity of the ticket content

After doing a bit of reading in the Zendesk Community forums I went down a rabbit hole and found a .html file that was basically a skeleton of the template design I was looking for. I added in the Reclaim logo, business hours and documentation helpful links, then changed the spacing, font size and link color. The final template now looks something like this:

Once including the ticket content from the ‘Before’ screenshot, here’s the final product:

After:

The template also embeds responses back to the user so Reclaim branding & helpful links stick around as the conversation continues:

Overall, this was a fun & quick little project that adds to the full Reclaim Hosting customer experience and I’m proud of how it turned out!

If you’re interested in taking a look at the code I used, click this downloadable link to get access to the file.

Removing Email Section from cPanel

It is a common request for institutions to want to remove the Email section from cPanel for end users of Domain of One’s Own or even Managed Hosting setups. To remove Email globally across all accounts, you’ll need to log into WHM and navigate to Feature Manager:

Click on the main cPanel package that end users receive. In the above case, the package is called default. If there are multiple packages listed and you’re unsure of which one is the main cPanel package that is given to users automatically when they sign up, navigate to List Accountsand look for the Packagecolumn. Hopefully that should clue you in!

Ok, back to Feature Manager. Select the cPanel package from the Feature list where changes need to be made and then click Edit. In the next window, search Emailand uncheck every item that comes up:

The list of items is shared in the screenshot above, I’ll also list them out below:

  • Email Accounts
  • Email Deliverability (Authentication)
  • Email Disk Usage
  • Email Filtering Manager
  • JetBackup :: Email Backups
  • Email Archiving
  • Email Delivery Route (deprecated)
  • Email Domain Forwarding
  • Email Trace

Cool, we’re halfway there! There’s actually a few more items we’ll need to uncheck that don’t have ‘Email’ in the name. I still find the search bar to be helpful for this. Search for and uncheck these additional items:

  • Forwarder Manager
  • Autoresponders
  • Webmail
  • Mailing Lists
  • Address Importer
  • Default Address
  • PGP/GPG
  • Calendars and Contacts
  • BoxTrapper
  • Apache SpamAssassin™
  • MX Entry

Once you’ve unchecked all of the above, scroll down and click Save:

Now when you navigate to a cPanel account on the server (using the package that you edited) you will no longer see the Email Section:

Google Forms to Slack with Webhooks

BACKSTORY
Occasionally Reclaim Hosting customers will ask for a new hosting account that, for one reason or another, needs to be created manually by a member of RH support. In order to create an account, our system requires a bit of contact information about the user: Name, Email address, Physical Address, and Phone Number. Now we could ask the user to submit this information to us via a support ticket, but in our eyes, it was a little cleaner/more secure to have them fill out a simple Google Form. This has worked well for us, except support members weren’t given any notice when the form was completed. Email notifications are an option, sure, but for a team that has one eye on Slack and one eye on support at any given time, a ping to an inbox somewhere can get lost quickly. So I decided the other day, after watching Tim play around with Slack Webhooks, that I would create one for this simple Google Form. Now when our new customers fill out the form per our request, a notification is sent to our #support channel with the appropriate information. For example:

GETTING STARTED – SLACK PREP

The guides I referenced for this are here & here.

Create a Slack App by going here.

^Give your “App” a name and choose the slack account that you want to add it to. Click Create App.

^Select Incoming Webhooks and then make the toggle in the top right-hand corner is turned ON so Incoming Webhooks is activated. Once activating, the page will refresh- click the button called Add New Webhook to Workspace:

Now choose the channel where you want the content to pull into:

^Click Authorize. You’ll be redirected back to your App Settings, where you should see a new Webhook URL that looks something like the following:

^Keep this page nearby as we will need that Webhook URL soon.

Google Forms

Start by opening the spreadsheet associated with your Google Form. In the menu, click on Tools > Script Editor:

A new window will open. Paste the code found here into the Script Editor.

Next, paste that Webhook URL that you copied from earlier next to:

var slackIncomingWebhookUrl = 'yourWebhookURL.com';

You’ll also want to add the Slack channel that you’re using right beneath it:

var postChannel = "#YourPublicChannel";

^Keep in mind that if the Channel is public, at the # pound sign before it. If the channel is private, leave the # out. Finally, click save.

Initialize and Test

In the Google Form Script Editor, click Initialize in the menu dropdown, and then click the Run:

You’ll be prompted about permission requests. Click Agree.

Lastly, do a test submission on your Google Form. If everything works as planned, you should receive the notification and associated data in your designated Slack channel.