Docs

[Olivia S]

Hello –

I am using Renew (again… :-)) for a new site I am building fashioned after a stack/content collection.

As usual, I am using a child theme to make my customizations there. The Renew stack gets me 90%+ of where I want to be functionally and stylistically. I would like to do the following:

1. Have the blog category and index display the thumb and excerpt as styled in the Ethos Demo Theme: http://demo.theme.co/agency/news/. I don’t want the meta data (which I have excluded on my site) and I like the border that Renew places on the thumb/featured image. See the attached image, as this is the way in which it is currently displaying. All I want to do is adjust the image size and get rid of the wrap – float the image left and the title and excerpt right. Where in the PHP and/or CSS can I do this?

Thank you in advance.
Olivia

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Olivia S]

This reply has been marked as private.

[Olivia S]

420stack.com

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media only screen and (min-width: 767px)
.blog .entry-featured, .archive .entry-featured {
    float: left;
    width: 25%;
    margin-right: 2%;
    border: 0;
    width: 40%;
    padding: 0px;
}

.entry-content.excerpt p {
    margin-top: 10px;
    text-align: justify;
}

.entry-title {
margin-bottom: 10px;
}
}

Hope it helps

Joao

[Olivia S]

Thanks, I edited the global css, but that didn’t do a thing… take a look at the following: http://420stack.com/resources/books/. It isn’t an archive by date, but by category.

[Rad]

Hi there,

Please change that CSS to this,

  @media (min-width: 767px) {
.blog .entry-featured, .category .entry-featured {
    float: left;
    width: 25%;
    margin-right: 2%;
    border: 0;
    padding: 0px;
}

.blog .entry-content.excerpt p, .category .entry-content.excerpt p {
    margin-top: 10px;
    padding-left: 29%;
    text-align: justify;
}

.blog .entry-title, .category .entry-title {
margin-bottom: 10px;
padding-left: 29%;
}
}

You can change image size by changing width: 25%;, but you should also change padding-left: 29%; as it the one pushing the text and removing the wraps. The formula is image width + 4 % (eg. 25% + 4% = 29%).

Cheers!

[Olivia S]

This is great, and got me 90% of the way there…
Looks like if I enter content in the post itself via Cornerstone, the copy/excerpt/post is not displaying. Entered outside of cornerstone and it does display.

A couple more refinements:
1. how do I align the top of the image with the Title top?
2. reduce the size of the display of the featured image in the post itself. I want it much smaller. I can work out the size.

Thanks and Happy Holidays!

[Rue Nel]

Hello There,

Thanks for updating in!

1] To align the image with the title, please have the custom css code updated and use this instead:

@media (min-width: 767px) {
  .blog .entry-featured, .category .entry-featured {
    float: left;
    width: 25%;
    margin-left: 0 !important;
    margin-right: 2%;
    border: 0;
    padding: 0px;
  }

  .blog .entry-content.excerpt p, .category .entry-content.excerpt p {
    margin-top: 10px;
    padding-left: 29%;
    text-align: justify;
  }

  .blog .entry-title, .category .entry-title {
    margin-bottom: 10px;
    padding-left: 29%;
  }
}

2] How small you want the image? Do you want to display the full image with it’s original size? please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.single-post .entry-thumb {
    text-align: center;
    background-color: transparent;
}

.single-post .entry-thumb img {
    min-width: 50%;
    max-width: 100%;
    margin: 0 auto;
}

You can also limit the width of the image by setting the maximum width to a fixed number of pixels.

We would loved to know if this has work for you.

Warmest Greetings of the Season!

[Olivia S]

I applied both changes. Please check out the following:

#1 Looks like the only difference from the previous code was the inclusion of the line margin-left: 0 !important; in the first section. It doesn’t look much different to me. I want the top of the thumbnail to align with the top of the title. So on the following page, http://420stack.com/resources/books/, the top of the image should align with the top of the title, Test 1.

#2 This was very helpful – I like the styling of the images with the border and padding by default in the stack. How do I deal with keeping the border and padding in sync with the image size? See here: http://420stack.com/test1 I would also like to tighten up the spacing between the featured image and the copy.

Thanks for your help and happy holidays!

[Joao]

Hi THere,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[Olivia S]

This reply has been marked as private.

[Nabeel A]

Hi again,

1. Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.archive .entry-featured {
    position: absolute !important;
    top: 0 !important;
}

2. Please find and remove the following code from your Customizer:

.single-post .entry-thumb img {
    min-width: 75%;
    max-width: 200px;
    margin: 0 auto;
}

And then add the following code:

.single #x-section-1 {
    padding: 0 !important;
}

Let us know how this goes!

[Olivia S]

Again, thanks for the quick reply. So I made the changes.

#1 is great, I just need to tweak the spacing between the title and the excerpt.

#2 is not quite right. The goal was to make the featured image smaller AND keep the consistent boarder/padding around the image.

[Olivia S]

adding the following in stacks all the thumbnails on top of one another on the archive pages

.archive .entry-featured {
position: absolute !important;
top: 0 !important;
}

[Author]

Posts