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: 13
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: 9920
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: 13
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: 9920
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: 1421
Joined: August 17th, 2005, 11:10 pm

Re: Help with Comment Text Alignment and Padding

Postby Virtual Wombat » December 12th, 2017, 1:55 pm

Admin wrote: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'?


It is indeed, I can't believe I missed that, I hadn't even noticed the font didn't change haha! Thanks for the suggestions, I'm still doing tweaks here and there. I'll pop back to this thread if I have anymore issues as I go.
Aaron | Virtual Wombat Webcomic
W: www.virtualwombat.co.uk

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

Re: Help with Comment Text Alignment and Padding

Postby Virtual Wombat » December 20th, 2017, 7:03 am

Hi all,

I've run into a problem that's been raised by a user. The rate comic functionality on my comic pages works fine for someone logged in to SmackJeeves, when you click one of the stars and you're logged out it opens a window asking you to log in or register as you'd expect. The issue is if you click "login" or "register" the link attempts to take you to a url on the virtualwombat.co.uk domain when it should obviously be targeting SmackJeeves log in and register pages.

Is there a way I can change this?

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

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

Re: Help with Comment Text Alignment and Padding

Postby Admin » December 20th, 2017, 8:56 am

That was just a bug, and an easy fix. Thanks for letting us know!
User avatar
Admin
Site Admin
 
Posts: 1421
Joined: August 17th, 2005, 11:10 pm

Re: Help with Comment Text Alignment and Padding

Postby Virtual Wombat » December 21st, 2017, 3:30 am

Thanks very much! It's great how quickly things are sorted here, I'm really impressed!
Aaron | Virtual Wombat Webcomic
W: www.virtualwombat.co.uk

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


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 2 guests