How to change line-spacing of posts

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Tungsten
    Senior Member
    • Jan 2002
    • 614
    • 3.0.0 Beta 7

    How to change line-spacing of posts

    If you want to make your posts a little easier on the eyes of your visitors, you can make three quick changes to your vBulletin 3 installation to adjust the line-spacing. The result is similar to setting the line-spacing to 1.5 lines in applications such as MS Word or Corel Wordperfect.


    HOW TO DO IT

    Open the admin control panel and go to Style Manager. Choose the root style of your forum installation and under "All Style Options" choose the entry for Main CSS.

    In the Additional CSS Definitions box at the bottom of the page, add the following code to the top of the existing data:

    Code:
    /* ***** This sets the line-spacing for each post's content ***** */
    .postbody { line-height: 150% }
    Now go back to the Style Manager and expand your templates. Inside both the postbit and the postbit_legacy templates, find the following lines of code:

    Code:
    <!-- message -->
    <div>$post[message]</div>
    <!-- / message -->
    Change it to read as follows and then save the templates:

    Code:
    <!-- message -->
    <div class="postbody">$post[message]</div>
    <!-- / message -->
    That's all there is to it. You can adjust the 150% value in the CSS definition to be whatever you want it to be according to the specificiations listed in this page at the W3Schools CSS Line-Height tutorial.

    I've found that 150% works best for my site and the users have given favorable feedback on this subtle yet noticeable improvement.

  • Floris
    Senior Member
    • Dec 2001
    • 37767

    #2
    What URL can I browse to 'sample' this tweak?

    Thank you for sharing!

    Comment

    • the Sandman
      Senior Member
      • Jul 2003
      • 1539
      • 3.7.x

      #3
      Thanks - that works great. I set mine at 125%.
      The Admin Zone - Resources for Forum Administrators
      Articles - Forum Review
      Interviews:
      KierScottJerryAndreasSteveWayneJakeFlorisLogicianErwin
      Paul M

      Comment

      • Tungsten
        Senior Member
        • Jan 2002
        • 614
        • 3.0.0 Beta 7

        #4
        Originally posted by the Sandman
        Thanks - that works great. I set mine at 125%.
        I set mine to 135% after some testing.

        Floris, feel free to view this thread...


        One way to really see the difference is to look at quoted text which is not affected by this change, and then look at the rest of the post body. Even more striking is when you click and drag to highlight the text and see how quoted text has no visible spacing between lines, but regular text will show a visible clear border between lines.
        Last edited by Tungsten; Wed 21 Apr '04, 10:04am.

        Comment

        • kaixiangla
          New Member
          • Jun 2012
          • 5

          #5
          Any idea of how to do it to 4.2.0?

          - - - Updated - - -

          I made it! Here is how to do it in version 4.x:

          same step 1,

          when go to step 2 editing templete postbit, find
          <div class="xxx<vb:if condition="$show['first_ad'] OR $show['last_ad']"> hasad</vb:if>">
          (I forgot what was the original value for xxx, sorry, but you will find this phrase anyway. )

          and change it to
          <div class="postbody<vb:if condition="$show['first_ad'] OR $show['last_ad']"> hasad</vb:if>">

          DONE

          BTW I set 200% for line height for myself.

          Comment

          Related Topics

          Collapse

          Working...