Adding A Favicon To Your Website

Posted by Nile | Posted in Tutorials | Posted on 08-03-2012 | 32

The definition for a favicon at Wikipedia is:

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage.

Favicon Example

For the rest of us who are not as technical. It is that tiny picture next to the browser URL area that might change when visiting one site to the next.

1. To add one, it is simple. First you at least need to make a 16×16 pixel icon in your graphic editing program.

2. Convert it to the accepted .ico (for icon) file extension. There are a few favicon generators online. Here is one I often use: Favicon Generator Tool at Dynamic Drive

3. Once you have saved the file to your computer, you will need to upload it to your web hosting space.

4. In your layout’s template, before the ending head tag, put the following code:

<link rel="shortcut icon" href="http://YOURDOMAINHERE/favicon.ico" />

Make sure you replace “YOURDOMAINHERE” with your URL path where you have uploaded your favicon file.

Once you have done, bookmark your page. You might have to clear your computer’s cache, and also restart your browser to see the changes.

For those who use WordPress, normally this would go in your header.php file. In the case that you are deciding to use a plugin for this – DO NOT. Just use this tutorial. It is less coding and if you are still confused, ask and I can try to help walk you through it.

ReadMore

WordPress 101 Video: How to Fill Out Your User Profile in WordPress

Posted by Nile | Posted in Tutorials | Posted on 23-04-2011 | 3

The following video tutorial is for newbies, specifically focusing on guiding you, the user through filling out your profile in WordPress.

This is a great function with any WordPress powered site, especially if you have a theme that has an author box or even author template to call the information from your profile. This could prove beneficial not just for blogs, but for businesses too.

The ending got a little cut off, but mainly the ending was basically to hit the submit button at the bottom after you have filled in your profile information. By the way, as mentioned briefly in the video, you might want to sign yourself up for Gravatar, which you can upload your own avatar image and it will display on your site or any WordPress powered site when you use your email address. :)

I hope this tutorial helps. Feel free to leave comments and

ReadMore

Basic HTML Tutorial – What is HTML?

Posted by Nile | Posted in Tutorials | Posted on 25-03-2011 | 7

HTML is a short acronym for HyperText Markup Language. The language consists of tags surrounded by angle brackets and can effect the way a person sees a website. It can be used in scripting languages like cgi, php, and javascript to person any number of actions.

Example of a tag:
<head>.

A basic page consists of several key points that should be placed in the layout. There will be another tutorial illustrating how to build a basic page, but below is very general example of how a web page is composed. In a way, the HTML to a browser is somewhat like Writing is to a Book. It tells a story all in itself on how the page should look.

Here is the basic bare bones structure of a page:

<!DOCTYPE html>
<html>
<head>
<title>Your Site Title</title>
</head>
<body>
<p>Your Site Content Goes Here.</p>
</body>
</html>

The Document Type, HTML Head, Title, Body, tags are extremely important and should always exist when coding a website layout or the page may not show up properly or not at all. If you notice, the tags seem to be repeated, but the second time it is repeated with a forward slash (‘/’) in front of the tag name. For every open tag, there must be a closed tag. Some tags like linebreak (br), and image source (img) tags are singular tags and the forward slash is within the url.

Just a few example of tags that do not have a paired tag:

<br />
<img src="YOURIMAGEFILEHERE" alt="IMAGENAMEHERE" />

If you put a web page together, you can label the page with the extension of .html or .htm and view it offline (without accessing the Internet) or you can load it to a server, whether you pay for a webhost or for a free account.

When breaking down the code above for the basic HTML page, you will note that there are really 3 main sections: the header, the content, and the footer.

The Header

<!DOCTYPE html>
<html>
<head>
<title>Your Site Title</title>
</head>
<body>

The Content


<p>Your Site Content Goes Here.</p>

The Footer


</body>

</html>

In between the body tags goes the code for all of your layout and content. In the header, that is normally where you will put in your style sheet code and any elements like javascript or other script to help allow your layout to dynamically function.

ReadMore

Making A Two-Tiered Navigation in WordPress

Posted by Nile | Posted in Tutorials | Posted on 09-07-2010 | 1

Aside from the wonderful WordPress 3.0 navigation, a lot of people really like the two-tiered navigation. So, what is it? The two-tiered navigation is a horizontal navigation that the first layer on top is the parent pages and the second are the child pages. When you click the parent page, the child pages will appear below the parent.

In order to successfully make a similar two-tiered example like that of above, you will need to insert some html, and WordPress php functions to your layout’s template, and the CSS to help with that sheet. However, this tutorial is written for you as a step-by-step process to make it easier to understand.

Step 1. You will want to keep things simple and define our tiered navigation with its own list ID named ‘tiered-nav.’ Since this is the beginning, add the php function to call the parent page.

<ul id="tiered-nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>

Step 2. After this, you want to add the php if function statement to connect the parent page and children pages, so it will connect to the correct section. For example (using the picture example included with this tutorial) if you have About, Freebies, and Contact for parent pages, you do not want to click on Contact and its child page is Site History (which is suppose to be in the About section.)

<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>

Step 3. You want to make sure to add the second list that will call your child pages. To keep organized, especially when using CSS later, this list unordered list ID is named ‘sub-tiered-nav’.

<ul id="sub-tiered-nav">
<?php echo $children; ?>
</ul>

Step 4. Not done yet! You have some php functions to close. The if php statement needs to be closed and the whole function that was used in creating the two-tiered navigation needs to be closed.

<?php } else { ?>
<?php } ?>

Step 5. To get this code looking like a two-tiered navigation, you will have to specify in your CSS what to do in order to make this happen. Right now, you have two unordered lists.

/* Two Tiered Navigation */

* {
	margin:0px;
	padding:0px;
	}

/* Top Tier */

#tiered-nav {
	background:#C1DBE9;
	border-bottom:1px solid #FFFFFF;
	height:32px;
	}

#tiered-nav li {
	margin-right:25px;
	}

#tiered-nav li, #sub-tiered-nav li {
	float:left;
	list-style:none;
	}

#tiered-nav a, #tiered-nav a:visited {
	color:#FFFFFF;
	text-decoration:none;
	font-weight:bold;
	}

#tiered-nav a:hover, #tiered-nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#tiered-nav li.current_page_item a,
#tiered-nav li.current_page_item a:visited
        {
	background:#073447;
	}

/* Second Tier */
#sub-tiered-nav {
	background:#E3EFF7;
	border-top:2px solid #BBD8E7;
	border-bottom:2px solid #E3EFF7;
	height:28px;
	}

#sub-tiered-nav {
	border-right:1px solid #073447;
	padding:0px 7px;
	}	

#sub-tiered-nav a, #sub-tiered-nav a:visited {
	color:#073447;
	text-decoration:none;
	font-weight:bold;
	}

#sub-tiered-nav a:hover, #subnav a:active,
#sub-tiered-nav li.current_page_item a,
#sub-tiered-nav li.current_page_item a:visited {
	text-decoration:underline;
	}

Of course, you can use your own colors to pull off this effect and insert images for backgrounds.

Please sneak on over to Darren Hoyt to thank him for the original code for this tutorial.

ReadMore

Styling Your Facebook Fan box

Posted by Nile | Posted in Tutorials | Posted on 21-06-2010 | 18

Sometimes when you get an outside service and apply it to your site, you are unsatisfied on how it looks and perhaps want to alter it – like the Facebook fan box. It really is not too much of a big deal, but for those who like to put a little more effort and get rid of outside branding on their site, this tutorial should help.

Really, all it is is copying the code, replacing areas of the code for your fan page, and then copying the css to your layout’s style sheet.

This is a short tutorial on how to make your Facebook fan box go from this:

To This:

However, the code here is a bit different from my stylesheet, so if you have a site with similar colors like mine, you are welcome to take a look at my site’s stylesheet for reference.

1. you need the Facebook fan box code. It does matter which code as well… whether it is the older code without the iframe, or the new one that includes the iframe


<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript">FB.init("b9786c0131cf453efe57a93566925d73");</script>
<fb:fan profile_id="95262735892" stream="0" connections="10" logobar="1" width="300" height="200":></fb:fan>
<div style="font-size:8px; padding-left:10px">
<a href="http://www.facebook.com/pages/Nile-Flores/95262735892">Nile Flores</a> on Facebook</div>

2. Replace the fan profile_id=”95262735892″ with your own page’s number. In the case you have a username for your page, you can get that id from your page’s settings. When you click “Edit Page” the URL will have your site’s ID at the end in your browser.

Example:

3. In your code, you will see logobar=”1″. Change the number to 0.

4. In your Facebook code on the same line as the height and width, add css=”YOURSTYLESHEETURLHERE?1″ .
In the YOURSTYLESHEETURLHERE, put the URL to either your stylesheet of your theme or layout.

5. Apply the following CSS to your stylesheet, no matter if you are using WordPress, another CMS, or straight HTML. You can alter the code to fit your site’s colors.


/* Start Facebook Fan Box CSS */

/* Main Part of Widget */
.fan_box a:hover{
text-decoration: none;
}

/* Fan box header */
fan_box .full_widget{
height: 200px;
border: 0 !important;
background: none !important;
position: relative;
}

/* Header */
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}

.fan_box .profileimage, .fan_box .name_block{
display: none;
}

.fan_box .connect_action{
padding: 0 !important;
}

/* Fan Connections */

.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}

span.total{
color: #FF6600;
font-weight: bold;
}

.fan_box .connections .connections_grid {
padding-top: 10px !important;
}

.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}

.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666 !important;
padding-top: 1px !important;
}

/* Like Button */
.fan_box .connect_widget{
position: absolute;
bottom: 0;
right: 10px;
margin: 0 !important;
}

.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}

.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}

It really not much of a customization, but with some alterations to the CSS, you could probably do quite a lot.

ReadMore

How To Make A Vector Flower

Posted by Nile | Posted in Tutorials | Posted on 23-05-2010 | 7

This tutorial is designed to help you get an idea how to vector. For this tutorial, the photo to the bottom of this article will be the one that will be referenced throughout the tutorial. The same techniques can be used for other pictures and even freehand vector images. Although I am going to be using Paint Shop Pro, these same things can be done in Photoshop and Illustrator. Also, because some of the images are quite large, they will be resized, so you will have to right click and open in a new window or tab to see the larger version. Some images may only be opened in a new window to view.

1. Choose an image. As said, for this tutorial, you can download the image HERE. You will have to right click and open it in a new window before saving it to your own computer.

2. Posterize the image. This will help you be able to differentiate which layer is which. In this case, for Paint Shop Pro, go to Edit> Artistic Effects> Posterize. For the best layer separation in this particular photo of a lily, use 10.

3. For this image, you can either use your own colors or the ones in your image. For this tutorial I am using ones closest to what the image has already. To get the colors for your first layer, choose the dropper tool and click in the color that you will start with. My suggestion is to pick a starting place that will be best, like a base color. When I create vectors, I start with a base and then continue with my lighter colors before going back for the darker shades. It makes less work as some vectors are difficult and require that you move some layers around.

4. You will need to zoom in on the image to help you focus on outlining. Use the pen tool and with your first color, outline the flower. Using 1.0 width. You do not want it to be a wide line.

5. Once done with the first layer, put that on invisible in your layer toggle area. With the next layer, you will outline the next lighter color from your base color. Make sure to click on New Drawing Object to start your next layer.

6. ( Second Layer Screenshot |First 2 Layers | Three Layers | Almost done)Repeat each layer until you get to the lightest layer. You may improvise with more layers if you like a smoother vector. When the light layers are done, touch up with the dark layers.

7. Once all layers are completed, toggle all layers to be visible to check work. Make appropriate changes until satisfied. Delete the background rastor image to leave background transparent. You can make your own background if you want.

8. Save in raw form so you can make later alterations if needed. To save for use, merge only the layers visible. Do not merge all or you will have a white background.

Lily

ReadMore

Creating A Simple Author Profile Page In WordPress

Posted by Nile | Posted in Tutorials | Posted on 17-05-2010 | 9

I went over an effective way to put more social network handles into your WordPress profile without having to use a plugin, as well as being able to call it to your template in case you have an author’s box somewhere within your single post template.

This time, we are not going to have to tinker with your functions.php page.

To create a new page, you will need to specify that you are making a new template. This one will be called author.php

You want it styles somewhat similar to your other pages, but you can add the following and style it according to your own template. The code contains the gravatar, 3 different social network handles, and a simple listing of the author’s posts. You can customize it to display excerpts, display excerpts with thumbnails, full posts, and more.


<!-- This sets the $curauth variable -->
<?php
if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
else :
$curauth = get_userdata(intval($author));
endif;
?>
<div class="post-top">
<div class="post-title">
<h2>About: <?php echo $curauth->display_name; ?></h2>
<p style="float:left;padding-right:10px;"><a href="<?php echo $user_link; ?>" title="<?php echo $curauth->display_name; ?>">
<?php echo get_avatar($curauth->user_email, '96', $avatar); ?>
</a></p><p style="float:left;">Connect with <?php echo $curauth->display_name; ?> at: <a href="http://twitter.com/<?php echo $curauth->twitter; ?>"><strong>Twitter</strong></a> | <a href="http://facebook.com/<?php echo $curauth->facebook; ?>"><strong>Facebook</strong></a> | <a href="http://linkedin.com/in/<?php echo $curauth->linkedin; ?>"><strong>LinkedIn</strong></a></p>
<br />
<h3><strong>Website:</strong> <span><a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a></span></h3>
<p><strong>Profile:</strong> <?php echo $curauth->user_description; ?><p>
</div></div>
<div class="entry">
<h3>Posts by <?php echo $curauth->display_name; ?>:</h3>
<ul>
<!-- The Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
<?php the_title(); ?></a>
</li>
<?php endwhile; else: ?>
<p><?php _e('No posts by this author.'); ?></p>
<?php endif; ?>
<!-- End Loop -->
</ul>

In order for people to be able to see your author, simply add the following within your post’s byline:

Written by <span><?php the_author_posts_link(); ?></span>

This is actually from my own template from Blondish.net. In fact, this is what my author profile looks like at Blondish.net.

ReadMore

How to Optimize WordPress for Speed: Part 2

Posted by Nile | Posted in Tutorials | Posted on 10-05-2010 | 2

This is a guest post by Jason Capshaw. Jason Capshaw is founder of MyWebTronics, an Atlanta web design firm. He resides in Atlanta with his wife and two children

This is Part 2 in the series of How to Optimize WordPress for Speed.

Reducing PHP functions in themes

WordPress has thousands of different functions that could be called at different points of page loading. Reducing the number of functions used by your theme will assist in speeding up page load times.

Themes are built to be used on any domain name without having to hard code anything. This is very useful for adding a new theme to your site, but it requires the use of certain functions to identify blog information. Since you know what them you are using, hard coding some of those functions will reduce server load.

Tip: the quickest way to learn how to fix something is not to back it up. So, if you are not looking for an additional lesson in programming, make sure to back up your files before you start editing them.

Here are a few functions to replace:

  • bloginfo(‘stylesheet_url’); In the head section of your site. Should replace with http://www.example.com/wp-content/themes/YOURTHEME/style.css
  • get_option(‘home’); This function is usually in the theme header in the link for your blog home page. Replace with your blog location with http://www.example.com/blog/
  • bloginfo(‘name’); This function calls your blog name. Simply replace it with your blog title, “My Example Blog” in the theme header.
  • bloginfo(‘description’); This function is usually in your header and calls your site’s tagline. Replace with your tagline.
  • bloginfo(‘template_directory’); This function (or something similar) may appear throughout the theme to call certain images the theme uses. Simply hardcode each image link to the hard URL as in http://www.example.com/wp-content/themes/YOURTHEME/images/mypic.gif.
  • edit_post_link(‘Edit this entry.’); When an editor or admin is logged in, links appears so that the site can be edited. I would just drop this all together and edit eveything from the admin panel.

Reduce HTTP requests

When a browser requests a web page, a series of communications begins between the browser and the server. Each time the servers sends a file, it sends a header first to tell the browser what to expect. If the subsequent data does not match, your browser should show an error.

The fewer times the server and browser engage the 7 different network layers of the internet, the less time will be needed to download the page. You do not want one big file with everythin in it, for example, CSS and javascript should be in seperate files. However, in an ideal situation your server should only send four different files:

  • HTML
  • Stylesheet
  • Javascript
  • Image

Most sites work like this:

  • HTML
  • Stylesheet 1
  • Stylesheet 2
  • Javascript 1
  • Javascript 2
  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5
  • Image 6
  • Image 7
  • Image 8

Steps to reduce HTTP requests:

#1 Put all CSS into one file

Some themes use multiple CSS stylesheets. Merge them together. Also, some plugins use stylesheets. If you are really serious about getting every bit of speed possible out of WordPress, you could edit the plugin and add the plugin’s CSS to your theme’s CSS file.

#2 Combine all javascript into one file

Put every single javascript function into one file. They should not conflict with each other.

#3 Use CSS sprites for background images

CSS has the ability to show only a portion of a particular image in the background. There are some problems with CSS sprites, for example ‘repeat’ may be a problem. However, many background images can be combined into one file, especially icons.

Here are a few examples of large sites that use sprites:

Stop use of Avatars

When avatars are enabled, WordPress takes the user’s email address and turns it into an md5 hash. It then communicates with Avatar to find out if the user has signed up and what Avatar they use. If they do not have one, they send the URL to the one you have selected.

The browser is required to make multiple DNS requests to the URL provided for the Avatar and download the image from a different source. This process may not be so bad for one or two comments. But when a post has many comments, it can become extremely burdensome and can slow your lightning fast WordPress load time into a turtle’s crawl.

Test plugins

When running a WordPress site, you need to weigh pros vs. cons for certain plugins. The easiest way to test a plugin, is to test your site speed before the plugin is activated, and after the plugin is activated.

If the plugin slows down your site; does it add enough value to continue it’s use? In most cases, probably not. Plugins are usually designed to get users to engage with your site, if it causes a higher bounce rate or frustrated users it is counter productive.

ReadMore

Page 1 of 212