Moving meta tags to below the header

zolberginstitute · Member · Jan 9, 2017 at 7:13 pm
Copy link

Add topic to favorites
Hi,

I’m having a lot of trouble in the Publication theme moving the tags on my articles (div.entry-meta) from above the title to below it. It looks like in the code it is grouped in with the article and nestled within the header, but I can’t get it to move below, just below h2.entry-title.

Any help is greatly appreciated.

My second question is how to change my articles to be in a more table-like format, so that a featured one will take the standard width, and others would be exactly half that size, in a sort of pattern like this:
```
<table><tr><td>BIG POST HERE</td></tr>
<tr><td>Smaller post</td>
<td> Smaller post </td> </tr></table>
```
And so on, and so on.
Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 10, 2017 at 12:55 am
Copy link
Hi there, this will change the front page, category, tag, archive and single post pages and put the categories below the titles. One thing I’ll mention though is that the following code is not supported on older browsers, and on Internet Explorer, only version 11 and later, which is the current version I believe. Microsoft always seems slow to support CSS3 features.
```
.entry-header {
	display: flex;
	flex-direction: column;
}
.entry-header .entry-meta {
	order: 2;
}
.entry-header .entry-title {
	order: 1;
	padding-bottom: 20px;
}
```
On the article formats, I’ll have to work on that a bit to see what I can come up with. It isn’t always easy to make a post listing into two columns.
thesacredpath · Member · Jan 10, 2017 at 7:40 pm
Copy link
@migrationforumblog, looking at your CSS, you appear to have change widths on a number of page elements. Can you explain to me what you want for your desired layout? To do two columns of posts, I’m going to have to take out some of your CSS, or at least change it.
zolberginstitute · Member · Jan 10, 2017 at 11:54 pm
Copy link
@thesacredpath, Thank you so much for your help! I did change the width of the right-hand page element (with the widgets) because I found it took up too much empty space, space I’d rather fill with a grid of posts. Please feel free to remove and tinker as necessary. Thank you again for the help.
zolberginstitute · Member · Jan 11, 2017 at 12:03 am
Copy link
Ah, I’m seeing that what I did doesn’t quite work out when you click through to the post pages — the posts leak over into the widget area. Basically, I’d just like the widget area to take up about 30% of the page rather than half of it as in the original theme.
thesacredpath · Member · Jan 11, 2017 at 10:37 pm
Copy link
This is quite challenging on Publication. Let me work on it and hopefully I can post a solution for you by tomorrow (Thursday).
zolberginstitute · Member · Jan 18, 2017 at 5:00 am
Copy link
Hey @thesacredpath, any ideas? I’m also looking to move the menu from a slide-menu to a regular one just going across the top (more pressing than a grid of posts). Do you think this is do-able or should I move to a different theme?
thesacredpath · Member · Jan 25, 2017 at 9:31 pm
Copy link
Sorry for the delay. First off, remove the margin-left, margin-right and width declarations on your .site-content rule as it is causing the content to not be viewable on smaller screens. It should look like this.
```
.site-content {
	margin:20px auto 0;
	margin-top:20px;
	margin-bottom:0;
}
```
In this rule, remove the order:1; declaration. Order has to be set in the child elements. In the parent you set display: flex and set the column or row direction only. It should look like this.
```
.entry-header {
	display:flex;
	flex-direction:column;
}
```
In this rule, remove the display: flex; That is set in the above CSS rule, and you don’t need to set it in the child. In the child div, you set the order. It should look like this.
```
.entry-header .entry-meta .entry-categories {
	order:2;
}
```
After fixing the above, add the following at the very bottom of your custom CSS. It gives you three columns of posts at 1200px wide and wider, and two columns of posts between 1199px and 900px and then lets things return to the original design below that width.
```
@media screen and (min-width: 901px) {
	.blog .site-main {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
}
@media screen and (min-width: 1200px) {
	.blog .site-content {
		max-width: 1600px;
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none;
		padding-left: 20px;
		padding-right: 30px;
	}
	.blog .site-content .widget-area {
		width: 25%;
	}
	.blog .site-main {
		margin: 0 30% 0 0;
	}
	.blog .site-main .hentry {
		width: 30%;
	}
}
@media screen and (min-width: 901px) and (max-width: 1199px) {
	.blog .site-main .hentry {
		width: 45%;
	}
}
```
amissylife · Member · Feb 3, 2017 at 9:21 pm
Copy link
Hi There,

I’m having a similar issue on my blog amissyllaneouslife.com. I’ve purchased a template that shows the author, categories, tags and comment link at the top of each individual post page (directly under the post title). I’m not happy with the way this looks and have been told there might be a code available for moving this to the bottom of the post page.

I don’t believe the code provided above will give me the exact outcome I’m looking for (I actually tried it and nothing changed, I believe because the request was to put the links in the spot where I am trying to move them away from).

Can anyone help with this minor tweak?? Hoping it’s do-able.

Thank you in advance!!
kathrynwp · Staff · Feb 6, 2017 at 4:15 pm
Copy link
amissylife – CSS is almost always theme-specific, so it’s not surprising the code above didn’t work since you’re using a different theme. :)

Could you please start a new thread so the original poster doesn’t receive email notifications about your issue, and we can help you better one-on-one.

https://en.forums.wordpress.com/forum/css-customization

No items found.