Display post meta in Single post page on top of post

[taiger]

Hi I would like to move the Display post meta in Single post page from displaying on the left to displaying on top of the post.

CAn you tell me how we can do this.

T

[Laura]

Hello, this can be done with css
Here are different styles (check attachment):
STYLE 1

COPY CODE

article .article-meta {
  width: auto !important;
  float: right !important;
  text-align: center !important;
}
article .article-meta .post-meta .meta-author {
  float: none !important;
}
article .article-meta .post-meta .meta-author img {
  float: right !important;
  margin-right: 46% !important;
}

STYLE 2

COPY CODE

article .article-meta {
  width: auto !important;
  float: none !important;
  text-align: right !important;
  margin-right: 5% !important;
}

Add the style you want to quick css or style.css of child theme

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

style 2, used but it did not look like your pic. see below

[taiger]

we would like the meta to be bigger, and below the share stuff

[Laura]

Hello, please share a link so i can create a css code for you 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

http://www.5starweddingmagazine.com/blog/84214/lyn-ashworth-by-sarah-barrett-to-be-loved-bridal-collection.html

[Laura]

Hello, sorry i am not able to view the page i get this message “We are having a make over”

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

Can I suggest this option on a new release.

regards Tai

[Laura]

Hello, its just a matter of a css change, that maybe others wouldnt want in a release, i can do it for you if you give me access to your website 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

Hi thanks for getting back to me.

Please see past questions for the ftp info.

Please also let me know where the changes have been made. .just in case I need to revert.

Regards.

[Laura]

Hello, i do not know what child theme are you using, but you can place this css in style.css of your current child theme

COPY CODE

article .article-meta .post-meta small {
  font-size: 14px;
}

You can change 14px for the size that you want 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

Hi when i added the above codes, it still moved the text block in, so that i was not getting the full text and image.

[Laura]

Hello, can you share a screenshot please? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

Hi, here is the screen shoots with meta on and off, with it turned on you can see that the size of the post/image is reduced – with it meta/date turned off the image returns to the desired size.

[Laura]

Hello, can you turn it on and link me to the page so i can adjust the size with css? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

Hi turn what on… The site is open

[taiger]

http://www.5starweddingmagazine.com/wp-admin

[taiger]

oh i see, one moment

[taiger]

Hi I have turned it on x

[Laura]

Hello, thanks! will fix this in some minutes…
Will let you know

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Laura]

Hello, fixed! Everything is in your quick css
CSS Used:

COPY CODE

article .article-meta {
  width: auto !important;
  float: left !important;
  text-align: center !important;
  margin-left: 310px !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

Hi Laura, thanks for the fix!

Tested it on the mobile and it is ideal… So much white space on the header.

The date really needs to be integrated in a much better way.

I have some social media buttons on the top, the date should be below the buttons!

Ahh

[taiger]

sorry here is the correct pic

[taiger]

you can also see the date effect on this page..

http://www.5starweddingmagazine.com/luxury-honeymoon-and-travel/

[Laura]

Mhm i see it, dont worry will fix it now 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Laura]

Hello, changed the view, how does it looks now? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

Hi the position is better, but if you notice the way that it renders is strange… it’s like it appears after the content, then the date sits in the first paragraph of the text before it then jumps in to position. It should just be in the correct position and not need to come in last … does that make sense.

Tai

[taiger]

see pic

[taiger]

also see here with the social media plugin turned off

[Laura]

Hello, it depends on the social media position so shouldnt be turned off, what is your screen size? Will check out the css for your screen

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

I have an imac 2560×1440. but the date/meta show work on any screen size?

can you sen a screen shot of the two default positions.. (inline under title)

Thanks

[taiger]

Any thoughts on this.. we are looking to go live this week

[Laura]

Hello, fixed, how does it look now?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Laura]

The css is not working fine, do you have a cache plugin setup? Please add

COPY CODE

.w2dc-listings-block-content {
        width: 100%;
}
.container img {
  height: auto !important;
 }
@media screen and (max-width: 700px) {
#header .header-banner {
display:none;
}
}
header.w2dc-listing-header h2 a, header.w2dc-listing-header h2 a:visited {
    font-weight: normal;
}
.w2dc-categories-root {
    font-weight: normal;
}
div.w2dc-content .w2dc-fields-group {
    margin-bottom: 40px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 70px;
}
div.w2dc-content .w2dc-fields-group .w2dc-fields-group-caption {
    font-weight: normal;
}
.w2dc-big-slide {
  background-position:50% 50%;
  background-repeat:no-repeat;
  background-size:cover;
  overflow:hidden;
  text-align:center;
}
.w2dc-big-slide-wrapper {
  background:none 0 0 repeat scroll #FFFFFF;
  border:5px solid #FFFFFF;
  box-shadow:#ffffff 0 0 5px;
  margin-bottom:20px;
  overflow:hidden;
  transform:translateZ(0px);
}
.wp-caption {
background-color:transparent !important;
}
img.alignleft, img.alignright, img.aligncenter {
    margin-bottom: -12px;
}
.w2dc-content.w2dc-search-form {
  border-radius:0px;
  margin-bottom:20px;
}
.w2dc-content .w2dc-btn {
  -webkit-user-select:none;
  background-image:none;
  border:1px solid transparent;
  border-radius:0px;
  cursor:pointer;
  display:inline-block;
  font-size:14px;
  font-weight:normal;
  line-height:1.42857143;
  margin-bottom:0;
  padding:6px 12px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
}
.w2dc-search-section-label {
  font-family: "Open Sans Condensed",Arial,Helvetica,sans-serif;
  font-size: 1.7em;
  text-shadow: 0 1px 1px #000000;
  font-style: normal;
  line-height: 2em;
border:1px solid transparent;
  border-radius:0;
  line-height:1.42857143;
  margin-right:2px;
}
.vc_separator h4 {
  display:table-cell;
  font-size:20pt;
  line-height:1em;
  white-space:pre;
}
main-color *::-moz-selection {
    background-color: #000000;
    color: #ffffff;
}
.alternate-color .kleo_ajax_results h4 span {
    background-color: #000000;
}
#main .main-color h1, #main .main-color h2, #main .main-color h3, #main .main-color h4, #main .main-color h5, #main .main-color h6 {
    color: #666666;
}
.vc_separator h4 {
    display: table-cell;
    font-size: 18pt;
    line-height: 1em;
    white-space: pre;
}
.w2dc-content {
  font-size:16px;
}
.w2dc-search-section-label {
    font-family: "Open Sans Condensed",;
    font-size: 1.5em;
    font-style: normal;
    line-height: 2em;
    text-shadow: 0 0px 0px #000000;
}
.single .container .with-meta .article-content, .posts-listing.standard-listing.with-meta .article-content {
  margin-left: 0px !important;
}
article .article-meta {
  width: auto !important;
  float: left !important;
  text-align: center !important;
  margin-left: 240px !important;
}
.entry-content .dropcap {
    color: #e977af;
    float: left;
    font-size: 5.71429rem;
    line-height: 0.75;
    margin-top: 6px;
    padding-right: 0.857143rem;
    text-transform: uppercase;
}
.posts-listing.standard-listing.with-meta.inline-meta .article-meta .post-meta {
  float: right !important;
  margin-left: -100px;
}
.template-page.col-sm-8.tpl-right.with-meta .article-meta {
  margin-top: 0px !important;
  position: absolute;
}
div#shr_canvas2 {
  padding-bottom: 50px;
}
@media (max-width: 991px) {
.template-page.col-sm-8.tpl-right.with-meta .article-meta {
  margin-left: 110px !important;
}
}
#main-container .article-content {
  padding-top: 50px !important;
  float: none;
  width: auto;
  border: 0;
  background: transparent;
}

To your style.css

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

Hi thank you so far. We are still not happy with the way the meta displays, it position is rather random and would be great id it was integrated better.

We are now live, and i had to disable it until we can get a fix 🙂

[taiger]

Hi, we have decided to use a different website dimension, and will leave the meta date on the left.

We noticed that when we enabled the social icon on the top of the post there is a massive gap on the top.

Can you reset the meta to its original default. to avoid issues in the future.

ps. i tried removing all scripts in the css. but it did not change the big gap issue.

Thanks for your help

[taiger]

sorry can you also take a look at the footer, there is box and i do not know where it came from. left hand side..

[taiger]

PS, the last issue has been sorted. Posts: 135

[Laura]

Hello, go to Theme Options > General, scroll down to find quick css, there you can disable the codes 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[taiger]

thanks done xoxo

[Author]

Posts