Adaptive Blog Theme: Styling Posts
videos

Adaptive Blog Theme: Styling Posts

on Nov 20th 2012 with 21 comments
Tutorial Details
  • Screencast duration: 36 mins
  • Difficulty: Beginner
  • Topic: CSS
Download Source Files
Demo View It Online
This entry is part 8 of 14 in the Adaptive Blog Theme: From Photoshop to WordPress Session
« PreviousNext »

Last time we finished styling our header section and got the navigation working properly; today we’re going to look at the post listings and the various types of posts we’re making available.

Standard Post Styling


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Quote and URL Post Formats


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.facebook.com/gustavo.soares.984786 Gustavo Soares

    Very good.

    • Adi Purdila
      Author

      If you’re talking about the code editor, I’m using Coda 2 :)

  • Berlin

    I can’t download the videos. The message is:

    This XML file does not appear to have any style information associated with it. The document tree is shown below.

    AccessDenied

    Access Denied

    E1C9ABB964691229

    OY+IamLmQr+3njcohwk8ZJI/meyytNRoR6/J2Qy/GwhKmddR4OVFQ2FtuT1Xuw0t

    What’s wrong?

  • al

    Access Denied on downloading?

    • ianyates

      Sorry guys – the permissions on the files had mischievously reset themselves. I’ve opened them up again so you should be able to grab the videos now :|

  • http://twitter.com/borowskirafal Rafał Borowski

    Love the use of adjacent selector :) Not seen very often (I myself use it hardly ever). As always great work.

  • Sharjeel Hassan

    Dear Adi, How many videos left before WordPress starting??

    • Adi Purdila
      Author

      10 more videos organized in a few posts, I think 4 or 5 :) You can always watch the videos ahead on YouTube if you wish.

      • http://twitter.com/borowskirafal Rafał Borowski

        Will the WP part also be released earlier on YouTube?

        • Adi Purdila
          Author

          Not sure about that, it’s up to Japh over at WPTuts+ to decide on the schedule :)

  • http://laranz.in/ lawrence77

    webdesigntuts+ youtube channel is ahead (+11 of video tuts) of this series??

    • ianyates

      Yep :)

      • http://twitter.com/borowskirafal Rafał Borowski

        Should we expect WP part to be released earlier on YouTube?

        • ianyates

          Not sure – those videos will be hosted on the Wptuts+ YouTube channel, so it’s really up to Japh. He might prefer to schedule the videos to that they coincide with the site posts, but if the demand is there I’m sure he’ll take it on board :)

  • Pingback: Random Useful Links | Happy Friday! | Waterfall Creative

  • Eduard Tutescu

    What is the shortcut for doing “Save for web” for a single layer?

    Thanks,
    Eduard.

  • John

    Adi, what tool are you using to zoom in and then measure the pixels in the browser window?

    • Adi Purdila
      Author

      Hmm, if you’re talking about the loupe, that’s an app called ColorSnapper http://colorsnapper.com/

      • http://www.facebook.com/drekryan Derrick Lambert

        They may have also meant the Mac Screenshot Selection Tool which was being used. Its Mac only of course but can be enabled by Command+Shift+4. It’s intended to make a selection and save it as a screenshot on your desktop but also comes in handy as a quick crosshair selection tool.

      • http://www.facebook.com/drekryan Derrick Lambert

        They may have also meant the Mac Screenshot Selection Tool which was being used. Its Mac only of course but can be enabled by Command+Shift+4. It’s intended to make a selection and save it as a screenshot on your desktop but also comes in handy as a quick crosshair selection tool. Hope that helps.

    • Guest

      He/She may have also meant the Mac Screenshot Selection Tool which was being used. Its Mac only of course but can be enabled by Command+Shift+4. It’s intended to make a selection and save it as a screenshot on your desktop but also comes in handy as a quick crosshair selection tool.

  • Pingback: From Photoshop to Wordpress Theme | MBAx.me