Moving tags on Chateau theme
-
Hello,
I would like to move (not hide) the tags and the edit button from the side of the blog to the bottom.
By doing this I am hoping that the main area will be just 2 columns – the body of the post and a narrower column for the widgets.
I would like to do this because it would give way more room for the post hence making the photos larger.
Is this even possible?
I am completely new to CSS and need as precise instructions as you can give me please.
Thank you so much
AlisonThe blog I need help with is: (visible only to logged in users)
-
Hi Alison, due to the way the HTML and CSS are structured in Chateau, we can move the tags down below the sharing stuff at the end of your posts pretty easily, but it is difficult to move it above the sharing stuff since the sharing stuff, and the metadata (tags, etc.) can vary in length. In some instances in the future, it may mean that there may be some overlap between sharing and the tags, depending on how many tags you have, and how many likes you get on a post. Give the following CSS a try.
.post-content { position: relative; padding-bottom: 170px; } .post-extras { position: absolute; bottom: 0; width: 100%; } .post-extras p, .post-extras strong { text-align: left; float: left; }Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the above custom CSS.
-
Thanks so much for your help.
Just to clarify – by sharing stuff I take it you mean all the share buttons and the ‘like’ button.
I would be quite happy for the tags and edit button to be in one line below the sharing stuff, or even below the ‘Related’ posts stuff, and before the comments. As long as they show somewhere, and are fairly inconspicuous, and most importantly, allow me to have only 2 columns in the main body of the post – one large one, and one small one.
Will the code you’ve given me do that?
This is a link to a post on a test blog I created to test out a new theme.
https://alisonanddon2.wordpress.com/2015/05/30/tiruvannamalai-india-part-7/
I hope you can see it since I’ve marked it private.I’m running twenty twelve theme on this blog and the way the tags and edit button are on that theme are what I’m going for. They are under the ‘like’ button, so presumably under all the sharing stuff too.
Of course I don’t need a new theme if I can make some adjustments to the one I have.
Thanks so much. Off now to play with what you’ve given me and see how it goes.
Cheers
Alison -
Okay I tested the code, and we’re part way there I think.
I’m very happy with the location, and style, of the edit button and tags at the bottom underneath the sharing stuff.
Please can you now make the main body of the post have only 2 columns so the width of the text and photos can spread out. The thing I want most is to get rid of the left hand third column ( that contained the tags and edit button) so there’s more room for the photos to be bigger.
Thanks so much
Alison -
Sorry, I forgot to widen the content. Let’s use this instead of what I had give. Notice the .single at the beginning of the CSS selectors. That is a body class which we can use to limit this change to only the single post pages so that we don’t inadvertently mess up another page type.
.single .post-content { padding-bottom: 170px; position: relative; } .single .post-extras { bottom: 0; position: absolute; width: 100% !important; } .single .post-extras p, .single .post-extras strong { float: left; text-align: left; } .single .post-entry { width: 100%; } -
Thank you! This is exactly what I want. I’m so happy :)
But of course there are a few glitches:
All photos with captions don’t expand to fill the space. I never used to use captions because they always affected the spacing of the text immediately following. Recently I found a work-around for this using spacing code so the most recent four (or so) posts have photos with captions and none of them expanded to fill the new space available.I’ve been sizing my photos in the same way for years (72 ppi, 1200 pixels wide for horizontal photos, and 800pixels high for vertical). It seems that most of the vertical photos are not expanding to fill the space. I’m not sure what is best here. The ones that have expanded are a little big and will need resizing anyway, so perhaps I just have to go through and resize all the vertical photos unless you have some magic piece of information for me as to why they don’t expand to fill the space.
Thank you so much
Alison -
We can force the image to go full width. It is currently being constrained by the caption section, so add the following and it should take the image full width. I’ve widened Chateau a number of times and don’t remember running into this. Perhaps none of the other sites had captions.
.wp-caption { width: 100% !important; } -
-
Yes, It worked perfectly.
Thank you very much for all your help. I spent days trying out new themes and nothing was quite right, but in the process I learned about CSS.
It’s exactly what I wanted. So thesacredpath Happiness Engineer – thank you. I’m very happy :)
I’ll be doing more test runs on different posts over the next few days so I’ll get back to you if any weirdness shows up, but I don’t expect it will.
Alison
-
Hooray, Happiness is always what I aim for. If you need further assistance, you know where we are. :)
-
Not happy :(
Today I saved and published the CSS changes, and all seemed to work fine.
However later I discovered that the blog opens with the old format.
The blog is set up so that it opens at the latest post. Now when I open the blog it shows the latest post in the old format. It is only when I go from that to an earlier post that posts are displayed in the new format.
Readers of the blog mostly open it when there’s a new post and what they will see is the old format :(
They will only see the new format if they happen to click on an earlier post.
Hope you can help.
Thanks
Alison -
@alisonanddon, sorry, I misunderstood and thought you only wanted to do it on single post pages. Remove .single and the trailing space from the rules I had given to have this change work on all pages, including your main page. It should look like this:
.post-content { padding-bottom: 170px; position: relative; } .post-extras { bottom: 0; position: absolute; width: 100% !important; } .post-extras p, .post-extras strong { float: left; text-align: left; } .post-entry { width: 100%; } -
Thank you. Happy again :)
I didn’t really understand that since my home page is the same as my “latest post” page that it would be excluded from the changes unless you made the changes to all pages. Anyway it’s all perfect and wonderful now.
Thank you
Alison -
-
Something very weird is happening and I don’t know if it’s to do with the CSS changes or if WP is having glitches this morning.
Neither my husband nor I received email notification when I published a new post this morning even though (since we both follow the blog) we usually do.
Several people have ‘liked’ the new post but I have only received email notification of one of them.
There has been one comment so far and my husband received email notification of it, but I did not.
Since we didn’t get email notification of the new post I’m naturally wondering how many other followers also didn’t receive notification.
Hope you can shed some light on this.
Thanks
Alison -
-
-
Hello again
I’ve been getting complaints that a small part of the left side of both words and photos is not visible on iPads. Is it possible to fix this?
Thanks so much
Alison -
In your custom CSS, try changing this:
.single .post-entry { width: 100%; }to this:
.single .post-entry { width: 96%; } -
Hmmmm . . . . . . . I’m wondering why the .single is there when I want it to apply to all pages
- The topic ‘Moving tags on Chateau theme’ is closed to new replies.
WordPress.com Forums 