sireesanwar (![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png)
sireesanwar.livejournal.com) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
layoutlounge2015-06-17 11:31 am
sireesanwar.livejournal.com) wrote in layoutlounge2015-06-17 11:31 am
Making A Layout: Comment Area
Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Custom Comments Area
Links: Code Index
Don't mind the icon. I don't get paid for this at all. I enjoy it and there are many of you who are always telling me they think they can figure it out but sometimes they get stumped and I'm hoping these explanations of the coding are helping you. If not, let me know what is confusing you.
There are some of you out there that like the default Live Journal view of their posts and comments area. That is totally fine and your comments area is going to look like the below image and not need any of this coding...
If you want to go from a formatted look to the Live Journal look you'll want to go to the Display Section of Customize Journal Style.
The coding we are looking for is this
.box { and form div.box {
These can be combined into .box, form div.box {. Generally here you do not need a width. On occasion you'll notice your comments section isn't the same width as you posts in which case you would add the line width: ?px; with the same amount of pixels as your post, and on occasion bigger. I typically give my subcontent a border and my .box, form div.box a border so I can see if they are lining up. Rarely I make the comment area bigger so the userpics look like they are closer to lining up.
On occasion you'll notice there is a width and no matter how hard you try you can't seem to get the comments to line up evenly with the post. Try removing the coding to see if the "inherit" positioning will kick in an put the comments exactly where they should be. "Inherit" positioning means if you do not put in the coding position: ; it will default to position: inherit;.
The padding here is going to be in the box around all your comments. So if you look at the picture below you'll see where the arrows are pointed there is padding moving the elements within the .box, form div.box { away from the edges. Padding is a beautiful thing.
clear: right; is for the journal we are making not the image above which is set to clear: left;. This is going to depend on which side of the journal the sidebar is on. So in the image above the sidebar is on the right so our clear is to the left. But we are making a layout with the sidebar on the left meaning we want the .box, form div.box { to clear right. Without this you'll see your comments starting to move over to the other side of the page as soon as they reach the end of the sidebar.
center.comment-links { }
You'll notice this bit of coding is in the coding but there is nothing between the brackets? What is this? It is that extra link to your comments that we just never knew how to get rid of. I have the background in blue (#1) and then without the background so you can see it (#2). If you add the coding display: none; between those brackets, this will disappear. The downside of making this disappear is should your comments reach over the alotted page about you wouldn't be able to see the different pages (see image #3).
div#footer.box {
This is specifically for the footer of your Comment Page/Section. I have it in red so you can see what part of the comments I'm talking about. In the coding I've aligned the text for center to keep it in the center of our comment section. You can also add the coding display: none; to make this disappear.
.commentbox is going to be the actual box for your comment. You do not have to give this padding if your comments are supposed to blend into your .box, form div.box { which you've already given padding to. I simply added a little margin and padding for effect.
See how these comments are aligned on the right with the indentation on the left? Wonder how we'd change this? First, in the above .commentbox. You want to tell it to align: right. This is confusing because you are thinking it is already aligning to the right but this is referring to the indentation. If we stopped here you would notice the comments are moved to the "left" but there is no indentation. That is because we need to do one more step... You need to go to the Display Section of Customize Journal Style and look at the Additional Options Section. There is a line that says "Set the user picture position for each entry". This too needs to be set to right for the indentation. This doesn't actually move your userpic. It might have if we hadn't coded for that below.
That while bit above in the image is the .datesubjectcomment. This is where the date and the subject of a comment will be located. I like having padding in this to prevent the words from running into the side of the box or the userpic should I have a long subject.
I have yet to figure out how you change the Comment Subject coloring. It is currently taking on the look of our bold coding. So when I make a layout and customize for bold text... I try to make sure it compliments the comment section to prevent it from being unreadable.
.userpiccomment: This coding will work much like the other userpic. The only difference is I can add the border-radius attributes to this coding without having to thave a userpice img coding.
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
The float here is where you want your userpic. Do you want it on the right or left of your comments? You will want to change the margin accordingly. With it on the right we will want a margin on the bottom and left to prevent text from running into it. But if it is on the left you want that margin on the bottom and right.
.commentreply is the area where your actual comment text is going to be. These are all just general customizations.
.commentinfo: I'm going to be honest. This is been in my coding since I started altering found coding and I've never removed it because I've yet to figure out if it will break something. You can probably leave it out. It may just be out-of-date coding. Not really sure. Like I've said before, I'm not really an expert.
Now the result will be something like this:
But what if we want to change the color of the REPLY, PARENT, THREAD, and LINK... links? They are controlled right now by the overall journal link coding. Here we go
div.comment-links {
This will control the "box" they are in. As you can see I've added some padding (padding: 20px 5px;) which means there is more on the top and the other sides have 5px. This way we are moving it down from the text. I have the text-align here set but it doesn't align the icons. Sometimes this section throws off the links at the bottom of your post (black links in image). If this happens try removing this line, leaving the div.comment-links a and div.comment-links a:hover. If the problem continues, remove all of these.
Then we have div.comment-links a and div.comment-links a:hover which are for the links we discussed and wanted to change. You could add font-weight (bold) to these or even text-transform (uppercase, lowercase) or even font-style (italic). This is up to you.
Additional Coding Added 7/24/2015:
.replytosubject {
font-weight: 300;
color: #000000;
font-size: 16px;
}
The .replytosubject coding is for when you click "REPLY" in the comment response emails we get. If you do this you are shown the comment you are replying too with a text box for your response. .replytosubject gives the subject of the previous response some customization. Unfortunately this is the only place you will see this customizing.
div#content textarea { width: 80%; }
This coding will contain your text boxes for replies and in your posts should you need it.
So what do we have so far:
Theme: Flexible Squares
Actions: Creating Your Own Layout: Custom Comments Area
Links: Code Index
Don't mind the icon. I don't get paid for this at all. I enjoy it and there are many of you who are always telling me they think they can figure it out but sometimes they get stumped and I'm hoping these explanations of the coding are helping you. If not, let me know what is confusing you.
There are some of you out there that like the default Live Journal view of their posts and comments area. That is totally fine and your comments area is going to look like the below image and not need any of this coding...
If you want to go from a formatted look to the Live Journal look you'll want to go to the Display Section of Customize Journal Style.
As you can see in the Basic Options section there is a line that says "Disable customized comments page for your journal". You will want to change No to Yes. Then you can skip the rest of this tutorial.
But there are those of you who are like me and love their entire journal decked out the way they want it to look. This is how my comments on my personal journal look:
If this you want your comments to be customized like your journal then here is the coding.... you will want to change the above option to No or leave it on No... which ever.
Look it is Rollo from Vikings. Major distraction there... moving on.
The coding I would like to work with is from my layout Oxygen.Look it is Rollo from Vikings. Major distraction there... moving on.
The coding we are looking for is this
.box { and form div.box {
These can be combined into .box, form div.box {. Generally here you do not need a width. On occasion you'll notice your comments section isn't the same width as you posts in which case you would add the line width: ?px; with the same amount of pixels as your post, and on occasion bigger. I typically give my subcontent a border and my .box, form div.box a border so I can see if they are lining up. Rarely I make the comment area bigger so the userpics look like they are closer to lining up.
On occasion you'll notice there is a width and no matter how hard you try you can't seem to get the comments to line up evenly with the post. Try removing the coding to see if the "inherit" positioning will kick in an put the comments exactly where they should be. "Inherit" positioning means if you do not put in the coding position: ; it will default to position: inherit;.
The padding here is going to be in the box around all your comments. So if you look at the picture below you'll see where the arrows are pointed there is padding moving the elements within the .box, form div.box { away from the edges. Padding is a beautiful thing.
center.comment-links { }
You'll notice this bit of coding is in the coding but there is nothing between the brackets? What is this? It is that extra link to your comments that we just never knew how to get rid of. I have the background in blue (#1) and then without the background so you can see it (#2). If you add the coding display: none; between those brackets, this will disappear. The downside of making this disappear is should your comments reach over the alotted page about you wouldn't be able to see the different pages (see image #3).
#1
#2
#3
#3
div#footer.box {
This is specifically for the footer of your Comment Page/Section. I have it in red so you can see what part of the comments I'm talking about. In the coding I've aligned the text for center to keep it in the center of our comment section. You can also add the coding display: none; to make this disappear.
.commentbox is going to be the actual box for your comment. You do not have to give this padding if your comments are supposed to blend into your .box, form div.box { which you've already given padding to. I simply added a little margin and padding for effect.
See how these comments are aligned on the right with the indentation on the left? Wonder how we'd change this? First, in the above .commentbox. You want to tell it to align: right. This is confusing because you are thinking it is already aligning to the right but this is referring to the indentation. If we stopped here you would notice the comments are moved to the "left" but there is no indentation. That is because we need to do one more step... You need to go to the Display Section of Customize Journal Style and look at the Additional Options Section. There is a line that says "Set the user picture position for each entry". This too needs to be set to right for the indentation. This doesn't actually move your userpic. It might have if we hadn't coded for that below.
That while bit above in the image is the .datesubjectcomment. This is where the date and the subject of a comment will be located. I like having padding in this to prevent the words from running into the side of the box or the userpic should I have a long subject.
I have yet to figure out how you change the Comment Subject coloring. It is currently taking on the look of our bold coding. So when I make a layout and customize for bold text... I try to make sure it compliments the comment section to prevent it from being unreadable.
.userpiccomment: This coding will work much like the other userpic. The only difference is I can add the border-radius attributes to this coding without having to thave a userpice img coding.
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
The float here is where you want your userpic. Do you want it on the right or left of your comments? You will want to change the margin accordingly. With it on the right we will want a margin on the bottom and left to prevent text from running into it. But if it is on the left you want that margin on the bottom and right.
.commentreply is the area where your actual comment text is going to be. These are all just general customizations.
.commentinfo: I'm going to be honest. This is been in my coding since I started altering found coding and I've never removed it because I've yet to figure out if it will break something. You can probably leave it out. It may just be out-of-date coding. Not really sure. Like I've said before, I'm not really an expert.
Now the result will be something like this:
But what if we want to change the color of the REPLY, PARENT, THREAD, and LINK... links? They are controlled right now by the overall journal link coding. Here we go
div.comment-links {
This will control the "box" they are in. As you can see I've added some padding (padding: 20px 5px;) which means there is more on the top and the other sides have 5px. This way we are moving it down from the text. I have the text-align here set but it doesn't align the icons. Sometimes this section throws off the links at the bottom of your post (black links in image). If this happens try removing this line, leaving the div.comment-links a and div.comment-links a:hover. If the problem continues, remove all of these.
Then we have div.comment-links a and div.comment-links a:hover which are for the links we discussed and wanted to change. You could add font-weight (bold) to these or even text-transform (uppercase, lowercase) or even font-style (italic). This is up to you.
.replytosubject {
font-weight: 300;
color: #000000;
font-size: 16px;
}
div#content textarea { width: 80%; }
This coding will contain your text boxes for replies and in your posts should you need it.
So what do we have so far:
Any questions about this tutorial? Please Comment
no subject
I wish to add a third header image behind my banner
http://i1367.photobucket.com/albums/r790/sheppsboy1/Untitled_zps9dpft2bv.png)
If it's possible I would be forever grateful.
Thank you.
no subject
here is the finished product.
http://futterwackens.livejournal.com/138655.html?mode=reply#add_comment
no subject
no subject
I have a question. I cooked this layout up in PS and I was wondering if it were possible. I can get an image before the word comment and I can get the image before both links. What I want to know is, is it possible to get different images before each link like in the photo?
Thank you for your time and for putting up with my ignorance.
no subject
There may just be a way but I've yet to discover it.