• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.

How To Add Copyright Text With U.s. State Icons To The Footer

For fun one night I decided to add a few personal touches to the footer on Kolakube so I came up with the following:

View attachment 917

In this quick tip, I'm going to show you how to implement your own set of state icons to the footer as well. For this, you'll learn how to:

  1. Create a 2 column footer with content on the left and state icons to the right
  2. Add font icons to your site with CSS
  3. Use MD helper classes to add special formatting to your footer text


Step 1: Download + Upload the StateFace font icon set

The great thing about using a font icon is we can style each state icon with CSS to make it look any way you want. That means any font size, color, or other CSS properties. The font icon set we'll be using is StateFace, and you'll need to download and unzip the file you get from their site.

After you've unzipped the download, upload the webfont directory to your MD Child Theme. For organization purposes I recommend you do the following for this:

  1. Rename webfont to stateface
  2. Create a folder in your child theme called fonts
  3. Upload stateface to your new fonts folder
Your fonts folder should be structured like this (ignore the other files):

View attachment 918

Step 2: Load font styles in style.css

Now that the font files have been uploaded, we have to add them to your site. Keep in mind these font files load all 50 states at a 22kb file weight. I was skeptical to use the entire font icon set since these files can often be large and add to my sites load time, but was surprised at how light this font actually was.

With that out of the way, here's all you need to load the font files in your child theme's style.css file:

@font-face {
font-family: 'StateFaceRegular';
src: url('fonts/states/stateface-regular-webfont.eot');
src: url('fonts/states/stateface-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/states/stateface-regular-webfont.woff') format('woff'),
url('fonts/states/stateface-regular-webfont.ttf') format('truetype'),
url('fonts/states/stateface-regular-webfont.svg#StateFaceRegular') format('svg');
font-style: normal;
font-weight: normal;
}

[class*="sf-"] {
font-family: 'StateFaceRegular';
display: inline-block;
font-size: 30px;
line-height: 1;
margin-left: 13px;
}
If you followed the upload instructions in step 1, you don't have to change anything. If you uploaded your fonts to a different directory (even the root folder), be sure to change the path of each font in this code.

Apart from the @font-face loader, we also set an important CSS selector that applies the state icon to any HTML element you apply an sf-* class to.

With these 2 things in place, we now need to apply the icon code of the state we want to display on our site to a CSS selector.

I'll use my home state of New Jersey to show you how to add a states icon to a CSS class:

.sf-nj:before {
content: "e";
}

For each state you want to add, copy the above code with your state's abbreviation and the correct icon code from this page (or see image below). Scroll down until you find the "StateFace Keyboard Map" title and search the table for your states code.

For example, New Jersey is "e" (case-sensitive):

View attachment 919

On Kolakube I show a few states so I have the following codes in my stylesheet:

.sf-nj:before {
content: "e";
}

.sf-tx:before {
content: "q";
}

.sf-fl:before {
content: "I";
}

.sf-va:before {
content: "s";
}

Step 3: Add text and text icons to your site's footer

Now that the font files are loaded, head over to your WordPress admin panel and navigate to Appearance > Widgets and open the Footer Copy widget. If there's not already, drag a Text Widget to the widget area.

Paste the following code in the text box:

<div class="text-left mb-half">

<p class="alignright mt-half text-left">
<small class="states-message text-sec caps">Built in</small>
<span class="sf-nj" title="Burlington, New Jersey"></span>
<span class="sf-tx" title="Austin, Texas"></span>
<span class="sf-fl" title="Jacksonville, Florida"></span>
<span class="sf-va" title="Virginia Beach, Virginia"></span>
</p>

<p>Kolakube is built on <a href="https://kolakube.com/marketers-delight/" target="_blank">Marketers Delight</a> + <a href="http://wordpress.org/" target="_blank">WordPress</a>.

</div>

There's a couple things going on here, but this adds a perfectly responsive copyright message with text on the left and icons to the right to your footer area.

Notice each state has its own line of HTML that calls a state class with a title attribute. You only need to apply one of the .sf-* classes you added to your style.css file to turn any HTML element into a state icon. I added the title attribute so when someone hovers their mouse over, a small label shows up with the state name.

Here's a couple of extra CSS selectors I added to customize this footer and are optional:

.states-message { /* vertically position the "Built in" message if needed */
position: relative;
top: -8px;
}

.footer-copy p:not:)last-child) { /* remove bottom spacing between p */
margin-bottom: 0;
}

Have fun, this can add a cool personal touch to your footer. I customized mine further to highlight the current state I'm in. Inspect the Kolakube site to see the CSS for that!

 
Last edited by a moderator:

Some French Dude

SomeFrenchDude
Md
Messages
1,044
Reaction score
120
Use MD helper classes to add special formatting to your footer text
The link is broken. 

I wanted to know how to add legal and copyright notice on my MD site.

I also first tested the Footnotes option on Pages/Posts, then I tried already look at Footer in the Customizer. Not sure where to set this or if MD comes with a footer for copyright/legan notices that is integrated and available by default.

 
Comment
Top