Help with Comment Text Alignment and Padding

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Help with Comment Text Alignment and Padding

Postby Virtual Wombat » December 7th, 2017, 5:40 am

Hi all,

I hoped my first post on this forum would be a proper introduction, but alas customising a template has foiled me!

I'm Aaron and I've begun the process of moving my comic over to SmackJeeves from its previous home on a wordpress installation. Everything has gone smoothly so far and I'm really impressed.

However, I've hit a snag. As you can see here: http://www.virtualwombat.co.uk/comics/

I've managed to get most things customised to my liking but for the life of me can't figure out how to straighten up the comment text. What I mean is I don't like the way it wraps below the avatar image and would prefer that it keep aligned in one block. Also, how would I add padding to the side of the avatar to stand the text off away from it slightly?

I know the basics of CSS and have experimented with trying to add "padding-left: 20px;" but to no avail. I'm not sure if I'm trying to apply it to the wrong object.

Thanks in advance!

Aaron
Aaron | Virtual Wombat Webcomic
W: www.virtualwombat.co.uk

Image
User avatar
Virtual Wombat
 
Posts: 9
Joined: November 29th, 2017, 9:01 am
Location: Sheffield, UK

Re: Help with Comment Text Alignment and Padding

Postby eishiya » December 7th, 2017, 9:54 am

You will need to change the HTML structure of the comment slightly to make this work. You need to put a wrapper around the context text, and then give that wrapper a large margin to push it to the right of the avatar.

Go to your Comic Page template, and find the code that looks something like this:
Code: Select all
          <h2>{loop_author_comments.POST_TITLE}</h2>
          {loop_author_comments.MESSAGE}

Replace with:
Code: Select all
          <div class="commentContent">
                    <h2>{loop_author_comments.POST_TITLE}</h2>
                    {loop_author_comments.MESSAGE}
          </div>


Then, in your CSS, give this new container this rule:
Code: Select all
.commentContent {
   margin-left: 155px;
}


Remember to add the wrapper around user comments, too. This example code is just for author comments.
Image
User avatar
eishiya
 
Posts: 9504
Joined: December 5th, 2009, 11:17 am

Re: Help with Comment Text Alignment and Padding

Postby Virtual Wombat » December 7th, 2017, 10:22 am

Hey Eishiya, you are a bonafide Jedi Master!

That works spectacularly on desktop, the only issue then was padding is too much on mobile (I'm not using the "app", I think it strips away too much functionality...) but I've fixed that by adding your code but with an adjusted margin:

Code: Select all
     .commentContent {
        margin-left: 80px;
     }


Beneath this code in overall layout:

Code: Select all
    /* --------------- ADJUSTMENTS,SCREEN 800px OR LESS (mobile) ------------------ */

    @media all and (max-width: 800px) {

      .headIcon {
          width: 100px;
          height: 100px;
          top:-10px;
          left: -25px;
      }


Just in case anyone else ever has a similar issue.

Thanks so much!
Aaron | Virtual Wombat Webcomic
W: www.virtualwombat.co.uk

Image
User avatar
Virtual Wombat
 
Posts: 9
Joined: November 29th, 2017, 9:01 am
Location: Sheffield, UK

Re: Help with Comment Text Alignment and Padding

Postby eishiya » December 7th, 2017, 10:38 am

Great :D
Image
User avatar
eishiya
 
Posts: 9504
Joined: December 5th, 2009, 11:17 am

Re: Help with Comment Text Alignment and Padding

Postby Admin » December 7th, 2017, 2:55 pm

Here's a few suggestions for the desktop version:

Code: Select all
.commentContent {
    margin-left: 170px;
}

.commentPost h2 {
    padding: 0px;
    margin: 0 0 8px;
    line-height: 1em;
}



Also, is the 'Veranda' font supposed to be 'Verdana'?
User avatar
Admin
Site Admin
 
Posts: 1340
Joined: August 17th, 2005, 11:10 pm


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 1 guest