XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme stylesheets (CSS) help 
  4.  / Getting comments to center and stretch full width on page
Register
1
soconfused
Getting comments to center and stretch full width on page

  • 2005/7/11 17:12

  • soconfused

  • Not too shy to talk

  • Posts: 108

  • Since: 2005/4/2 1


Hi,

I've modified a theme and I have a small problem which I just can't find how to fix. Users comments are aligning to the left - the whole comment block not the text and they aren't full screen unless in 800 x 600, I can't find how to change it anywhere and it's driving me nuts
I've been going through the style sheet for days and the comments template. But I can't fix it.

This is the style sheet:

body {
color: #2079BB;
background: #D0E6F4;
margin: 5;
padding: 0;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}

table.main{
background-color: #FFFFFF;
padding: 0px;
border-left: 1px solid #1A5E91;
border-right: 1px solid #1A5E91;
}
td.header{
background: #4E57B2;
height: 134;
padding: 0px;
}
td.subHLinks{
height: 20px;
text-align: right;
color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 1px;
font-weight: normal;
vertical-align: middle;
}
td.banner{
background-color: #4E57B2;
text-align: center;
vertical-align: middle;
}
td.search{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-align: right;
vertical-align: middle;
height: 20px;
padding: 2px;
padding-right: 10px;
}
td.copy{
background: #8694D6;
height: 17px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
}
input{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
border: 1px solid #2079BB;
color: #2079BB;
padding-left: 2px;
padding-right: 2px;
background-color: #FFFFFF;
}
td.left{
width: 150px;
padding-left: 8px;
padding-right: 8px;
}
.blockTitle{
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #DD6900;
padding-bottom: 1px;
border-bottom: 2px solid #5FA6E4;
text-transform: uppercase;
text-align: left;

}
.blockContent{
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #666666;
padding: 0px;
text-align: left;
}
.content{
padding: 8px;
text-align: left;
}
td.menuEven{
background-color: #F2F6FB;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
border-bottom: 1px dashed #3A9ECF;
height: 20px;
padding: 0px;
padding-left: 4px;
}
td.menuOdd{
border-bottom: 1px dashed #3A9ECF;
background-color: #EEF7FF;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
height: 20px;
padding: 0px;
padding-left: 4px;
}
.submenu{
padding: 0px;
height: 16px;
padding-left: 4px;
}

a {color: #333333; text-decoration: none; font-weight: normal; background-color: transparent;}
a:hover {
color: #DD6900;
text-decoration: underline;
}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: square inside; color: #559ED1;}

input.formButton {}

.item {border: 0px;}
.itemHead {padding: 3px; background-color: #FFFFFF; color: #2079BB; border-bottom: 2px solid #DD6900;}
.itemInfo {text-align: right; padding: 3px; background-color: #FFFFFF;}
.itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps; color: #2079BB; background-color: transparent;}
.itemPoster {font-size: 90%; font-style:italic;}
.itemPostDate {font-size: 90%; font-style:italic;}
.itemStats {font-size: 90%; font-style:italic;}
.itemBody {padding-left: 5px;}
.itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}
.itemText:first-letter {font-size: 133%; font-weight: bold;}
.itemFoot {text-align: right; padding: 3px; background-color: #FFFFFF; border-top: 1px dashed #6495ED; }
.itemAdminLink {font-size: 90%;}
.itemPermaLink {font-size: 90%;}

th {
background-color: #FFFFFF;
color: Silver;
padding : 2px;
vertical-align : middle;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
border-bottom: 1px dashed #1E90FF;
}

.outer {border: 0px;}
.head {background-color: #FFFFFF; padding: 5px; font-weight: bold; color: #2079BB; border-bottom: 1px dashed #D3D3D3;}
.even {background-color: #D0E9FF; padding: 5px;}
.odd {background-color: #E8F4FF; padding: 5px;}
.foot {background-color: #FFFFFF; padding: 5px; font-weight: bold; border-top: 1px solid #DCDCDC; }
tr.even td {background-color: #D0E9FF; padding: 5px;}
tr.odd td {background-color: #E8F4FF; padding: 5px;}

div.errorMsg { background-color: #FFCCCC; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.confirmMsg { background-color: #DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg { background-color : #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;}

div.xoopsCode { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}
div.xoopsQuote { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}


.comTitle {font-weight: bold; margin-bottom: 2px;}
.comText {padding: 2px;}
.comUserStat {font-size: 10px; color: #2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weight: normal;}
.comUserStatus {margin-left: 2px; margin-top: 10px; color: #2F5376; font-weight:bold; font-size: 10px;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px;font-weight:bold;}
.comUserRankImg {border: 0;}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}

and this is the system_comment.html template:



<{$comment.poster.uname}>
<{$lang_posted}>: <{$comment.date_posted}>  <{$lang_updated}>: <{$comment.date_modified}>




<{if $comment.poster.id != 0}>

<{$comment.poster.rank_title}>
<{$lang_joined}>: <{$comment.poster.regdate}>
<{$lang_from}>: <{$comment.poster.from}>
<{$lang_posts}>: <{$comment.poster.postnum}>
<{$comment.poster.status}>


<{else}>



<{/if}>


<{$comment.image}><{$comment.title}>
<{$comment.text}>






<{if $xoops_iscommentadmin == true}>


<{$lang_edit}><{$lang_delete}><{$lang_reply}>


<{elseif $xoops_isuser == true && $xoops_userid == $comment.poster.id}>


<{$lang_edit}><{$lang_reply}>


<{elseif $xoops_isuser == true || $anon_canpost == true}>


<{$lang_reply}>


<{else}>



<{/if}>


2
soconfused
Re: Getting comments to center and stretch full width on page

  • 2005/7/11 21:00

  • soconfused

  • Not too shy to talk

  • Posts: 108

  • Since: 2005/4/2 1


Having read a bit more I think it's the theme.html
I've managed to get the comments in the center of the page by adding the
but can' get the width 100% - anyone know what I need to add/modify to do this? This is the bit in the theme - "content"




<{$xoops_contents}>


<{if $xoops_showcblock == 1}>
<{foreach item=block from=$xoops_ccblocks}>
<{include file="rmdigital/theme_blockcenter_c.html"}>

<{/foreach}>
<{/if}>



3
jbeard7
Re: Getting comments to center and stretch full width on page

  • 2005/8/9 1:43

  • jbeard7

  • Just popping in

  • Posts: 6

  • Since: 2005/8/9 1


i'm having the same problem. its driving me crazy. anyone know a solution to this?
4
jbeard7
Re: Getting comments to center and stretch full width on page

  • 2005/8/9 1:46

  • jbeard7

  • Just popping in

  • Posts: 6

  • Since: 2005/8/9 1


i noticed that when the comments are short (1 line or so), it doesn't display the table at 100% width. but if the comments are longer and take up a few lines, it stretches the table all the way across. is there any way around this?
5
japanandy
Re: Getting comments to center and stretch full width on page

  • 2005/10/1 9:23

  • japanandy

  • Just popping in

  • Posts: 1

  • Since: 2005/9/25


I am not completely sure if this will work but in the centre column you could add a spacer (1x1 pixel transparent image) and make its width 100 percent, this should cause the column to be always 100 percent no matter how long the comments are.

I always put a spacer in so that Macs dont chuck a hissy fit either.

Good Luck
6
JMorris
Re: Getting comments to center and stretch full width on page

  • 2005/10/1 10:27

  • JMorris

  • XOOPS is my life!

  • Posts: 2722

  • Since: 2004/4/11


To get your comments box to stretch full-width, try adding the following to your stylesheet.

table {
   width:100%;
}


Hope this helps.

James
Insanity can be defined as "doing the same thing over and over and expecting different results."

Stupidity is not a crime. Therefore, you are free to go.
7
jbeard7
Re: Getting comments to center and stretch full width on page

  • 2005/10/1 12:37

  • jbeard7

  • Just popping in

  • Posts: 6

  • Since: 2005/8/9 1


i have this in my stylesheet
table {width: 100%; margin: 5; padding: 5; font-size: 10px}
table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;}


but it appears that nested comments do not break to a new line so they are staggered. have a look here

in IE the comments are a jumbled mess, but in firefox they look perfect.
8
JMorris
Re: Getting comments to center and stretch full width on page

  • 2005/10/1 13:06

  • JMorris

  • XOOPS is my life!

  • Posts: 2722

  • Since: 2004/4/11


Try the following...

In style.css replace:
.comUserdetails {float: left;/*position: relative;top: 50px;left: 10px;*/font-size: 0.85em;border: 1px solid #d0d0e0;background-color: #fff9ef;padding: 3px;/*margin: 5px 5px 5px 5px;*/text-align: center;margin: 5px 10px 5px 0px;z-index: 0; }

.comContainer {/*background-color: #ffffff;*/border: 1px solid #D0D0E0;position: relative;margin-bottom: 10px;z-index: 0;}


With:
.comUserdetails {float: left;font-size: 0.85em;border: 1px solid #d0d0e0;background-color: #fff9ef;padding: 3px;text-align: left;margin: 5px 10px 5px 0px;}

.comContainer {border: 1px solid #D0D0E0;position: relative;margin-bottom: 10px;}


Hope this helps.

James
Insanity can be defined as "doing the same thing over and over and expecting different results."

Stupidity is not a crime. Therefore, you are free to go.
9
jbeard7
Re: Getting comments to center and stretch full width on page

  • 2005/10/1 15:10

  • jbeard7

  • Just popping in

  • Posts: 6

  • Since: 2005/8/9 1


its still jumbled in IE. anything else you can think of?
thanks for the suggestions.

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

1016 user(s) are online (170 user(s) are browsing Support Forums)

Members: 0

Guests: 1016

more...

Donat-O-Meter



<{foreach item=block from=$xoops_clblocks}> <{include file="rmdigital/theme_blockcenter_l.html"}> <{/foreach}>
Stats
Goal: $100.00
Due Date: Jul 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits