Docs

[tashitendrel]

Hello again,

The blog I am creating will be actually featuring ebooks to download, so all the images are vertical, not horizontal, and they look huge in the posts. Is there a way to display book cover on the left and TITLE as well as the rest of the content floating to the right?
And to have a similar look on blog pages previews?

First I was trying to edit the whole post in Cornerstone, but then I realised that it doesnt work the same way as WordPress composer – it would be great it you could add such functionality in the future!

thank you
http://dharmaebooks.hornet.pl/ལས་བྱང་།-14/

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (min-width:767px){
.single-post .entry-featured {
    width: 40%;
    float: left;
    margin: 2%;
}
.single-post .entry-wrap {
    padding-top: 5px;
}
}

We’re sorry but you can’t change featured image position in cornerstone.

Hope that helps.

[tashitendrel]

Thank you for this, it works in a way for single post, but doesnt solve the problem with previews on Blog and Category pages.

So, I have found another solution on the forum, which may work better for me, but is still not ideal:

/* Hide Featured Image on Single Post Page */
.single-post .entry-featured {
display: none;
}

/* Columnize Post with Featured Image */
@media (min-width: 768px) {
body:not(.single-post) .has-post-thumbnail .entry-featured {
float: left;
width: 40%;
box-shadow: none;
border: none;
}

body:not(.single-post) .has-post-thumbnail .entry-wrap {
float: left;
width: 60%;
padding: 30px 30px 30px 40px;
}

body:not(.single-post) .has-post-thumbnail {
overflow: hidden;
padding: 20px;
}
}

I have put this to my css and you can see the results: http://dharmaebooks.hornet.pl/category/layjang/

1.
I think, if we could also hide post title from single post – than I could edit the whole post in Cornerstone, and this was my goal!

2. I have put some text to the post’s excerpt, which works ok, but now image, texts and tags float each one in a different way. Tag jumps up and down, depending on the screen size – and this doesnt look good. So maybe there is a way to change the above CSS to place the image in the container?

[Rahul]

Hi there,

We’d like to appreciate your work which you have tried recently. We’re working to bring the right CSS with which you can easily change the direction, size and other things of an image to your post. Kindly wait for a while until we are done with the solution.

Thanks for the cooperation!

[tashitendrel]

I appreciate and I’m happy to wait for a code that will work. thank you.

[Lely]

You’re welcome!

Cheers!

[tashitendrel]

Hi there,

I hope my case was not closed and forgotten. I was off line for a few days and I hope that we could still find some solution for displaying posts previews with images on the left on blog and category pages.

Here is what I have in my css now:

* single post*/
@media (min-width:767px){
.single-post .entry-featured {
width: 40%;
float: left;
margin: 45px;
}
.single-post .entry-wrap {
padding-top: 45px;
}
}

/* Columnize Post with Featured Image for category pages */
@media (min-width: 768px) {
body:not(.single-post) .has-post-thumbnail .entry-featured {
float: left;
width: 40%;
box-shadow: none;
border: none;
}

body:not(.single-post) .has-post-thumbnail .entry-wrap {
float: left;
width: 60%;
padding: 30px 30px 30px 40px;
}

body:not(.single-post) .has-post-thumbnail {
overflow: hidden;
padding: 20px;
}
}

I think what Christopher proposed for single posts will work for us and I have adjusted the paddings. Here is example: http://dharmaebooks.hornet.pl/ལས་བྱང་།-14/

But the css for category pages is not doing what we want:http://dharmaebooks.hornet.pl/category/layjang/
We want to have something looking similar to the single post page, except that text will be shorter and placed in excerpt. With image on the left inside the container.

Hope something could be done about. If someone is actually working on it and I should just wait a bit longer, than please let me know.

[Christopher]

Hi there,

Please remove this code :

body:not(.single-post) .has-post-thumbnail .entry-featured {
    float: left;
    width: 40%;
    box-shadow: none;
    border: none;
}

Find this code :

.single-post .entry-featured {
    width: 40%;
    float: left;
    margin: 45px;
}

And update it to :

.blog entry-featured .single-post .entry-featured {
    width: 40%;
    float: left;
    margin: 45px;
}

Hope it helps.

[tashitendrel]

Hi, I did it now and unfortunately it doesnt help and photos went up on top – on both single post and blog…

[Christopher]

Hi there,

I’m sorry, I made a typo mistake.
You should add this code :

.blog entry-featured, .single-post .entry-featured {
    width: 40%;
    float: left;
    margin: 45px;
}

Thanks.

[tashitendrel]

Hi,
now the single post looks again as it should but not when featured on blog…

[Darshana]

Hi there,

There’s a Typo in the above code. entry-featured needed a dot in-front. Then it should work on your blog page also.

Here’s the corrected code:

.blog .entry-featured, .single-post .entry-featured {
    width: 40%;
    float: left;
    margin: 45px;
}

Hope that helps.

[tashitendrel]

Thank you! Dot it was…
And I’m sorry to bother you with this again, but I have noticed that the code doesnt include category pages. Single post and the main blog page are now changed, but category pages look as before – with image on top.
Can we include category pages somehow?

[Darshana]

Hi there,

Sure, you can do that also. Please update the above code as follows.

.blog .entry-featured, .single-post .entry-featured, .category .entry-featured, .archive .entry-featured {
    width: 40%;
    float: left;
    margin: 45px;
}

Hope that helps.

[tashitendrel]

I’m sorry, I really dont know, what I’m doing wrong. This is the whole code I have now and the single post displays properly, while on category and blog pages I think it looks like on mobiles. This is category page: http://dharmaebooks.hornet.pl/category/layjang/

/* posts with image on the left*/
@media (min-width: 768px){
.blog .entry-featured, .single-post .entry-featured, .category .entry-featured, .archive .entry-featured {
width: 40%;
float: left;
margin: 45px 45px 15px 45px;
}
.single-post .entry-wrap {
padding-top: 50px;
}
}
@media (min-width: 768px) {
body:not(.single-post) .has-post-thumbnail .entry-wrap {
float: left;
width: 60%;
padding: 30px 30px 30px 20px;
}
body:not(.single-post) .has-post-thumbnail {
overflow: hidden;
padding: 20px;
}
}

Please help. I feel like in the fog right now. It looked OK untill I realised that I was copy/pasting without this top line: @media (min-width: 768px){ which made tabet and mobile view unresponsive. But after adding this line, I have a different view on single post and category/blog…

[Author]

Posts