How can I customize the header and margins in the Manifest theme?

rkrigney · Member · Sep 19, 2011 at 7:15 pm
Copy link

Add topic to favorites
If you go to my WordPress blog (RKRigney.com), you’ll notice that I’m using the manifest theme. Currently, I’m using the default header, which takes the site name (entered in the “general settings” tab) and puts it at the top of the page. The theme also allows users to upload their own headers, which are then inserted below the main navigation bar (which consists of all of your pages).

I want to upload my own header image and change the CSS of the theme so I can have that header image do the following:
1) Link back to the home page
2) Appear above the main navigation bar, replacing the current site title

There is also currently some excess white space in between the main navigation bar and the beginning of my content area. I’d like to make that smaller.

Finally, I want to add a “home” button to my main navigation bar. Since the navbar is made up of pages, one way to go about that would be to make a page that acts as a redirect to rkrigney.com. Is there any way to do that?

Feel free to answer these one-at-a-time, if necessary… Thank you!
Blog url: http://rkrigney.wordpress.com/
designsimply · Member · Sep 19, 2011 at 11:16 pm
Copy link
The extra space at the top is from the empty #site-description. You can remove it completely with this:
```
#site-description {
    display: none;
}
```
Then find #core-content and adjust the top margin until it looks right.
designsimply · Member · Sep 19, 2011 at 11:18 pm
Copy link
You can use a custom menu to setup a Home link that points back to http://rkrigney.com/

Check out this help page to learn about custom menus: http://en.support.wordpress.com/menus/
designsimply · Member · Sep 19, 2011 at 11:21 pm
Copy link
I would recommend using the Appearance → Header page to add a header and then adjust the position of it after that. Can you add a header first?
designsimply · Member · Sep 19, 2011 at 11:25 pm
Copy link
I found some mistakes in your custom CSS. When you add url() attributes without using a full URL starting with http:// then it breaks. This happens when you copy and paste the entire original CSS into the custom CSS editor. You shouldn’t do that unless you also adjust all of the url() references.

url('images/button.png')

A better option is to choose the “Add my CSS” option below the editor and just add CSS rules for the things you want to modify. See this help page for more info: http://en.support.wordpress.com/editing-css/#maintaining-your-custom-header
rkrigney · Member · Sep 20, 2011 at 1:53 pm
Copy link
Hey designsimply,

You’ve been extremely helpful so far. I really do appreciate it.

Would you recommend that I switch back to using the code’s original CSS? I’m hesitant to do that in part because I don’t want to lose all of my changes.

If I do go back to just adding CSS one piece at a time, how do I modify things like the top margins?

And I know I could create a custom menu, but how do I get that custom menu to replace the menu that’s currently there? I tried and I had no success.
rkrigney · Member · Sep 20, 2011 at 1:54 pm
Copy link
Also, as you requested, I added a header using the appearance>theme menu.
rkrigney · Member · Sep 20, 2011 at 1:59 pm
Copy link
One particular thing I’ve changed is that I altered everything in the template to 700px wide (from 500px default). If I go back to my default settings now, I’d lose all of that.

Again, thank you for helping me :)
designsimply · Member · Sep 20, 2011 at 4:05 pm
Copy link
I wouldn’t switch back unless you are willing to go through the code to find the changes and re-update them.

For the custom menu works, make sure you set the primary navigation as the meu you created. The primary navigation is set near the top left inside the Appearance → Menus page.
designsimply · Member · Sep 20, 2011 at 4:22 pm
Copy link
All righty… for the header image :) keep in mind there’s more than one way to do this in CSS. Try this out and see if it gets you the result you’re after. It takes the header in the Manifest theme, moves it up, and lays the h1 header link over the top of of it.
```
#header-image {
    left: 100px;
    position: absolute;
    top: 0px;
    z-index: -1;
}
#site-title a {
    color: transparent;
    display: block;
    height: 100px;
    width: 700px;
}
```
rkrigney · Member · Sep 21, 2011 at 4:48 pm
Copy link
Perfect! It looks exactly as I want it to :) http://rkrigney.com/

Thank you so much! I hope WordPress is paying you to do this haha

No items found.