We’ve developed many WordPress themes for clients for specific projects. I was looking for a 3 column theme with a variable middle column and a vertical menu. (I don’t know why there are so few vertical menus for WordPress.) Anyway, I couldn’t find a theme I liked, so I wrote my own.
Presenting tpSunrise!
I’m really happy with the way that this theme turned out. At the same time, it’s also my first theme that I intend to be publicly available. It’s GPL so anyone can use it for free!
Please download tpSunrise and let me know what you think! You can view a working WordPress site using tpSunrise too!
This theme requires WordPress 3.0 or above
This theme is under GPL License. (http://www.opensource.org/licenses/gpl-license.php)
TO INSTALL:
1. Unpack this archive in your wp-content/themes/ directory.
2. Go to WordPress Admin, Appearance/Themes.
3. Activate the theme.
OR
1. Install and activate the theme from the Appearance/Themes admin panel.
tpSunrise is a is a 3 column theme with a vertical menu on the left. The theme supports 2 widgetized sidebars on the right and a flexible center column that automatically adjusts for the window width.
The theme automatically supports customizing the header image, title text display and title font color.
This theme supports an optional alternative header for sub pages. This allows the home page to feature a large graphic header and sub pages to use space a bit more efficiently. This feature can be activated under appearance/ theme options. Be sure to specify an alternate header image and a color for the blog title text. Sample alternate header graphics are located in the theme image directory at tpSunrise_alt_header_sample1.png and tpSunrise_alt_header_sample2.png.
The theme uses one WordPress 3+ menu and presents the menu as a vertical menu down the left sidebar. The theme uses an image (images/gradient31.gif) to style the menus; this does limit the length of the text for the menus. If you prefer, you can remove or change the image to accommodate longer menu names or different color schemes. This left sidebar is intended for navigation only and is not widgetized.
The theme also supports alternative styling for the sub (all except home) pages. Sub page styling can be set in appearance/theme options. Be sure to check the alternative styling option and specify the CSS that will override the home page default styles. Any valid CSS statements can be used here.
For minor styling changes please edit custom.css rather than styles.css. Any styling in custom.css will take prededent over styles.css and ease the process of theme updating.
Every theme I’ve developed before was intended for a very small audience; this one is different. This is my first theme intended for wide distribution; I would appreciate comments. I have some other themes in process to meet specialized layout requirements. I wanted to give something back to the many people who helped me learn CSS, WordPress, php and jQuery through their blogs. Thanks!
It is completely optional, but if you like the theme I would appreciate it if you keep the credit link in the footer.
Hi, I love your theme. But I’m having problems with the custom header function. It says the header size is 940×200 pixels. When I upload my custom headers of that size, it shows up on the left hand side of the header bar, with a good 1/3 of the header space just black background. Uploading a larger header doesn’t work either. Can you please help?
The theme is designed to align to the left side of the screen and it has a variable width to that it will automatically adjust to many screen widths. To accommodate this, the header must also be able to vary in width. I’ve designed the theme to fade to a dark, almost black, color to the right of the header graphic. This color can be changed but right now you’ll have to edit line 94 of styles.css and change the color to any other color. For example, to change to red you would change:
#masthead {background: #180509;
}
to
#masthead {background: #ff0000;
}
You can find out more about css colors at http://www.w3schools.com/cssref/css_colors.asp.
In a future release I’ll make the color easier to adjust by adding an option to the theme options.
Thanks,
Ed
I found that by changing it to white, #FFFFFF, that square on the right of the header will perfectly match the surrounding page, which is also white, and you can no longer tell there’s an issue.
Hi,
My pages do not appear. Is there any reason for this?
Regards,
Angela
I would need more information to understand what’s happening. Can you give me your site url? Is this happening for all themes? Try switching to 2011 and see if pages render correctly in that theme.
Just wanted to say thanks for the theme, it’s great.
Only critisism I have is I’d love to have more control over the background image. The ability to move it left, center, or right isn’t enough, having an up, center down would be OK, but if there was a screen that you could just position it with X, Y coordinates, that would be awesome.
anyway It’s working fine for me, and real easy to use. Just what a interweb N00B like myself needs
I’m glad the theme is working for you. I like you suggestion for positioning and will take a look at including that in the next version. In the meantime if you want to position the header image, you can manually edit the style.css file. For example, if you would like to move the image 200 pixels to the right just add the line padding-left as below:
#masthead {background: none repeat scroll 0 0 #180509;
padding-left: 200px; /* add this line to move the image 200 pixels toward the right. You can change the number to any amount of pixels you like. */
}
Ed,
Your theme is wonderful! I too don’t understand why there aren’t more WordPress themes with a vertical menu.
I’ve been using the theme as a template for a website and changing a fair bit of it around (thank you for the clearly organized CSS!) but there were two things I’m trying to figure out.
1. I’d like to have the theme (all three columns + header) centered at about 940px width rather than having it aligned on the left.
2. I’d like to use a header image that is 940w by 560h, but currently on the “Header” page I can only upload an image that is 940×200 or crop it to that size. Is there some way to adjust this in the CSS?
Thank you for your hard work on this theme.
Jaime
I’m glad that you enjoy the theme.
To answer you questions:
1. Go into styles.css and on lines 114-127 you’ll see this code:
#wrapper1 {position: relative;
text-align: left;
width: 100%;
}
#wrapper2 {
float: left;
position: relative;
text-align: left;
width: 100%;
background-image: url("images/l_col_bg.gif");
background-repeat: repeat-y;
background-position: top left;
}
Change the width values to the desired pixel width you’re looking for. You’ll also need to center the wrappers rather than float them left. There are several ways to float center but I’ve found that adding margin-left: auto; and margin-right: auto; works well in most cases.
2. The values for the header image width and height are in functions.php. On lines 87-89 you’ll see this code:
//Define the width and height of our header imagedefine( 'HEADER_IMAGE_WIDTH', apply_filters( 'tpSunrise_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'tpSunrise_header_image_height', 200 ) );
Change the width and height values to whatever you need. I STRONGLY suggest making a child theme and changing the values in the child theme.
Hello, I love your theme, but I got some problems with the navigation. Normally the navi-text is blue, but I want to set it to white and changed the color code. But it’s not white… it’s the default blue text.
I hope you could help me a bit.
You can change the text color of the menus through the stylesheet file. The text in the menus are actually anchors, so you’ll need to change the anchor color. On line 277 of style.css you’ll see:
.sf-menu a, .sf-menu a:visited {color: #13A;
}
Change the color line to the color code you want.
Thank you!
But now I got another problem. I changed the width to 940, like Jamie and put margin-left:auto;
margin-right:auto; after the wrapers and the footer. Now most of the site is in the center of the screen, only the header and that orange background image are still on the left side.
How I could get them into the center?
I’m finding that my vertical menu on the left does not appear. I have WordPress 3.2.1. Have I missed some setting or something?
Never mind, I figured it out. In the dashboard, go to appearance < menus and then create a menu name such as "navigation". Populate this menu with items from the left side of the same page, such as Home, About, etc… Save menu. Then, at the top left of the same page is a box labeled theme locations. it contains a drop down menu. Click it and select the menu you just created. Then click save. Go to your site's home page and refresh the page, the vertical menu will now appear.
Glad you figured it out
Thanks for this great theme..I am going to try it out.
Two thumbs up..mate
Thanks
I’m sorry, but I need your help again. I changed the width to 940, like Jamie and put margin-left:auto;
margin-right:auto; after the wrapers and the footer. Now most of the site is in the center of the screen, only the header and that orange background image are still on the left side.
How I could get them into the center?
Come on, I don’t know how to center the header.
I can’t use margin for #masthead and padding can only work with numbers.
Please help me that last time.
Can you please send me the url of the site you’re working on. It’s hard to understand the problem if I can’t see it.
I’m happy to fix bugs in the theme. Please understand that, although I try to help as I can, I can’t provide support for extensive theme customization.
Thanks,
Ed
Okay, thanks for your answer, I’m very glad about your free Support.
The website: http://www.bayer-qualitaet.de
The header-picture should be in the middle of the screen. Margin isn’t working, only padding, but I don’t know how to get it into the center with padding.
This will center the header graphic:
#masthead {width: 960px;
margin-right: auto;
margin-left: auto;
}
The theme is intended to be left aligned, so I haven’t extensively tested the impact of centering the header graphic.
Thank you, you’re my hero
I didn’t know that I have to ad the width.
I hope it wasn’t too much of a bother.
This is the exact type of theme I’ve been looking for! I’m currently using another theme on my site http://workfromhomeanalysis.com and I’m preparing to switch.
On a test site I use, http://makemoneyfastwithoutmoney.com, to try things out, I’ve been playing with this theme.
I have a question about the menu. I put my first level pages on the menu and I would like to have my second level extend off of the first. Then the third level extend off the second.
Does the theme support this, and if not can I add it to my custom.css that I am creating?
Thanks,
Jeff
Hi The theme uses the standard menu that have been part of WordPress since version 3.0. The theme does support multi level menus. I’ve tested them to 3 levels deep – that should be enough for most apps.
Thanks,
Ed
I am having a problem with the menu when there is a second level sub-menu. See my web site and then mouse-over Education, Transgender. You will see that only the first sub item displays at z-index: 999, the ones below are partially hidden, the same happens for Reading Books/List. I notice that your sample here does not second level sub-menu so perhaps you could try this at home and get back to me. Thanks for your help. Don
Thanks for pointing this out. I actually never tested the menus 3 layers deep. I’ve corrected the problem and will email you a new version of the theme. I’ll also post the new version (1.2.3) here.
Thanks,
Ed
Many thanks, I will be looking and waiting for the update. Will the update be available for automatic update soon?
Also, is there a way to have a menu item that toggles #right_col {
display: none;
} so I can turn it on and back off? I am really new to WP so forgive what may be something I should know. Don
The update isn’t in the WordPress repository yet. I’m holding on submitting it until I complete testing with WordPress 3.3, which should be released late November or early December. In any case, the most recent version of the theme is always downloadable here.
The css visibility property will hide markup. The syntax is
visibility:hidden;to hide. I think it’s actually easier just to remove the menu item in question from the WordPress backend though – especially if it’s a temporary change.Ed:
1. The update fixed the problem.
2. Visibility affects layout and is not what I want to toggle. I want to be able to toggle display between “display: none;”, this being the default, and “display: block;” because I want to remove the element from the presentation entirely.
Guidance appreciated. Don
Ed:
1. I spoke too soon. The update fixed the problem everywhere except Internet Explorer. I am using 9.0.3 which I believe to be the most current. IE still has the same old problem.
Don
I loaded your page with IE9.0.3 and it displays correctly for me. I’ve emailed you a screen shot. Please let me know if I’m missing something.
Ed: My error, I failed to flush the IE9 cache. Thanks for your response. Don
Thank you for a great theme.
Is there anyway I can replace the header with a flash image(.swf)? What need to be changed?
Thanks.
You would need to edit header.php to change the graphic to a flash file. coding this is beyond what I can offer supporting a theme from free, but I’m happy to help you if you want to hire me to do the work.
I’m sorry Ed. I cannot afford to hire a designer in my current situation.
Thank you for your pointer.
Hello Sir
i am rakesh , i am using your theme . i am facing one problem , i want to add templete page in my website . i am not finding one column page or templete page in tpsunrise theme . i will be thank full to you if you suggest me something in this regards.please help me sir .
Thanks and regards
Rakesh Pandey
The theme does not come with any custom page templates, but you can create one from any of the standard WordPress page templates.
Hi?
I’m working on a site using your theme, but I have problem with the menu when I go 3 levels down. There they overlap and are partially hidden. I read in the comments someone else had the same issue and that the update fixed the issue.
I checked and i’m using the latest version according to wordpress, but that’s a v1.2.1 while you spoke of 1.2.3. Where can i find the update and how can I update it without losing my settings?
Sorry if I’m asking dumb question, I’m pretty ne at WordPress.
Thanks,
Pieter
The updated version of the theme is not yet in the WordPress repository. It can be downloaded at http://www.tekpals.com/tpsunrise-a-new-theme/
thanks so much,,
.
i’ll work will your theme to my another blog
Nice vertical navigator theme………we can find very rarely…
Hi Ed,
can i change the color of the menu bars??
I found out i can change the color when I go over it with the mouse, but i want to have the color changed period. I want to change the orange in pink (FFCCFF)
TY for your help.
The menu bar gradient is located in /wp-content/themes/tpsunrise/images. You’ll see a file named gradient13.gif. This is the unselected color. You can change the colors in this file as you would like. The hovered color is set in style.css line 323. You’ll see this code:
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {background: #F2BE76;
outline: 0;
}
Change the background color to what you would like.
I LOVE your theme! as you can see by my website I have used many of the tips from this page to spruce it up. I have used Twenty Ten since the day it was released but I have really wanted a left hand menu with flyouts .. today I went looking and found you! WOOHOO!!
The only thing that I would like to do now is change the menu graphics .. making the graphics is no problem .. but finding where to put them is:) .. where about’s in style sheet and in what folder I would upload it too .. Can you help please ? I would need the size the menu graphic needs to be also .. pretty please:)
Thank you in advance and thank you so much for this wonderful Theme!
I’m glad you like the theme. I think the commenter below had the same question.. Please let me know if that doesn’t answer your question too.
OPP!
I was able to find and change out the color of the menu graphic .. going to play around until I find a color I really like but I found it and where to change it. but I do still have a question/problem 
Above you show how to change the color of the test on the menu buttons .. try as I might I can not get mine changed to black for nothing .. what the heck am I doing wrong?
To change the text color you’ll go to line 185 in style.css and change the code for color:
#left_col ul li a {color: #507AA5;
text-decoration: none;
}
To change the hover text color, go to line 190 and change the color selector here:
#left_col ul li a:hover {color: #507AA5;
text-decoration: underline;
}
Thank you, thank you, thank you!! I have had SO many complements on the new layout .. tis all you baby, tis all you .. and next payday I will be back to donate .. THANK YOU so so much, LOVE this theme!! May you have a very Merry Christmas!