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.
- Buy the Custom CSS upgrade if you don’t have it yet.
- Switch to the Coraline theme.
- 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.
- Create a new page, set “Blog” as the title, leave the content empty, and publish.
- 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.
- 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.
- 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; }
- 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.
Nick,
Thanks for this…it’s freaking awesome! And now I must ask an obvious question – what about rotating the background image from a set of photos or graphics automagically?
LikeLike
Not doable on WordPress.com with the current tools, but a coworker had an idea to bundle this up as a child theme. Rotating background image could be built into the theme options. Maybe a holiday project. 🙂
LikeLike
Sweet! I’ve been away from WordPress for a while and feel a bit rusty. I’m building a self-hosted WP site and I think your page is the perfect landing spot for it.
Cheers!
LikeLike
Would love some help….can’t seem to get the comments box off the screen or get my picture to display correctly, even though I’ve been following the directions precisely.
LikeLike
You need to edit the Home page and disable comments and pingbacks as mentioned in step 3.
LikeLike
Still can’t get it to work even when verifying as described above. Would you be available to discuss via phone or Skype?
LikeLike
You can send me an email at http://nickmomrik.com/contact/ giving the URL where you are trying and I can look at what you’ve tried. Last time I looked you still had comments enabled on the page, but now your URL loads a page on about.me.
LikeLike
Great. Could you give instructions for self hosted WP ? Thanks so much.
LikeLike
The homepage content (icons, text) won’t appear, suggestions?
LikeLike
What’s your URL?
LikeLike
Does this work with Twenty eleven theme as well?
Thank you.
LikeLike
It was done specifically for the Coraline theme when I did it. Will probably need changes to make it work.
LikeLike
Ok, let me now if you would be willing to create a version for Twenty Eleven.
Regards,
Álvaro
LikeLike