Please login or register.

Login with username, password and session length
Advanced search  

News:

Latest sNews - sNews 1.7 - with its own forums - for discussion and user mods.

Pages: [1] 2

Author Topic: How do you right align comments from sNews.php?  (Read 4508 times)

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
How do you right align comments from sNews.php?
« on: October 10, 2007, 02:25:48 am »

Hello all,

     Because of the style of the website that I am building, I would like to right align the comments generated by the center function.  I belive the answer would be editing my handy friend, style.css, but I am not sure.  Can anyone give any help?  Thanks.

See Ya,
Zack
Logged

Joost

  • Guest
Re: How do you right align comments from sNews.php?
« Reply #1 on: October 10, 2007, 06:20:21 am »

Insert in stylesheet:
.comment {text-align:right;}
Logged

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
Re: How do you right align comments from sNews.php?
« Reply #2 on: October 11, 2007, 01:14:00 am »

Hello All,

   No, Joost, that doesn't do anything.  Here is my style.css:
Code: [Select]
body {
padding : 0;
margin : 0;
font : 0.74em Arial, sans-serif;
line-height : 1.5em;
background : #393939;
color : #fff;
}
a {
color : #d0eb55;
background : inherit;
text-decoration : none;
}
a:hover {
color : #d0eb55;
background : inherit;
text-decoration : underline;
}
p {
margin : 5px 0;
}
h1 {
font : bold 1.8em Arial, Sans-Serif;
padding : 8px 0 4px 0;
margin : 0;
letter-spacing : -1px;
}
h2 {
font : bold 1.6em Arial, Sans-Serif;
letter-spacing : -1px;
}
h3 {
padding : 4px 0;
margin : 0;
}
ul {
margin : 0;
padding : 0;
list-style : none;
}
img {
border : 0;
}
hr {
height : 1px;
border-style : none;
color : #d0d0d0;
background-color : #c0c0c0;
margin : 10px 0;
}
ol {
padding : 0;
margin : 0;
}
.code {
padding : 3px 5px 3px 35px;
border : 1px solid #666;
list-style-type : decimal-leading-zero;
font-family : Courier;
}
.code code {
font-family : Monaco, "Courier New", Tahoma;
font-size : 1.2em;
}
.code li {
margin : 2px 0;
padding : 0 5px;
background : #333;
}
.code li.t1 {
padding-left : 4ex;
}
.code li.t2 {
padding-left : 8ex;
}
.code li.t3 {
padding-left : 12ex;
}
.code li.t4 {
padding-left : 16ex;
}
.code li.t5 {
padding-left : 20ex;
}
.code li.t6 {
padding-left : 24ex;
}
.code li.t7 {
padding-left : 28ex;
}
.code li.t8 {
padding-left : 32ex;
}
.content {
margin : 0 auto;
width : 1000px;
}
#topbar {
height : 35px;
background : #212121;
width : 100%;
}
#topbar #icons {
float : right;
margin : 10px 0 0;
padding : 0;
}
#topbar #icons img {
padding-right : 4px;
border : 0;
}
.url {
padding : 10px 0;
}
.url a {
color : #454545;
text-decoration : none;
}
.url a:hover {
color : #fff;
}
#top {
padding-top : 0;
background : #3d3d3b url(images/topbg.gif) repeat-x;
height : 85px;
margin-bottom : 25px;
}
#top h1 {
font : bold 2.6em Arial, Sans-Serif;
padding : 20px 0 0 0;
margin : 0;
letter-spacing : 1px;
color : #d0eb55;
}
#top a:hover {
text-decoration : none;
}
#top h2 {
font : 0.9em Arial, Sans-Serif;
letter-spacing : 0;
color : #868686;
margin : 0;
padding : 0;
}
#menu {
float : right;
height : 23px;
margin-top : 35px;
}
#menu a {
color : #fff;
background : inherit;
text-decoration : none;
padding-left : 10px;
line-height : 23px;
font-weight : bold;
}
#menu a span {
padding-right : 10px;
}
#menu a, #menu a span {
display : block;
float : left;
}
#menu a:hover, #menu .current {
color : #fff;
background : #a9bc52 url(images/tabl.gif) no-repeat left top;
padding-left : 10px;
height : 23px;
}
#menu a:hover span, #menu .current span {
background : url(images/tabr.gif) no-repeat right top;
padding-right : 10px;
height : 23px;
cursor : pointer;
}
#menu ul {
list-style : none;
padding : 0;
margin : 0;
}
#menu li {
float : left;
margin : 0 0 0 5px;
}
#main {
width : 1000px;
margin : 0;
padding : 0;
}
.right_side {
float : right;
width : 202px;
background : inherit;
overflow : hidden;
}
.right_side .pad {
padding : 0 0 10px 17px;
}
.right_side p {
padding : 0 0 5px 5px;
}
.right_side ul {
padding : 3px 0 12px 5px;
}
.right_side li {
line-height : 18px;
background : inherit;
list-style : square;
padding-left : 0px;
margin-left : 17px;
color : #b4e04a;
}
.right_side a {
background : inherit;
text-decoration : none;
}
.right_side a:hover {
text-decoration : underline;
}
.right_side h3 {
color : #eee;
font : bold 1.2em Arial, Sans-Serif;
background : url(images/rmenuhead.gif) no-repeat top;
width : 202px;
height : 30px;
padding-top : 7px;
text-indent : 10px;
}
#left_side {
background : inherit;
margin-bottom : 10px;
width : 590px;
}
#left_side .intro {
background : #414141;
color : #fff;
}
#left_side .intro .pad {
padding : 10px;
}
#left_side .intro a {
color : #b4e04a;
text-decoration : none;
}
#left_side .intro a:hover {
color : #cdff56;
text-decoration : underline;
}
#left_side .mpart {
padding : 20px 0 0 0;
}
#left_side h2 {
background : inherit;
padding : 0;
margin : 0;
font : 1.8em verdana, Arial, Sans-Serif;
}
#left_side .mpart h3 {
background : inherit;
padding : 0;
margin : 0 0 15px 0;
font : 0.9em verdana, Arial, Sans-Serif;
color : #a5a5a5;
}
#left_side p {
color : #e7e7e7;
padding : 0;
text-align : justify;
}
#left_side img {
float : left;
padding : 0 10px 5px 0;
}
#left_side blockquote {
padding-left : 10px;
border-left : 3px solid #a7cc44;
margin : 10px 0 10px 25px;
}
.date {
padding : 7px 35px 0 0;
margin : 10px 0 25px 0;
text-align : right;
background : url(images/commentb.gif) no-repeat top right;
height : 32px;
}
.date a {
font : bold 1.2em Arial, Sans-Serif;
text-align : right;
color : #a9bc52;
background : transparent;
}
#left_side .rs {
float : right;
margin : 0 0 0 10px;
border : 1px solid #888;
padding : 5px;
background : inherit;
}
#left_side ul {
list-style-position : inside;
margin-left : 2px;
}
#left_side ul li {
list-style-type : square;
margin-left : 15px;
}
#left_side ul ul li {
list-style : none;
margin-left : 10px;
list-style-type : lower-alpha;
list-style-position : inside;
}
#left_side .greybox {
border : 1px solid #ccc;
background : #f5f5f5;
width : 628px;
padding : 10px;
}
#footer {
clear : both;
width : 1000px;
margin : 0 0 6em 0;
padding-top : 5px;
color : #777;
border-top : 1px solid #444;
background : inherit;
}
#footer .right {
float : right;
}
#footer a {
text-decoration : none;
background : inherit;
}
textarea {
width: 99%;
height: 20em;
}
.comment {text-align:right;}
Logged

Joost

  • Guest
Re: How do you right align comments from sNews.php?
« Reply #3 on: October 11, 2007, 02:05:30 am »

Then you will have to find out to which class comments belong. I assumed the class would be comments (<div class="comments">). Look into the xhtml source code.
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: How do you right align comments from sNews.php?
« Reply #4 on: October 11, 2007, 02:09:33 am »

It's not that easy given your setup Zack (at least from what I can see just looking at the stylesheet). Comments are brought into #left_side, right? In that case, what you can try --and I'm not saying it'll work for sure, but it might-- is this:
Quote
.comments { float: right; width: your-value-here; padding: your-value-here; /* If you want to have a background color or image that is different than the left_side background you will want some padding, otherwise ignore */ margin: your-top/bottom-value-here your-left/right-value-here; }

However, if you do have a specified background on left_side, and/or if you're particular about wanting content below articles and comments to move "with the flow" if/when text is scaledup or down by unscrupulous visitors, you'll need to insert a clearing thing that should appear after comments. Specifically in the $tags line right after db variables at the top of snews.php, like so:
Quote
$tags['comments'] = '<div class="comments">,<p><strong>,name,</strong>, had this to say, '.l('on').' ,date,edit,:,</p>,<p>,comment,</p>,</div><div class="clearer"></div>';
   return $tags[$tag];

Oh, for IE, the clearer will need something to invoke hasLayout, e.g height value or padding or line-height plus background, other than that just make a class called "clearer", give it the style { clear: both; }. You can use more or less any html item that outputs an empty thing, like for example <br /> or <div>. I use <div> by default, it just seems more semantic given that it's a division, a container or empty dividing space. What you use is up to you. ;)

*Japanese warlord visiting with famous cook asks "what is the secret ingredient in your soup, what is the one thing that makes it so fantastic? Tell me, master!" Cook smiles briefly (having had the warlord wait for an hour before serving the soup) and replies: "Time. Good food takes time."*
**ducks out of harms way**
« Last Edit: October 11, 2007, 02:28:27 am by Fred K (agentsmith) »
Logged

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
Re: How do you right align comments from sNews.php?
« Reply #5 on: October 11, 2007, 02:26:20 am »

Hello,

     Well, Frek K, your code didn't work either.  How do I find which class comments is?  The comments are generated by sNews.php, so shouldn't it be the same for all webpages?

Zack
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: How do you right align comments from sNews.php?
« Reply #6 on: October 11, 2007, 02:45:26 am »

Hello,

     Well, Frek K, your code didn't work either.  How do I find which class comments is?

Look for this bit in snews.php: $tags['comments']. Check the contents of that line to see what class(es) it contains. The tricky thing here is that comments are (in default installation) wrapped in a div with a class and we usually put that inside another div for the center function, so the comments div will use the parent's styles for many things. To be able to move the comments part and keep it within the article flow you need to use styles that aren't used in the parent div's styles, for example: #left_side has text-align: left set on its p -- that would be why Joost's suggestion to use text-align: right fails. If #left_side has margin and/or padding values, any margin/padding values set on .comments will be ineffective. The id styles will always beat class styles.

Hmm... #left_side has a width value, right? You could try another thing for .comments (or whatever your comments container is called):
/*CSS*/
.comments { float: right; /*keep from previous experiment*/ margin-left: some-value-here; /*should push comments container to the right and shrink width by same amount as long as you don't set a specific width to the comments container*/; }

Basically, you need to know what the classname is for the container holding the comments, and then add styles not already used in the parent's styleset, to move it to where you want it. (Position: absolute; will obviously not work here -- assume that you'll get more than a single comment on articles.)
« Last Edit: October 12, 2007, 11:50:45 pm by Fred K (agentsmith) »
Logged

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
Re: How do you right align comments from sNews.php?
« Reply #7 on: October 11, 2007, 02:58:35 am »

Hello again,
Here is the section of code in question from my sNews.php:

Code: [Select]
function tags($tag) {
$tags = array(); $tags['infoline'] = '<p class="date">,readmore,comments,date,edit,</p>';
$tags['comments'] = '<div class="comment">,<p class="date">,name, '.l('on').' ,date,edit,</p>,<p>,comment,</p>,</div>';
return $tags[$tag];
}

I believe this makes my class "comment" (which would be true if I had 1/2 a brain (which I THINK I do at least...) so I will replace .comments with .comment.  I'll have to depart for now, as I have to leave so you'll have to wait until tomorrow for the result.

Zack
« Last Edit: October 11, 2007, 02:14:10 pm by Buhmanator »
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
Re: How do you right align comments from sNews.php?
« Reply #8 on: October 11, 2007, 03:23:41 am »

(I tried to get the last part of your post (aboe) outside the code-box... changed it to quote-box... still can't get it out of there... don't know why... another wierd forum bug.)
.comment instead of .comments should do it, since the singular is used in the div-class.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Joost

  • Guest
Re: How do you right align comments from sNews.php?
« Reply #9 on: October 11, 2007, 03:36:54 am »

I believe this makes my class "comment" (which would be true if I had 1/2 a brain (which I THINK I do at least...) so I will replace .comments with .comment.  I'll have to depart for now, as I have to leave so you'll have to wait until tomorrow for the result.

Zack
Seems like a nasty typo on my behalf. :-[
Logged

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
Re: How do you right align comments from sNews.php?
« Reply #10 on: October 11, 2007, 02:15:13 pm »

Hello,

     Keyrocks:  I have edited my post, and it works just fine.

[Clever departure remark],
Zack

Logged

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
Re: How do you right align comments from sNews.php?
« Reply #11 on: October 12, 2007, 11:27:40 pm »

Hello,

     I have made an interesting discovery.  Here is what Firefox reports the site's code is (after php has been processed:)
   
     
Code: [Select]
     <p class="date"><a href="http://warzung.byethost13.com/home/zjb-primary-site-completed/#Comment1" title="Comments">Comments (0)</a> Oct.06.2007. 21:12</p>
     

     So then we look into style.css and find out that, lo and behold, date is the offending entry (and actually looks like its supposed to).  But to ruin the excitement, we find that is it already supposed to be right aligned:

     
Code: [Select]
.date {
padding : 7px 35px 0 0;
margin : 10px 0 25px 0;
text-align : right;
background : url(images/commentb.gif) no-repeat top right;
height : 32px;
}
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: How do you right align comments from sNews.php?
« Reply #12 on: October 12, 2007, 11:50:12 pm »

well, if you still have this style rule in your css:
Quote
#left_side p {
color : #e7e7e7;
padding : 0;
text-align : justify;
}

and if comments (within the paragraph w/class=date) are brought into the div left_side, then the text-align notation in .date has no effect. Style rule for ID beats same style rule for class, every time -- in this case the rule for text-align on a p.
Solution: remove text-align from #left_side. left_side p will be left aligned by default and right align for p date will (should) be picked up.
Logged

Buhmanator

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 52
Re: How do you right align comments from sNews.php?
« Reply #13 on: October 16, 2007, 02:19:45 pm »

Hello,

     Fred, I do not have left align in my #left_side.  So, I can't really remove it if its not there.  Here is my style.css:

Code: [Select]
body {
padding : 0;
margin : 0;
font : 0.74em Arial, sans-serif;
line-height : 1.5em;
background : #393939;
color : #fff;
}
a {
color : #d0eb55;
background : inherit;
text-decoration : none;
}
a:hover {
color : #d0eb55;
background : inherit;
text-decoration : underline;
}
p {
margin : 5px 0;
}
h1 {
font : bold 1.8em Arial, Sans-Serif;
padding : 8px 0 4px 0;
margin : 0;
letter-spacing : -1px;
}
h2 {
font : bold 1.6em Arial, Sans-Serif;
letter-spacing : -1px;
}
h3 {
padding : 4px 0;
margin : 0;
}
ul {
margin : 0;
padding : 0;
list-style : none;
}
img {
border : 0;
}
hr {
height : 1px;
border-style : none;
color : #d0d0d0;
background-color : #c0c0c0;
margin : 10px 0;
}
ol {
padding : 0;
margin : 0;
}
.code {
padding : 3px 5px 3px 35px;
border : 1px solid #666;
list-style-type : decimal-leading-zero;
font-family : Courier;
}
.code code {
font-family : Monaco, "Courier New", Tahoma;
font-size : 1.2em;
}
.code li {
margin : 2px 0;
padding : 0 5px;
background : #333;
}
.code li.t1 {
padding-left : 4ex;
}
.code li.t2 {
padding-left : 8ex;
}
.code li.t3 {
padding-left : 12ex;
}
.code li.t4 {
padding-left : 16ex;
}
.code li.t5 {
padding-left : 20ex;
}
.code li.t6 {
padding-left : 24ex;
}
.code li.t7 {
padding-left : 28ex;
}
.code li.t8 {
padding-left : 32ex;
}
.content {
margin : 0 auto;
width : 1000px;
}
#topbar {
height : 35px;
background : #212121;
width : 100%;
}
#topbar #icons {
float : right;
margin : 10px 0 0;
padding : 0;
}
#topbar #icons img {
padding-right : 4px;
border : 0;
}
.url {
padding : 10px 0;
}
.url a {
color : #454545;
text-decoration : none;
}
.url a:hover {
color : #fff;
}
#top {
padding-top : 0;
background : #3d3d3b url(images/topbg.gif) repeat-x;
height : 85px;
margin-bottom : 25px;
}
#top h1 {
font : bold 2.6em Arial, Sans-Serif;
padding : 20px 0 0 0;
margin : 0;
letter-spacing : 1px;
color : #d0eb55;
}
#top a:hover {
text-decoration : none;
}
#top h2 {
font : 0.9em Arial, Sans-Serif;
letter-spacing : 0;
color : #868686;
margin : 0;
padding : 0;
}
#menu {
float : right;
height : 23px;
margin-top : 35px;
}
#menu a {
color : #fff;
background : inherit;
text-decoration : none;
padding-left : 10px;
line-height : 23px;
font-weight : bold;
}
#menu a span {
padding-right : 10px;
}
#menu a, #menu a span {
display : block;
float : left;
}
#menu a:hover, #menu .current {
color : #fff;
background : #a9bc52 url(images/tabl.gif) no-repeat left top;
padding-left : 10px;
height : 23px;
}
#menu a:hover span, #menu .current span {
background : url(images/tabr.gif) no-repeat right top;
padding-right : 10px;
height : 23px;
cursor : pointer;
}
#menu ul {
list-style : none;
padding : 0;
margin : 0;
}
#menu li {
float : left;
margin : 0 0 0 5px;
}
#main {
width : 1000px;
margin : 0;
padding : 0;
}
.right_side {
float : right;
width : 202px;
background : inherit;
overflow : hidden;
}
.right_side .pad {
padding : 0 0 10px 17px;
}
.right_side p {
padding : 0 0 5px 5px;
}
.right_side ul {
padding : 3px 0 12px 5px;
}
.right_side li {
line-height : 18px;
background : inherit;
list-style : square;
padding-left : 0px;
margin-left : 17px;
color : #b4e04a;
}
.right_side a {
background : inherit;
text-decoration : none;
}
.right_side a:hover {
text-decoration : underline;
}
.right_side h3 {
color : #eee;
font : bold 1.2em Arial, Sans-Serif;
background : url(images/rmenuhead.gif) no-repeat top;
width : 202px;
height : 30px;
padding-top : 7px;
text-indent : 10px;
}
#left_side {
background : inherit;
margin-bottom : 10px;
width : 590px;
}
#left_side .intro {
background : #414141;
color : #fff;
}
#left_side .intro .pad {
padding : 10px;
}
#left_side .intro a {
color : #b4e04a;
text-decoration : none;
}
#left_side .intro a:hover {
color : #cdff56;
text-decoration : underline;
}
#left_side .mpart {
padding : 20px 0 0 0;
}
#left_side h2 {
background : inherit;
padding : 0;
margin : 0;
font : 1.8em verdana, Arial, Sans-Serif;
}
#left_side .mpart h3 {
background : inherit;
padding : 0;
margin : 0 0 15px 0;
font : 0.9em verdana, Arial, Sans-Serif;
color : #a5a5a5;
}
#left_side p {
color : #e7e7e7;
padding : 0;
text-align : justify;
}
#left_side img {
float : left;
padding : 0 10px 5px 0;
}
#left_side blockquote {
padding-left : 10px;
border-left : 3px solid #a7cc44;
margin : 10px 0 10px 25px;
}
.date {
padding : 7px 35px 0 0;
margin : 10px 0 25px 0;
text-align : right;
background : url(images/commentb.gif) no-repeat top right;
height : 32px;
}
.date a {
font : bold 1.2em Arial, Sans-Serif;
text-align : right;
color : #a9bc52;
background : transparent;
}
#left_side .rs {
float : right;
margin : 0 0 0 10px;
border : 1px solid #888;
padding : 5px;
background : inherit;
}
#left_side ul {
list-style-position : inside;
margin-left : 2px;
}
#left_side ul li {
list-style-type : square;
margin-left : 15px;
}
#left_side ul ul li {
list-style : none;
margin-left : 10px;
list-style-type : lower-alpha;
list-style-position : inside;
}
#left_side .greybox {
border : 1px solid #ccc;
background : #f5f5f5;
width : 628px;
padding : 10px;
}
#footer {
clear : both;
width : 1000px;
margin : 0 0 6em 0;
padding-top : 5px;
color : #777;
border-top : 1px solid #444;
background : inherit;
}
#footer .right {
float : right;
}
#footer a {
text-decoration : none;
background : inherit;
}
textarea {
width: 99%;
height: 20em;
}

[General Witty Remark of Departure]
Zack
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: How do you right align comments from sNews.php?
« Reply #14 on: October 16, 2007, 03:19:33 pm »

General, Sir, not left align. text-align, Sir! ;D

Quote from: Buhmanator
#left_side p {
color : #e7e7e7;
padding : 0;
text-align : justify;
}

Now, if you add a style .comment { text-align: right; } but use that within the div "left_side", like so
Quote
<div id="left_side"> ... bunch of content ... <div class="comment"><p> ... comments here ...</p></div></div>
Then the rule given for text-align in #left_side will override any text-align rule defined for the class comment. Because ID rules will override class rules of the same kind, every time.
Which is what I said earlier.

It does not matter if "text-align: left;" already exists or not. The important thing is if "text-align" already exists.

Test the thesis by removing text-align: justify from #left_side. (Assuming you have no other container id with a text-align rule that might override the text-align setting on .comment) the text-align setting for class comment should  then come into play.
« Last Edit: October 16, 2007, 03:24:45 pm by Fred K (agentsmith) »
Logged
Pages: [1] 2