Page 1 of 1

guestbook table width

Posted: Mon Jul 09, 2007 6:08 pm
by lleighh
I just installed Guestbook 1.1.9 on CMSMS 1.0.8 (http://LLHargrove.com ... click guestbook in right menu

I want it to be confined to the width of the white center column.  Can't seem to find the control in the default style sheet or the form template.

I even made up a class (gbtable) ... still no resize. Any ideas?

Code: Select all

<!-- Frontend Guestbook Entry Form //-->
<div class="cms-guestbook-div-insert">
	<form name="insert" action="{$geturl}" method="post">
	<input type="hidden" name="uid" value="{$uid}" />
		<table class="gbtable">
			<tr>
				<td>{$titles.sender}(*):</td>
				<td><input type="text" name="sender" value="{$values.sender}" /></td>
			</tr>
			<tr>
				<td>{$titles.country}:</td>
			<td><input type="text" name="country" value="{$values.country}" /></td>
			</tr>
			<tr>
				<td>{$titles.location}:</td>
				<td><input type="text" name="location" value="{$values.location}" /></td>
			</tr>
			<tr>
				<td>{$titles.e_mail}:</td>
				<td><input type="text" name="e_mail" value="{$values.e_mail}" /></td>
			</tr>
			<tr>
				<td>{$titles.homepage}:</td>
				<td>http://<input type="text" name="homepage" value="{$values.homepage}" /></td>
			</tr>
			<tr>
				<td>{$titles.chars_remaining}:</td>
				<td>
					<__script__ type="text/javascript">
					<!--
{literal}
					function addEvent(elm, evType, fn, useCapture) 
					// cross-browser event handling for IE5+, NS6+ and Mozilla/Gecko
					// by Scott Andrew
					{
						if (elm.addEventListener) {
							elm.addEventListener(evType, fn, useCapture);
							return true;
						} else if (elm.attachEvent) {
							var r = elm.attachEvent('on' + evType, fn);
						} else {
							elm['on' + evType] = fn;
						}
					}
{/literal}
{if $wysiwyg}
{literal}
					function FCKeditor_OnComplete(editorInstance) {
						addEvent(editorInstance.EditorDocument, 'keyup', checkLen, false);
					}
{/literal}
{/if}
{if !$wysiwyg}
{literal}
					function addListeners() {
						var messageinput = document.getElementById('message');
						addEvent(messageinput, 'keyup', checkLen, false);
					}
{/literal}
{/if}
{literal}
					function checkLen() {
{/literal}
						maxLen="{$max_textleng}";
//						sTooLong = 'Insert maximal ' + maxLen + ' characters!';
						sTooLong = "{$toolong}";
{if $wysiwyg}
{literal}
						var oEditor = FCKeditorAPI.GetInstance('message');
						var oDOM = oEditor.EditorDocument;
						var iLength; 
						
						if (document.all) // Internet Explorer. 
						{ 
							iLength = oDOM.body.innerText.length; 
						} 
						else // Gecko. 
						{ 
							var r = oDOM.createRange(); 
							r.selectNodeContents(oDOM.body); 
							iLength = r.toString().length; 
						}
						 
						if(iLength>maxLen)
						{
							oDOM.body.innerHTML = oEditor.GetXHTML(false).substring(0,oEditor.GetXHTML(false).length-1);
							alert(sTooLong);
						}
						else
						{
							document.insert.counter.value=maxLen-iLength;
						}
{/literal}
{else}
{literal}
						var txt=document.insert.message.value;
						if(txt.length>maxLen)
						{
							alert(sTooLong);
							document.insert.message.value=txt.substring(0,maxLen);
							document.insert.counter.value=0;
						}
						else
						{
							document.insert.counter.value=maxLen-txt.length;
						}
{/literal}
{/if}
{literal}
					}
{/literal}
{if !$wysiwyg}
					addEvent(window, 'load', addListeners, false);
{/if}
					//-->
					</__script>
					<input type="text" name="counter" value="{$counter}" size="4" />
				</td>
			</tr>
			<tr>
				<td>{$titles.message}(*)</td>
				<td>
{if $wysiwyg}
				{$wysiwyg}
{else}
					<textarea name="message" id="message" rows="10" cols="40">{$values.message}</textarea> 
{/if}
				</td>
			</tr>
{if $show_captcha}
			<tr>
				<td colspan="2" align="center">
					{$titles.captcha}: <input type="text" name="captcha_phrase" /><br />
					{$captcha}
				</td>
			</tr>
{/if}
			<tr>
				<td colspan="2" align="center">
					<input type="submit" name="submitted" value="{$labels.insert}"> <input type="submit" name="cancel" value="{$labels.cancel}" />
				</td>
			</tr>
		</table>
	</form>
</div>

Code: Select all

/*
 Default/example stylesheet for the CMSMS Guestbook module.
This may be overwritten when the module is upgraded and it will be deleted when 
the module is uninstalled, so make a copy if you want to modify it.
*/

 /* Style pagination */

.cms-guestbook-pagination_header {
	margin: .5em 0;
}
.cms-guestbook-pagination_nav {
	font-weight: bold;
	margin: .5em 0;
}
.cms-guestbook-pagination_nav a {
    font-weight: normal;
}

/* Style the guestbook */

/* Style each entry */
.cms-guestbook-entry
{
	border: 1px solid #069;
	margin-bottom: 1em;
}

/* Style the message header */
.cms-guestbook-entry-header
{
	background: #385C72;
	color: white;
	border: 1px solid black;
	margin: 1px;
}

/* Style the actual message */
.cms-guestbook-entry-text 
{
	background: #eee;
	padding: .5em;
	color: black;
}

/* Show the postdate on the right */
.cms-guestbook-entry-posted 
{
	float: right;
	font-size: 1.2em;
}

/* Style message header links */
.cms-guestbook-entry-header a {
	color: white;
} 
.cms-guestbook-entry-header a:hover {
	color: black;
} 
		  
/* Style the sender name */
.cms-guestbook-entry-sendername
{
	font-weight: bold;
}

/* Style the E-mail link */
.cms-guestbook-entry-email {
	font-size: 1.2em;
}
		      
/* Style the senders homepage link */
.cms-guestbook-entry-homepage
{
	font-size: 1.5em;
	margin: 2px;
	margin-bottom: 0;
}
/*Style for guestbook table*/
.gbtable
{
             width: 125px;
             margin: 1em;
             padding: 1em;
}

Re: guestbook table width

Posted: Mon Jul 09, 2007 8:07 pm
by RonnyK
You have to give specific width to the textarea as it gets 80em by default.

Use something like:

textarea {
width: 400px;
}

where the 400px could be replaced by the width you want.

Ronny

Re: guestbook table width

Posted: Mon Jul 09, 2007 8:55 pm
by lleighh
That was the fix, RonnyK. Thanks.