WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Is there a CSS to insert a picture as big as 500px by 900px in between the header and the area for the posts (called 'home top'). (not a background)?
or in alternative would it be possible using CSS to enlarge the dimensions of the header in order to fit a picture as big as 500px by 900px? thank you.
The blog I need help with is recordbeat.org.
Not seeing any "home top or home bottom in the source code. I do see it in the CSS, but it is not apparently tied to anything in the XHTML - at least not on the home page.
I'm sorry, I'm not sure I understood. So there isn't a specific css to insert a cover picture right after the header ? thank you.
I didn't see anything in the source code.
It isn't that it cannot be done, just that it will require putting the image into a text widget and then using CSS to move that up where you want it and adjusting the positioning of everything else to get it out of the way.
900px wide x 500px tall is a really, really large image and is going to push any content down completely out of site for visitors on normal monitor resolutions. Not the best thing from a web design standpoint unless that image is the whole focus of the site and the rest of the content is just secondary babble.
Or is the image 900px tall x 500px wide? That would actually be way worse.
At any rate if you want to do this, upload the image, put it into a text widget in the sidebar and then I'll work with it later. I'll just home for a short bit and then gone again for probably 4 hours.
how about 400 (tall) x 711 (wide)?
The purpose is having a cover photo below the header that doesnt get pushed down by new entries.
by scrolling down the blog entries start, that was what I had in mind.
thank you, also for wanting to work with me.
please answer at your convenience, no need to rush.
I had the photo already in the media, I just put it in one of the widget so that you can explain to me what needs to be done to move things around. thank you.
You know, I have a couple questions before we get started. Do you want the image to be only above the posts, or do you want it above the posts and the sidebar?
The reason I ask, is that this theme is pretty rich in CSS selectors and we can actually do this a different way which will be easier. I just need to know how you want the image in relation to the other elements.
Above the posts and the sidebar. I would like it centered, just like the header is. thank you.
I'll set that up and then you will probably want to upload a new one a little wider so that it is as wide as the combined sidebar/content area. I'll center things though so that all you have to do is to replace the image and adjust the margin and/or padding.
Give this a try to see what it looks like, but I think what you will want to do is to create an image that is 960px wide, or perhaps 910px wide (so there is a little white space to the left and right of the image). Then you can adjust the top margin in #content-sidebar-wrap as needed for the height of the new image. You won't need the image in the widget in the sidebar.
recordb
.wrap {
background: url("http://recordbeatdotorg.files.wordpress.com/2011/12/cover_blog5.jpg") no-repeat scroll center top #FFFFFF;
}
#content-sidebar-wrap {
margin-top: 420px;
}
#footer .wrap {
background: #FFFFFF;
}Thank you so much!!! I see what you're saying about the dimensions. I have a question though: that white part in the top margin (I set background grey, same color as the header to have it stand out) is there a way to get rid of it altogether? or I can only lift the image up? like you said 'adjusting the margin'?
I also have a couple of other questions not related, after we get this the way I want it.
I'd like to say one thing first: I really appreciate your help. You were fast and helpful from minute one. Not everybody on message boards is as patient and helpful as you've been so far. thank you.
Are you talking about the gradient band that runs full width across the top under the header?
yes that one. No the one where I put the menus, the one right under. thanks.
The first bit gets rid of the light gradient and the second bit moves the entire content area up right below the navigation.
#inner {
background: none;
}
#inner .wrap {
margin-top: 0;
}Thank you. As you can see I followed your advice and I stretched the pic to 910px wide. It loses the proportions but I think I'm ok with it. Is there a way to have the picture show only on the homepage and not all pages? Right now if a click on 'About' the picture stays there.
Yeah. If you add .home to the beginning of each selector we added, the changes we made will only apply to the main home page. The rest will stay as originally designed. If you want that whitish bar below the navigation gone and the white area moved up on the other pages, then just leave .home off the last two below.
.home .wrap {
background: url("http://recordbeatdotorg.files.wordpress.com/2012/01/cover_blog6.jpg") no-repeat scroll center top #FFFFFF;
}
.home #content-sidebar-wrap {
margin-top: 420px;
}
.home #footer .wrap {
background: #FFFFFF;
}
.home #inner {
background: none;
}
.home #inner .wrap {
margin-top: 0;
}Once again thank you so much. What is the purpouse of that whitish bar? is it so strange that I want it gone...?
a couple of unrelated questions:
1. Regarding 'Meta' :
is there a way to have only some of the entries show in Meta?
currently:
* Site Admin
* Log out
* Entries RSS
* Comments RSS
* WordPress.com
I'd like to get rid of site admin, wordpress.com. Possibly keep only log in/log out.
In alternative how do I arrange them to appear one next to each other in one consecutive line instead of one below the other?
2. Regarding the very bottom footer:
where it says "Return to home page" is there a possibility to hide the following information: Blog at WordPress.com. Theme: Magazine by StudioPress. Fonts on this blog.
The white bar is just a design element, something to differentiate it from other designs.
1. There isn't really a way to edit the widget itself. I generally don't even use them and just bookmark the base dashboard URL (site.wordpress.com/wp-admin/). The site admin link in it is redundant anyway since that is in the top dark grey admin bar when we are logged in, and logging out can be done from that as well.
2. You are not allowed to hide the footer credits here at wordpress.com and doing so could get your site suspended.
understood. thank you for clarifying it I didn't know that (re: 2).
I've seen the 'meta' entries showing one next to each other in other blogs though. there should be a way to keep them but having them aligned on the same line. any ideas?
how do I change the background color for post, currently white?
is it possible to have a navigation menu on the bottom?
something similar to what you have on your blog where you added 'comment policy', terms of use' etc. I'd like to move 'about' to the bottom, and other things such 'contact us' etc. thank you.
Half the meta content is in the dark grey now but it is all on one line as you wanted. Actually it is hidden due to an overflow: hidden; in the sidebar stuff.
#meta-3 {
width: 500px;
}
#meta-3 ul li {
display: inline-block;
}wait, there's one problem. I tried moving the meta to the footer widget in order to apply your css and have it in one line. Once I did that (before even applying the css) my picture appeared in the footer as well. does that mean I can't use footer anymore?
What picture in footer? How did you move the widget?
sorry it took me so long to get back here. What I did is I moved the meta from the widget 'primary sidebar' to 'footer 1' and my picture now appears in the bottom. I saved the change now so you can have a look at it and tell me how to fix things.
If I'm gonna put the meta information all in one line I'd rather have them on the bottom in one of the footer instead of the sidebar.
To limit the photo to the top part of the blog, make the CSS selector just a bit more specific by adding #inner like this:
designsimply.home #inner .wrap {
background:url('http://recordbeatdotorg.files.wordpress.com/2012/01/cover_blog6.jpg') no-repeat scroll center top #FFFFFF;
}To make the list items in the meta widget appear on one time, try this:
.footer-widgets-1 {
width: 100%;
}
#footer-widgets .widget ul li {
background: none;
border-bottom: none;
list-style-type: none;
padding: 0 18px 5px 0;
float: left;
}However, instead of trying to modify the meta widget so much, you might try adding just the links you'd like to keep using a text widget.
To limit the photo to the top part of the blog, make the CSS selector just a bit more specific by adding #inner like this:
actually that puts the picture underneath the whole page making the area for post and the sidebar transparent if you know what I mean.
Maybe there is another way? The problem persists.
good tip about the txt widget, I didn't think of that, I could avoid putting meta and insert only a link to log in... I'll try that.
This topic has been closed to new replies.
