Magazine Style Home Page Posts for Thesis Theme 2.0

Recently I add more Thesis Theme 2.0 tutorials for Thesis Theme 2.0 users.

In thesis 1.x default, you will get magazine style posts in home page(2 column teaser). But in Thesis 2.0 you didn’t get that default Magazine style posts in home page.

Now I am going to show you, how to get magazine style home page posts in very simple steps with 2 line code.

Let’s see the procedure to get magazine style.

Steps

  • First go to Thesis skin editor section
  • Then create one new container via Thesis Add Box section
  • Then click on that container and go to HTML class section
  • Then type this class magazine-post-box (refer below image)

magazine-container

  • Then add that container as per below image

magazine style

  • Then save your template and go to css section
  • Then select single element styles package and click add package button
  • Then configure that package as per below image

magazine-package

  • Then go to additional CSS section and paste the following code as per below image

magazine-package-save

.magazine-post-box .post_box {
    float: left;
    width: 280px;
}
  • Width may be vary as per your column width
  • Then save your package
  • Then add this refer code &magazine-post-box to Skin CSS section (refer below image)

magazine skin css

  • Then click on Save CSS button
  • Now check your site, you will get magazine style home page posts.

OUTPUT

Thesis 2.0

We will be providing more Thesis Theme 2.0 Tutorials and Thesis 2.0 Boxes, so don’t miss those tutorials and Boxes, subscribe below box

We launched Thesis Skins for Thesis Theme 2.0., if you have time, visit our Thesis Skins page.

If you have any doubt regarding this tutorial, feel free to ask me via below comment box.

If you like above tutorial, share with your friends via following social media options.

Leave a Comment

  • Abhijit Guha June 3, 2013, 12:19 pm

    followed your guide but didn’t work, I am using 2.0 please help

    • admin June 26, 2013, 6:12 am

      Hi,

      Give your site name. i will check and inform u..

  • Ana March 15, 2014, 2:26 pm

    Hi, this doesn’t work for me.
    I’ve done everything, but I’m not sure where to post the refer code CSS in the final step.
    I’ve pasted it first, on the skin css page, but nothing happens.

    • admin March 17, 2014, 5:25 am

      Hi,

      Give your site name.. i will check..

  • Ricardo June 20, 2014, 3:23 pm

    Hi,
    I managed to make it work on my site. It works great. One question : how can i reduce the size of the headline font inside the magazine home post box ?
    Right now it´s ( font-size: 26px; line-height: 40px ) – it´s the size from the headline thesis.

    <h2 class="headline" itemprop="name"

    Thanks for the help,

    Kind Regards,

    Ricardo

    • admin June 21, 2014, 4:02 am

      Hi

      paste the following code to thesis custom css section. in below code you can change the font size as per your wish..

      .grt .headline {
      font-size: 22px;
      line-height: 30px;
      }

      • Ricardo June 21, 2014, 10:53 pm

        Hi,

        thanks, but in this way , all headline will be impavted. I just want the frontpage and inside
        the magazine home post box .
        Thnaks in advance,

        Kind regards

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.