Installing a WordPress Plugin

If you’re new to WordPress, the concepts of plugins, themes, widgets, etc might be a little overwhelming. There are definitely a lot of options and components that go into creating a WordPress site, and one of the best features of a WordPress site is the sheer number and versatility of the plugins available for use. Seriously, there’s a plugin for almost anything you can thing of — from really useful things like ecommerce integration, to less useful things like adding falling snowflakes to the pages of your WordPress site. If there’s a feature of functionality you want to add to your WP site, chances are there’s a plugin for that.

If you’re wondering how to install one of these plugins, there are a few different ways you can go about it. Keep on reading to learn more.

Search for a Plugin

The left-hand menu of your WordPress dashboard has a menu item called “Plugins.” If you hover over that link, you’ll see a few options. Click “Add New,” which will bring you to WordPress’s Plugin repository. You can browse through the Featured, Popular, and New plugin sections, or you can search specifically for a plugin or type of plugin by using the search bar in the top right corner of the page.

Screen Shot 2016-11-27 at 4.44.01 PM

Once you’ve found the plugin you’re searching for, click the Install Now button in the top right hand corner of the plugin’s listing. The plugin will then be installed, and you’ll have the option of whether or not you’d like to activate it (most likely, you will want to), and then you’re free to start using it/configuring the settings.

(Note: depending on your hosting plan and how your permissions are configured, you may not be able to install plugins this way. If that’s the case, see the methods below).

Upload a Plugin

On the Add Plugins page, there’s also the option to upload a plugin (at the top of the page next to the Add Plugins title).

Screen Shot 2016-11-27 at 4.54.30 PM

To upload a plugin, first you’ll have to have it downloaded onto your local machine. To download a plugin, you can use the official WordPress plugin repository page (or get a free or premium plugin downloaded or purchased from a third party site) and use it by searching the same way you searched through the repository on the Add Plugins page. The only difference between this page and the page on your dashboard is that the plugins in this repository download directly to your machine.

Once you’ve got your plugin on your computer, you can upload it using the “Upload Plugin” option. Make sure the plugin you want to upload is in a zip format, choose the file, and click “Install Now.” The plugin installation should then happen seamlessly, and you’ll again get the opportunity to activate the plugin.

Upload a Plugin via FTP

This is the option for manual plugin installation via an FTP client (if you don’t already have one, Filezilla is great). To install a plugin this way, you’ll need to make sure you have your desired plugin downloaded onto your local machine, just like in the process above — this is where the WordPress Plugin Repository will be useful to you again.

After you’ve got your plugin downloaded onto your computer, access your server by connecting via your FTP client, and navigate to the Plugins folder (wp-content/plugins). Use the transfer windows or just drag and drop the entire unzipped plugin folder into your plugin directory and wait as the files transfer. Once the transfer is complete, check the main plugin page on your WordPress dashboard to ensure that the plugin was uploaded, and activate it if you like.

 

How to Style a List with Font Awesome Icons

So we already know how to create really cool pure CSS social media icons using Font Awesome, but what else can we do with this awesome icon library? One really cool way to utilize the icons is by using them in place of bullets when styling unordered lists.

Font Awesome is a library of hundreds of different icons and symbols that can be used for free by developers in any project. It’s a really useful tool to have, especially because using Font Awesome icons are almost always superior to using pngs or jpegs as icons because of how well the Font Awesome characters (color, size, etc) can be manipulated by CSS.

Using the Font Awesome icons in place of bullets or discs that are usually used to style unordered lists is a really cool way to add some unique flair to an otherwise boring list, and it’s also a pretty innovative way to use the Font Awesome library. Keep reading to see how it’s done.

Getting Font Awesome

Like most libraries, Font Awesome can be downloaded and placed onto your server, but the best and most lightweight way to use it is probably to link to the library directly, either in your head section or at the top of your stylesheets using the @import rule. Here’s the link you can insert into the head:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML

We’re gonna start by creating a standard unordered list. If you’re not sure how to build one, check out the HTML below:

<ul>
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
  <li>Fourth list item</li>
  <li>Fifth list item</li>
</ul>

The results of which should look a little bit like this:

Screen Shot 2016-11-27 at 3.36.33 PM

The CSS

The CSS is where you’ll get rid of the standard bullet points and replace them with a cool Font Awesome icon of your choice using the content property combined with the :before pseudo-selector. First, pick the Font Awesome icon you’d like to use as the list item icon. You can see all of the hundreds of Font Awesome icons to choose from on this page.

First, set the list-style-type to none:

li{
  list-style-type: none;
}

So now the list should have no bullets:

Screen Shot 2016-11-27 at 3.49.39 PM

Now we’ll need to use the :before pseudo-selector to select the space before the list items, and the content property to insert the Font Awesome icons as the content before the list items.

In this case, let’s pretend we’re creating a list with a nautical theme, so our Font Awesome icon of choice might be the anchor icon, the unicode code of which is f13d. To use the anchor icon as the list item icon, use the following CSS:

li:before{
content: “\f13d”;
font-family: “FontAwesome”;
width: 10px;
height: 10px;
margin-right: 5px;
}

The results of which should look like this:

Screen Shot 2016-11-27 at 3.56.52 PM

Don’t forget you can also add some color to these icons. Check it out:

li:before{
color: #147efb;
}

Screen Shot 2016-11-27 at 3.58.20 PM

How’s that for a nautical themed list? There are so many Font Awesome icons available that the possibilities for styling your lists are practically endless. Definitely keep this technique in the back of your mind for when you’re looking to create some unique lists.

Using Font Awesome to Create Social Icons

Font Awesome is a really useful tool that provides developers with free access to hundreds of different icons and symbols to use in the projects in place of images and pngs. The great thing about using Font Awesome icons is that because they’re technically characters instead of images, the colors and sizes of the characters can easily be customized using CSS style rules. You can even really easily add hover effects and styling for active and visited states by using the CSS pseudo elements (:hover, :active, :visited).

One really great way to take advantage of these Font Awesome icons is by using them to create social media icons — you know, those buttons you’ll find on almost every site that links to a site’s social media presences. Usually these are created in photoshop and uploaded to a server, but if you’re planning on creating simple or basic social media buttons, Font Awesome is a great, lightweight option to create them easily without having to use images. Keep reading to check out how it’s done.

Get Font Awesome Library

You can download the Font Awesome library and place it onto your server to link to, but if you want an even more lightweight option, you can simply link to their library in the <head> section of your HTML files or at the top of your StyleSheet using the @import rule. See the code you can use to link to the Font Awesome library below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML

For this example, let’s create icons for Twitter, Facebook, and Instagram. To see a list of ALL the Font Awesome icons and their accompanying code, head over to this page. Here’s the HTML you’ll need to get started:

<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>

The results of the HTML above should look something like this:

Screen Shot 2016-11-27 at 2.46.29 PM

The CSS

To really make these icons unique we need to add some styling. Let’s turn them into rounded icons, and let’s add some colors to reflect the brands of each social media network. Take a look at the CSS below to see how it’s done.

 i.fa.fa-facebook, i.fa.fa-twitter, i.fa.fa-instagram{
 border-radius: 100%;
 font-size: 28px;
 height: 38px;
 line-height: 40px;
 margin: 5px;
 text-align: center;
 width: 38px;
 }
 i.fa.fa-facebook{
 border: 1px solid #3B5998;
 color: #3B5998;
 }
 i.fa.fa-twitter{
 border: 1px solid #00aced;
 color: #00aced;
 }
 i.fa.fa-instagram{
 border: 1px solid #833ab4;
 color: #833ab4;
 }

After applying the CSS above, your social media icons should look similar to this:

Screen Shot 2016-11-27 at 2.58.52 PM

Styled beautifully and reflecting the brand identity of each platform!

Extras: Hover Effects

Now that you’ve got your icons styled, adding hover, active, visited, etc effects using pseudo-selectors is really easy. A cool hover effect to add is to change the opacity of the icons when they’re hovered over. To do that, you just need to add the following CSS:

i.fa.fa-facebook:hover, i.fa.fa-twitter:hover, i.fa.fa-instagram:hover{
 opacity: .6;
}

Compare the icons in the image below with the one above, and you’ll see that the opacity of the Instagram icon is less opaque than the others or than the one in the image above — that’s because it has the hover effect applied to it.

Screen Shot 2016-11-27 at 3.01.34 PM

Creating a Window Text Effect with CSS

One of the best things about CSS is that it gives developers the tools to create things that normally would have to be created with photo editing or illustrator software. One of the coolest effects you can achieve using only CSS is the versatile and super simple window text effect. This is an effect you can add to your projects as a header, a logo, a hover state…the possibilities are endless. And the best part is, it’s relatively easy to achieve from scratch.

To start, you’re going to need to pick a cool image or color that you want to use as the background for your page/container. Then we’ll begin with the HTML.

The HTML

The only HTML for this effect that’s absolutely essential is a div tag and a text tag (the bigger the better, so we used an h1 tag) somewhere within that div:

<div class="container">
<h1 class="window">COOL TEXT</h1>
</div>

The CSS

This effect is achieved entirely using CSS code. First, we’re going to import a font (we’re using Droid Sans, but feel free to experiment with your own font-family), assign that font-family to the HTML, and set up the cool image that we chose as the background of our container div:

body{
font-family: ‘Droid Sans’, sans-serif;
}

.container{
background: url(../sky.jpg);
background-size: cover;
}

That’s the easy part. Now it’s time to style the h1 tag. To style our h1, we’ll want to position it on the page using the left, top, and transform properties, change the positioning to position: absolute to ensure that all of the text remains positioned on the page once we apply the window effect, and set a large font-size and line-height property so that the effect is visible. It’s also very important that the background of the h2 tag is a dark color (we used #222) and that the color of the text is white (#fff).

h1.window{
 position: absolute;
 top: 30%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 100px;
 line-height: 80px;
 text-align: center;
 padding: 30px;
 color: #fff;
 cursor: pointer;
 background: #222;
}

The result of the above CSS will leave you with a result looking like this:

Screen Shot 2016-11-14 at 4.19.16 PM

As you can see, the “window” effect hasn’t been applied to the text yet, because the text is white and opaque. To make the text transparent, you’ll only need one more line of CSS: the mix-blend-mode property. The mix-blend-mode property defines how an element’s content should blend with the background. When you apply it to light text on a dark background, the text will become see-through. Here is the final line you’ll need to add to the h1’s style:

h1.window{
  mix-blend-mode: multiply;
}

Your final result should now look like this:

Screen Shot 2016-11-14 at 4.18.44 PM

Customize the code in this tutorial by adding your own text, images, colors, etc. Get creative and be sure to include this effect in one of your next projects!

Create a Featured Ribbon Effect Using CSS

We’ve all seen those box, rectangle, or square shaped HTML elements that feature a “ribbon” draped around one of its corners to signify that this element is somehow different from the rest. The text in the corner ribbon might read “Featured” or “Limited Time Only” or “On sale!” Whatever the ribbons may say, they usually do a pretty good job of grabbing the users’ attention and letting them know what’s unique about any particular HTML element that the ribbon is applied to.

This Featured Ribbon effect is actually one that can be easily implemented using minimal CSS. The effect is created by the use and manipulation of the span elements and the :before and :after pseudo selectors. To see how it’s done, check out the example below.

The HTML

The HTML in this tutorial couldn’t be more straightforward. We’ve got an image inside of a rectangular div…and that’s pretty much it. The other div, the one with the class .corner-ribbon, makes up the featured ribbon that will appear on the corner of the element.

<div class="container">
 <div class="corner-ribbon">
 <span>Cool!</span>
 </div>
 <h4>Cool Feature</h4>
 <img src="http://lorempixel.com/175/175/" alt="placeholder image" />
</div>

The CSS

The CSS for this effect is a lot more involved than the HTML, but it’s still actually quite simple. By using the :before and :after pseudo-selectors in conjunction with transparent borders, the shape of the featured ribbon is easily created. Absolute positioning and playing with the z-index (you may need to increase the value of the z-index property depending on your project), the ribbon is featured prominently in the top right corner of the element.

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);

body{
 font-family: 'Quicksand';
 background-color: #e6e6e6;
}

.container {
 width: 220px;
 height: 300px;
 position: relative;
 border:1px solid #444;
 background: #fff;
 margin: 25px auto;
}

.corner-ribbon {
 position: absolute;
 right: -5px; top: -5px;
 z-index: 1;
 overflow: hidden;
 width: 75px; 
 height: 75px; 
 text-align: right;
}

.corner-ribbon span {
 font-size: 12px;
 color: #fff; 
 text-transform: uppercase; 
 text-align: center;
 font-weight: bold; 
 line-height: 20px;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 width: 100px; 
 display: block;
 background: #E37676;
 background: linear-gradient(#E37676, #DB5858);
 box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
 position: absolute;
 top: 19px; right: -21px;
}

.corner-ribbon span::before {
 content: '';
 position: absolute; 
 left: 0px; top: 100%;
 z-index: -1;
 border-left: 3px solid #E37676;
 border-right: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #E37676;
}
.corner-ribbon span::after {
 content: '';
 position: absolute; 
 right: 0%; top: 100%;
 z-index: -1;
 border-right: 3px solid #E37676;
 border-left: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #E37676;
}

.container h4{
 padding: 3px;
 text-align: center;
}

.container img{
 display: block;
 width: 175px;
 margin: 0 auto;
}

After adding all of the above CSS to your stylesheets,  you should end up with a final product that looks something like this:

As always, the colors, content, positioning, etc are meant to be totally customized to reflect your project. Play around with the code and have fun with it!

The Ten Best Star Wars CSS Snippets

In honor of Rogue One‘s recent release, we’ve compiled a list of our favorite (and the very best) Star Wars related CSS code snippets around. These snippets are yours to use, customize, or add to any of your space-themed projects.

1. Pure CSS Star Wars Lightsaber Checkboxes

Screen Shot 2016-12-28 at 8.39.18 AM

This pure CSS snippet creates the lightsabers of everyone’s favorite Star Wars characters — Luke, Vader, Yoda, and Obi Wan. They’re created by adding a lot of different styling techniques to checkbox input fields, so that the lightsabers’ beam toggles when you click on the any of the handles.

2. Star Wars Opening Crawl from 1977

Screen Shot 2016-12-28 at 8.44.27 AM

This tutorial demonstrates how to make a completely accurate version of the opening scene text crawl from the original Star Wars films. Complete with audio!

3. Pure CSS Storm Trooper

Screen Shot 2016-12-28 at 8.45.52 AM

Create a realistic storm trooper helmet using only CSS with this CodePen tutorial.

4. AT-AT Walker

Screen Shot 2016-12-28 at 8.47.21 AM

This snippet creates a detailed, animated AT-AT that walks and shoots lasers.

5. BB-8

Screen Shot 2016-12-28 at 8.49.42 AM

This snippet creates a CSS version of everyone’s favorite new droid, BB-8. BB-8 responds to mouse movements and will actually move left to right depending on which way you point your mouse.

6. Pure CSS Princess Leia

Screen Shot 2016-12-28 at 8.51.28 AM

Create a CSS rendering of Princess Leia and her iconic space buns using this code snippet.

7. Star Wars Menu Icon

Screen Shot 2016-12-28 at 8.52.45 AM

This snippet is a really interesting take on the traditional “hamburger” menu icon — instead of three boring lines, the lines of the menu icon are actually lightsabers that light up when they’re hovered upon and animate when clicked.

8. Pure CSS R2-D2

Screen Shot 2016-12-28 at 8.56.33 AM

Create an incredibly accurate pure CSS R2-D2 using this code snippet.

9. 3D Death Star

Screen Shot 2016-12-28 at 8.57.35 AM

Use this code snippet to create a 3D Death Star that spins in space.

10. HTML5 Canvas X-Wing Animation

Screen Shot 2016-12-28 at 8.59.37 AM

The x-wing plane in this code snippet is speeding past mountains and canyons just like it might in the Star Wars films.

How to Create a Fixed Header

Fixed headers are an increasingly popular trend for styling headers or navigation menus on your site. When you add a fixed header to a page, that means that the position of the header stays fixed (usually to the top of the page, but it doesn’t necessarily have to be positioned as such) no matter how far the user scrolls down the page. This feature is helpful for anyone who wants to make sure their users always have access to particular links or navigation no matter which part of the page they may be exploring.

If you think that adding a fixed header to any of your projects might be a good idea or, at the very least, a fun experiment, you’re in luck, because it’s actually pretty easy to do. Keep reading and we’ll walk you through the basic steps.

The HTML

For a very, very basic fixed header structure, we used something like this:

<body>

<div class="header">
 <h1 class="header_logo">This is a Fixed Header</h1>
</div>
<div class="offset">
 <p>Scroll down to see the responsive header in action.</p>
</div>

</body>

It’s totally up to you what you want to include in your header. It could be navigation, links, a phone number or other contact info…the choice is completely yours. For the purposes of this demonstration, we just chose to include some text indicating that what you’re looking at is, in fact, a fixed header, and some content below that so we have something to scroll past.

The CSS

We wanted our fixed header to be purple, but the color choice and style of your header is totally up to you. The only line of CSS you absolutely can’t do without if you want the header to be fixed is position: fixed, which in our code is applied to the .header selector. The size, color, positioning, padding, font-family, and pretty much everything else can be tailored to the needs of your project or site.

Check out the CSS below:

body {
 height: 1500px;
 font-family: "Montserrat";
}

.offset {
 margin-top: 0;
 padding-top: 270px;
 text-align: center;
 -webkit-transition: .3s;
 transition: .3s;
}

.header {
 position: fixed;
 width: 100%;
 height: 100px;
 font-weight: bold;
 text-align: center;
 background: #7F6FF0;
 -webkit-transition: .3s;
 transition: .3s;
 color: #fff;
}

.header_logo {
 font-family: 'Oswald', sans-serif;
 margin: 0;
 padding-top: 8px;
 font-size: 30px;
 text-shadow: 3px 4px rgba(0, 0, 0, 0.1);
 -webkit-transition: .3s;
 transition: .3s;
}

If you use the code above, this is how your fixed header should look:

Screen Shot 2016-12-20 at 8.53.55 AM

While you can’t really appreciate the whole fixed header effect from just a screenshot, trust us when we say that when you scroll down this page , you will scroll past the text and end up with the header still stuck to the to of the page. Add the code to any of your projects to see it in action for yourself!