Category: Random

Sublime Text is a popular text editor that’s a favorite of many web developers when it comes to what tool they prefer to use to write their code. One of the many cool features of Sublime Text is that it allows you to totally customize its appearance by adding your own theme to it. This way, you’re really personalizing your coding experience. Another great thing about installing a theme to your text editor is that it can come with features and customizations that you wouldn’t normally get with an out of the box install of Sublime Text. Themes can optimize file trees, fonts, colors, positioning of features, and functionalities. What follows is a list of 10 of the coolest free themes to use to customize your Sublime Text editor.

1. Night

Night is a cool theme with a more subdued color scheme. Typically, Sublime Text default formatting colors are pretty bright, but Night’s are more dull.

2. Material Theme

Material Theme comes with lots of options for customization. It’s easy to install and activate, and it comes with almost a dozen of color scheme options to apply to your editor.

3. Tech49

Tech49 is a funky theme that adds a lighter color scheme to your Sublime Text text editor. Comes loaded with lots of ways to customize the way you right your code.

4. Agila

Agila is a colorful, popular text editor with a lot of cool features, one of which is the abundance of spacing between the folders in the file tree for optimum legibility and ease of use.

5. Sunrise

The sunrise theme has a blue color scheme that adds a unique palette to your text editor. It’s based on the Seti_UI theme and is easy to both install and activate.

6. Nil

Nil gives you the option to add a little lightness to your Sublime Text editor. If you choose to apply the light theme to your editor, the background will go from standard black to a lighter cream color. Additionally, the font is different from the standard Sublime Text font, so this theme can be used to really switch things up.

7. Freesia

Freesia is a beautiful pink and purple theme that was no doubt inspired by the colors of the beautiful and delicate flower for which it was named.

8. Soda

Soda is another theme that gives you the option to add a lighter aesthetic to your text editor. This one will turn the background of your editor from black to white, and change the default color of text from white to black.

9. Autumn

The Autumn theme offers a unique perspective on the file tree, adding stylized bullet points next to the file names instead of file icons, which is pretty unique among this list of themes.

10. itg.flat

itg.flat is a theme designed for retina displays and inspired by flat design aesthetics. It’s a cool, sleek, and modern looking theme to apply to your text editor, and comes with two different color schemes, dark and light.

Ordered lists aren’t exactly the most exciting HTML element you can add to any given project, but it can’t be denied that they have your uses. Because it can be so hard to select the default numbers that an ordered list creates, it’s hard to really add a lot of style to this type of element. So what do you do when you need to have an ordered list on your site, but you don’t want it to look boring or too formal? With the help of some bright colors and stylized fonts (and the <span> tag), we can easily spice up our boring old ordered list elements to make them look fun and modern. Check out the tutorial below to see how it’s done:

The HTML

So to start, you’ll need a standard ordered list. For this example, we’re using filler text from Bacon Ipsum, a fabulous filler text generator that will really add some meat to your mockups.

Here’s how your list might look:

<div class="styled-list">
  <ol>
    <li><span>1.</span><p>Bacon ipsum dolor amet pariatur veniam sirloin esse dolore. Ex sunt deserunt chicken shank corned beef ipsum fugiat pork chop spare ribs hamburger cow. Tri-tip picanha tail ut fatback dolor beef shank nulla beef ribs kevin magna. </p></li>
    <li><span>2.</span><p>Reprehenderit porchetta in magna voluptate beef ribs pork chop biltong. Tri-tip dolor shoulder irure picanha pastrami flank tempor magna. Enim ham hock ut, alcatra ipsum doner pig brisket aliqua porchetta tongue dolore fugiat. Sausage sint aliqua meatball pancetta nulla swine fatback.  </p></li>
    <li><span>3.</span><p>Nisi pork loin leberkas, bresaola beef ribs sint esse eu bacon pancetta fatback. Dolore nulla porchetta, t-bone et cupim nostrud occaecat chicken culpa ea. Et adipisicing ullamco, corned beef kevin pig jerky cillum ham hock ground round mollit.   </p></li>
  </ol>
</div>

So right now it looks pretty boring, like this:

We definitely need to add some CSS.

The CSS

Here’s the fun part. We’re going to get rid of the default ordered list numbering by using the list-style-type property with a value of none, then we’re going to add some major style to the numbers in the span tags, because we can select span tags much more easily than we can select the numbers in an ordered list. Take a look at the CSS below:

@import url(https://fonts.googleapis.com/css?family=Pacifico|Archivo+Narrow:400,700,400italic,700italic);

body{
    font-family: 'Archivo Narrow';
    background-color: #aaeedd;
}

div.styled-list{
    width: 400px;
    margin: 50px auto;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
}

div.styled-list ol{
    list-style-type: none;
}

div.styled-list ol li{
    position: relative;
    margin-bottom: 20px;
}

div.styled-list li p{
    padding-left: 50px;
    color: #444;
}

div.styled-list span{
    position: absolute;
    font-family: 'Pacifico';
    font-size: 30px;
    color: #222;
}

Now, your stylish ordered list should look a little something like this:

For the purposes of this example, we used the font-family “Pacifico” to add some much needed style to the numbers. We also played around with the placement of the numbers in relation to the list content for a more stylized look, and, of course, we changed the font from the style-less default serif look to a more sleek and modern sans-serif (Archivo Narrow).

As with any CSS snippet, this one is totally customizable. Play around with the colors, fonts, spacing, positioning, and overall styling so that it meets the needs of your particular projects. Add hover effects with transitions, add stylish links, add a cool background — the possibilities are endless.

We’ve already covered how to create animated buttons, but if you’re looking to take your button animations and animation functionality to the next level, you’ll want to take a look at this tutorial that demonstrates how to make stylish download buttons that utilize smooth CSS animations.

The HTML

The download button has two parts — the button itself, and the tab that will appear under the button whenever the user hovers over it. Your HTML will need to account for both of these components. Here’s how it should look:

<a href="" class="download">Download</a>
<a href="" class="download bottom">File Size: 8MB</a>

Of course, the secondary tab (with the class “download bottom”) can say whatever you like. Keep in mind, however, that it does prove to be more aesthetically pleasing to have the secondary tab smaller than the button itself, so you might want to keep the content of the second tab short and to the point.

The CSS

Styling the button and the secondary tab is fairly easy and doesn’t require an excessive amount of CSS. Take a look at the code below to see for yourself.

body{
    font-family: 'Alegreya Sans';
    background: #708292;
}

a.download{
    text-decoration: none;
    color: #fff;
    background: #50a6f6;
    padding: 8px 10px;
    border-radius: 3px;
    display: block;
    width: 120px;
    margin: 100px auto 0 auto;
    text-align: center;
    z-index: 100;
    transition: opacity .8s ease;
}

a.download.bottom{
    width: 100px;
    background: #b7d4ee;
    opacity: 0;
    margin-top: 0px;
}

a.download.bottom{
    border-radius: 0 0 3px 3px;
}

As you can see, we make the secondary tab (a.download.bottom) invisible by giving it an opacity of 0. We also apply a transition effect to the primary button so that when the hover effect takes place, it happens with a nice smooth transition. This is what our button should look like at this point:

We’re only one like of CSS away from finishing the simple, sleek button. What’s missing is the instructions that will allow the secondary button to appear below the primary button when it’s hovered upon — basically, what’s missing is a hover effect.

The CSS code for the hover effect should look like this:

a.download:hover + .bottom{
    opacity: 1;
}

This code selects the secondary tab, but it only applies when the primary button is hovered upon. By changing the opacity from 0 to 1, it allows the secondary tab to appear smoothly (thanks to the transition effects we added before) whenever the primary “Download” button is hovered upon.

Here is what your button should look like at any point that you hover over it:

As always, color, size, font-family, and shape can be totally customized to suit any project or theme. Play around with this snippet to really make the button your own.

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.

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).

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.

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:

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:

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:

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

li:before{
color: #147efb;
}

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.