How To Customize Design like this NewsPaper based site?

Hey all, wondering if in the future there will be some tutorials on customizing your themes like the folks at YouBeauty have done. http://youbeauty.com

Also, how do we get the posts to have a layout like seen here: http://www.youbeauty.com/life/self-control-under-pressure/ where the author and share buttons at top float in one area, the related posts have that layout? Any tutorials or tips on how to achieve something like that?

Also for each category page, how would we put custom images at the top (see their example)? Would we have to build a page for ourselves so it act as the category archive then place the image there and use posts grid?

Overall, I really love the way YouBeauty has customized the NewsPaper theme, but wondering if there is anyone here that can offer tutorials or insights on anything similar.

Hi

The site you indicated have our theme but with lots of customization, here are a few tips:

To get the social sharing top on the same line with the author name you need to edit the file which correspond with the post template used, and move the indicated line in meta info container like here: http://screencast.com/t/kndbkTivLDaj then add this custom css in theme panel > custom css: http://screencast.com/t/0Lg6ehz0

.td-post-sharing-top{
display: inline-block;
    margin-left: 10px;
}

On the indicated site the category pages have disabled content top: http://screencast.com/t/uH1xkMfmQY
The theme doesn’t have an option to add a different banner image for every category, but you could achieve that by adding a set of condition in category.php file like here: http://screencast.com/t/xkOcUuRK13re

<div class="top-baner">
            <?php if (is_category('business')) {
                echo '<img src="http://localhost/wp_11/wp-content/uploads/2015/06/p1.jpg" alt="Smiley face" height="200" width="1042">';
            }
            elseif (is_category('vogue')) {
                echo '<img src="http://localhost/wp_11/wp-content/uploads/2015/06/p1.jpg" alt="Smiley face" height="200" width="1042">';

            }?>
      </div>

You must add a condition for every category and set the image which you want to display. You may need some other customization for this and if you don’t know how to do it youself my advice is to look for a developer from sites like: http://studio.envato.com/ as we cannot ofer any type of custom work at the moment.

Hope this help!

Thanks!

• This reply was modified 10 years by Andrei L..
• This reply was modified 10 years by Andrei L..

Thank you Andrei! That will set me up for a good start and I definitely will see if I can find a good developer for any other customizations I’d want to do to the theme. 🙂