Styling Simple Nested Comments with CSS
videos

Styling Simple Nested Comments with CSS

on Jun 28th 2012 with 21 comments
Tutorial Details
  • Topic: CSS
  • Difficulty: Beginner
  • Screencast duration: 19 mins
Download Source Files
Demo View It Online

Today we’re going to have a look at nested comments. We’ll be styling ours so that they have a tree-like structure (such as the ones you’ll find on Webdesigntuts+) and we’ll look at a couple of ways we can approach things.

Watch Screencast

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

Additional Resources

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://laranz.in Lawrence77

    Monster is back :P

    • http://www.adipurdila.com Adi Purdila
      Author

      Hehe, yes I am :) More tuts to follow in the near future :D

  • Robert Smith

    A pleasure to watch your tutorials. Thanks!

  • http://www.adrianflorescu.info Adrian Florescu

    Felicitari! Super tutorial. Ti-am dat follow pe twitter si dribble!

    Thanks!

    • http://www.adipurdila.com Adi Purdila
      Author

      Ms ms :)

  • supprof

    i really like this guy’s tutorials!
    thank you adi allways a pleasure to see you around
    when you’ll make us another awesome series? full project
    thank you

  • Hamid

    how can i miss this screencast? adi is back!! btw adi! use some transition mouseover instead than using simple mouseover! like what? like your simple admin them design, wasn’t bad to using some transition for mouseover like:

    /* ———- COLORS ———- */

    return to website button ( for simple ):

    .dark {
    background-color: #3f4551;
    color: white;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    }

    links like ( for simple ):

    a {
    color: #2069b4;
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    transition: 0.7s;
    }

    and buttons like ( for simple ):

    .blue {
    background-color: #2069b4;
    color: white;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    }

    as you can see i used them for return to website, links and buttons like so.
    btw it’s just a simple you know and ofc i dont want to blaming you, we always like adi. btw my real friends know you too becasue of me:P

    gogo adi use some css3 cool features HTML5 and hell yeah some SVG stuff.

    best regard:
    Hamid.

    • http://www.adipurdila.com Adi Purdila
      Author

      Will definitely use more of the new features from now on Hamid, thanks for the tip :)

  • Techeese

    Thanks Adi

  • Aaron Smith

    Hey Adi,

    Really enjoying your screencasts. Just have one question. I am trying to decide on the program I want to use, currently going between Sublime Text 2 and Espresso.

    My issue is setting Espresso up to be comparable to the way yours is set up. I can’t seem to get the drop down menus showing you the additional choices in CSS, sorry if that sounds jumbled, can’t think of what it is called right now. (ex. you begin to type “width”, but as soon as you have the “w” in it shows you multiple choices.

    Once again, really enjoying your screencasts, and would love to give Espresso a shot. Why do you prefer it over the other choices?

    • Aaron Smith

      Actually I think I just got it all figured out. Sorry about the premature email, but still digging your stuff!

  • Rifki

    The hero is back… :)

    Can’t wait to see full project tutorial.

  • http://www.simonswiss.com Simon

    Excellent tutorial once again, thanks Adi!

    Very useful stuff, very well explained. You rock!

  • Pingback: Tweet-Parade (no.26 June 2012) | gonzoblog.nl

  • http://dustanner.com Dustin Tanner

    Great tutorial! Where can I get that dark theme and zen plugin for Espresso? Thanks!

    • http://dustanner.com Dustin Tanner

      I found that zen support is included. I updated it. Still curious about the dark theme though :)

  • http://christophedebruel.be Christophe Debruel

    aaah excellent, I’ll need to have a look at this later on :D

  • http://Toastdesign.nl Daniel

    Very usefull and excelent explanation! Thanx Adi!

  • Joshua Roche

    Thank you :)

  • anonymous

    Thanks!

  • http://iamnerdwin.com/ Michael

    On the simple layout (using just borders), the tick does not show up on any comment after the first for a particular level. If you wish to have ticks on every level, you can modify the :before from the ul element to the li element:


    ul.nested-comments li ul li:before {
    content: '';
    position: absolute;
    border-bottom: 1px solid #999;
    width: 2em;
    left: 0px;
    padding-top: 2em;
    }

    Hope it helps someone!