How To Make An about.me Style Home Page

I really like the “personal splash page” design you can create with about.me, but I want to control my URLs. I figured I could do the same thing on my web site with a little CSS. Here’s a screenshot of what it looks like for historical purposes.

I host nickmomrik.com on WordPress.com, so all of my instructions will be based on that. You will need the Custom CSS upgrade to do this, but it’s a steal at less than $15/year. If you follow along you should be able to create a similar splash style home page pretty quickly.

1. Buy the Custom CSS upgrade if you don’t have it yet.
2. Switch to the Coraline theme.
3. Create a new page, set “Home” as the title, choose full-width, no sidebar for the Page Attributes Template, leave the content empty, disable comments and trackbacks, and publish.
4. Create a new page, set “Blog” as the title, leave the content empty, and publish.
5. Go to Settings->Reading, set Front page displays to A static page, choose Home for Front page, choose Blog for Posts page, and click the Save Changes button.
6. Go to Appearance->Edit CSS, delete everything in the big textarea, select Add this to the Coraline theme’s CSS stylesheet, and make sure Limit width to is 500. Don’t save yet.
7. Copy the following CSS, paste it into the Edit CSS textarea, and Save Stylesheet.

   body {
   padding:0;
   }
   
   body.home {
   background:url('BACKGROUND_IMAGE_URL') top center no-repeat #000;
   min-height:100%;
   height:100%;
   }
   
   body.home #container {
   width:1024px;
   max-width:1024px;
   height:100%;
   }
   
   body.home #header,body.home #content-box,body.home #footer,body.home #content {
   background:none;
   }
   
   body.home #header {
   position:relative;
   top:410px;
   left:650px;
   width:auto;
   }
   
   body.home #masthead {
   padding:0;
   }
   
   body.home #site-title, {
   text-align:left;
   }
   
   body.home #site-title a {
   color:#5588CA;
   }
   
   body.home #site-title {
   font-size:40px;
   }
   
   body.home #access {
   margin-top:0;
   width:230px;
   border-top:1px solid #A54C1D;
   padding-bottom:120px;
   }
   
   body.home #footer,#branding,body.home #site-description,body.home .entry-title,body.home .entry-title,body.home .edit-link,body.home #wpstats {
   display:none;
   }
   
   body.home #access a {
   color:#A54C1D;
   }
   
   body.home #access li:hover > a,body.home #access ul ul:hover > a {
   background:none repeat scroll 0 0 #222;
   }
   
   body.home #access ul ul a {
   background:none;
   min-width:95px;
   }
   
   body.home #access ul ul {
   -moz-box-shadow:none;
   -webkit-box-shadow:none;
   box-shadow:none;
   width:auto;
   }
   
   body.home .entry-content img {
   padding:3px;
   }
   
   body.home .entry-content {
   margin:-190px 0 0 30px;
   }
   

8. You need a high quality image to use for your background. I recommend something 1024px wide and around 900px high. Grab the URL of your image and place it in the Custom CSS in instead of BACKGROUND_IMAGE_URL. Make sure to Save.

Visit the home page of your site and it should look close to mine. You might need to tweak a few things depending on your site name, menus, and number of pages. If you know a bit of CSS it should be easy. Questions? See below or leave a comment if I haven’t answered it.

How do I get the social media icons in the upper left?

The content of this upper left area is controlled by the Home page you created. Add text, images, links or anything you want to the content of that page. If you want social media icons, do a Google search and you’ll find all kinds. Choose the style that you like, upload them to your site, insert into the home page, and add links to the images.

My Site Title is Too long How do I prevent it from running off the right side?

Look for body.home #header in the Custom CSS. Change left:650px; to a smaller number until you get in right. You can also change top:410px; to move it up or down.

How do I hide the “Home” link on the splash page?

Add this to Custom CSS:

home.body #access .current_page_item) {
display:none;
}

If that doesn’t work, you are probably using a custom menu. View the source code on the home page and find the Home link in the HTML. You should see a class on the <li element which looks something like menu-item-50. Remember the number (it probably won’t be 50). Add this to your Custom CSS (remember to change the number).

body.home #menu-item-50 {
display:none;
}

The Line between the site title and the menu is too long/short or my menu items wrap around on multiple lines. How do I fix this?

Look for body.home #access in the Custom CSS. Change the number for width:230px; to make it smaller or larger depending on your needs.

If you have other questions or problems, let me know by leaving a comment. I’ll try to help out.