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
Hello,
I'm interested in using the Chateau theme with the following customizations, but I just don't understand how to do them with CSS at all!
1. Move the tags to the bottom of the post in a linear fashion (rather than on the left side)
2. Make the entire post span the width of the additional 'free' area, now that the tags are moved.
Here is an image of what I'd like to do.
3. shift the menu to underneath the header image.
'Chateau' theme demo: link
You did not specify a blog address or reason for posting when you created this topic.
This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you'll find help at the WordPress.org forums.
If you don't understand the difference between WordPress.com and WordPress.org, you may find this information helpful.
If you forgot to include a link to your blog, you can reply and include it below. It'll help people to answer your question.
This is an automated message.
no blog link since this is for a private blog, but I would love to learn how to do these customizations!
Thank you!
1. See this recent CSS forum topic on moving the tags to the bottom of the post. Click through to the original poster's website to see what it will look like. There is no way to put the tags beside the "Tag" title.
2. The following would widen the posts to take up the space vacated by the tags. See this screen shot for what it will look like.
greeentee
.post-entry {
width: 95%;
}3. This can be a little messy since you have to use position absolute and position relative which means the elements will no longer float and adjust when other elements change. If you have one line of tabs on your menu and the positions are adjusted for that, and then the menu goes to two lines because you add things to it, the layout blows up and you have to go in and adjust the padding, margins and positioning for the various elements. It's not that it cannot be done, it is just that you need to be aware that there are pitfalls.
Thanks for the reply thesacredpath, it was very much appreciated. I will check those out when I get off work!
With regards to the menu relocation, I don't plan on ever having the menu as 2 lines, because I personally find it messy. I really liked the 'under the influence' theme where it had the menu underneath the header image, since this was easier access than scrolling back all the way to the top. If not having two lines of tabs is the only 'downfall', then I would be very much interested in how to do this!
Thanks again.
since I can't test the codes you've given at the moment, does the
.post-entry {<br />
width: 95%;<br />
}
apply to the front page & archive pages for posts as well, or just the actual post itself? if not, how do I apply changes to those too?
Same question for actual PAGES?
Thank you!
okay, so front page & archives are now full width with tags moved, thank you!
I was a dummy and didn't realize pages weren't affected by tag positioning.
However, I do have another question.. now that the posts are 'full width', how do i bring the comment box & author description to the left to align them with the post content? (rather than their current position, which is aligned with where the content was prior)
Static pages have their own selector that overrides the .post-entry width. The .post-entry 95% width and the moving of the tags will be for all post related pages.
Thanks TSP,
Could you please help me with the CSS for moving the menu to below the banner image?
Also, I tried to increase the page width as well by using the following, but I guess it doesn't work like that?
.page-entry {<br />
width: 95%;<br />
}
Finally, how do I increase the width of the Author, Like, & Comment areas now that the post is using full-width? I tried looking at the CSS for chateau, but there were too many elements for comments and such to understand!
Your assistance is much appreciated!
I've made a couple of tweaks to some stuff and I've also aded the stuff to move the like and sharing stuff over to the left as well, so replace what you had before with the following.
.post-content {
position:relative;
padding-bottom:70px;
}
.post-extras {
position:absolute;
bottom:15px;
width:100%;
float:left;
text-align:left;
left:15px;
padding:0;
}
.post-extras p,.post-extras strong {
float:left;
}
.post-entry,.page .page .post-entry {
width:95%;
}
#comments #respond,#nav-below,#content #wpl-likebox,.nocomments,.nopassword {
padding-left:2%!important;
}On the author, are you talking about where it says "Posted by username in category" below the post titles?
For moving the menu, give this a try.
#page {
position: relative;
}
#branding, #main, #footer-inner-inner, #copyright-inner-inner {
margin-top: 40px;
}
#menu {
position: absolute;
top: 360px;
}Hi TSP,
Thank you very much for the help with the pages, they work perfectly!
If a user has a gravatar profile description, chateau will actually use that description and do an 'about authorname' w/ description & link to author's archive at the end of each post he/she writes. This is what the 'author' is (currently not full-width?)
With regards to the rest of the shift, it seems that the 'like' button and users that liked the post has taken up the space to the left correctly, but the comments themselves have not taken up the full width either.
As for the menu, is there a way to... encase it between two lines (such as the one in between the title and the banner image)? In addition, the menu appears to shift position when logged in compared to not logged into wordpress, since I guess that the wp menubar changes its position in some form? Is there a way to fix this so it appears in a set position below the banner when both logged in, as well as logged out? (like the default menu) Also, I'd like to remove the line between the title and the banner, here's a mock-up image from a screenshot edited in paint:
Thank you again, I know this is a lot of questions!
The menu shift was something I was sort of concerned about. Let me see if I can fix that. On the Author thing, I'll have to activate that on my test blog as it is not showing up. I'll also have to add some comments so that I can adjust them as well.
Let me work on it a little.
I'm not seeing the menu shift when logged in and logged out, but I made an adjustment. Also I'm not sure what browser you are using. I've checked in Safari, Opera and Firefox and don't get the menu shift between logged in and logged out. As I said though, I did make an adjustment. The comments have been adjusted. The menu now has a top and bottom border line to match the styling on the other borders. The border line above the header image is now gone as well.
On the author thing, I cannot get that to appear on my test blog at all. I've checked all settings and its not showing up. I did however look on another site that is using Chateau and the last bit in the code below I worked out off of her site. Hopefully it aligns properly on your site.
Remove all the stuff I have given you in the above replies and replace it with the following which is fresh out of my test blog. I've made a few tweaks here and there.
.post-content {
position:relative;
padding-bottom:70px;
}
.post-extras {
position:absolute;
bottom:15px;
width:100%;
float:left;
text-align:left;
left:15px;
padding:0;
}
.post-extras p,.post-extras strong {
float:left;
}
.post-entry,.page .page .post-entry {
width:95%;
}
#comments #respond,#nav-below,#content #wpl-likebox,.nocomments,.nopassword {
padding-left:2%!important;
}
#branding {
margin-top:40px;
position:relative;
}
#main {
margin-top:75px!important;
}
#main-image {
border-top:medium none;
}
#menu {
border-bottom:1px dotted #EEEEEE;
border-top:1px dotted #EEEEEE;
position:absolute;
top:350px;
width:96%;
padding:10px 0 0;
}
#menu > ul > li {
margin-bottom:10px;
}
#comments li {
margin-left:2%;
}
#comments h3 {
margin-left:10%;
}
#author-info {
padding-left: 2%; !important
}Hey TSP, you're a genius! Everything works perfectly!
I figured out the 'menu shift', i was logged into FF, while also viewing my blog unlogged in from chrome. The menu shift was not actually due to the login, but that FF renders the 'Go' button to appear UNDER the search box, taking up its own line and shifting everything else downwards. Is there a way to fix this? I'm using Firefox 5.0
Thank you,
I just activated the Chateau theme on a wordpress.com hosted blog choiceindying.com. The blockquote command doesn't work in the comments. Is there anything I can do, or should I just choose another theme?
The blockquote thing in Chateau is a bug. Please post this in the themes forum. This thread is not only resolved, but about CSS issues. The theme team monitors the themes forum and will look into it if you post there.
Thank you. I'll do that, although I've changed the theme anyway.
You are welcome. Staff should be alerted to it anyway since they need to fix it.
This topic has been closed to new replies.
kunststerbens
