[Шаблон] Создание темы

Followers

October 17, 201213 yr

Добрый вечер.

Возникла проблема, а точнее нашел небольшой, но неприятный баг в шаблоне и надеюсь на вашу помощь в его скором устранении.

Как видно на скриншоте поле ввода названия темы находится ниже описания. Как можно его поставить на законное место и дело в шаблоне или в css?

CSS:

.ipsForm_horizontal .ipsField_title {
float: left;
width: 185px;
padding-right: 15px;
text-align: right;
line-height: 1.8;
}

Шаблон:

<li class='ipsField ipsField_primary'>
					<label for='topic_title' class='ipsField_title'>{$this->lang
>words['topic_title']}</label>
					<p class='ipsField_content'>
						<input id='topic_title' class='input_text' type="text" size="60" maxlength="{$this->settings['topic_title_max_len']}" name="TopicTitle" value="{$formData['topicTitle']}" tabindex="0" />
					</p>
				</li>

п.с. IPB 3.3.4; Это немного исправленная форма, до этого шел текст: название темы, огромное пустое пространство, и только потом поле ввода. Исправил я это, задав высоту блоку 50px:

.ipsForm_vertical .ipsField_content { margin-top: 3px; height:50px;}

Edited October 17, 201213 yr by reddd

October 18, 201213 yr

Тема перенесена в соответствующий форум.

А что автор стиля говорит по поводу кривой верстки?

October 18, 201213 yr

Author

С автором не связывался, думал, что возможно без них поправить баг.

Если есть какие либо предположения буду рад выслушать. Надеюсь на вашу помощь)

п.с. а пока что ушел изучать их польский форум =)

October 19, 201213 yr

Author

Нет никаких предположений по решению данной проблемы?

Самое интересное то, что иерархия всех правильна, но почему же блок с полем ввода съехал вниз?

October 19, 201213 yr

У меня было похожее, только панелька функций съехала в бок :D только у меня проблема оказалась в браузере, через другой было всё ок. Баг был на опере, через хром и мозилу просматривалось норм. Я не знаю может просто скин не адаптирован под браузер через который вы юзаете форум :) Если всё же смена браузера не поможет, значит проблема в скине, но это у не ко мне :D

тем более сами пишите

Самое интересное то, что иерархия всех правильна, но почему же блок с полем ввода съехал вниз?

October 19, 201213 yr

Адреса форума в профиле и в теме нет, названия скина нигде нет, версий форума и скина - тоже нет, на скриншотах проблема видна, но на скриншотах кода её причин тоже нет. Что вы предлагаете нам задействовать, телепатию или телекинез?

October 20, 201213 yr

Author

Версия форума 3.3.4, как указано в 1-ом посте. Название скина - Diablo 3 Vanguard 1.7.0. Ссылки на форум нету, так как правлю его на локальном сервере.

October 20, 201213 yr

В чейнджлоге файла есть новая версия - 2.1.0:

Fixed profile reputations
Fixed popup user status
Fixed profile tabs
Fixed advanced search
Fixed textarea
Fixed advanced filter member list
Fixed search

По-видимому, ваши проблемы все решены? Купите, скачайте новую версию, да пользуйтесь.

По платному специфичному скину, да еще и через скриншоты с локали - вам точно никто тут не поможет.

October 20, 201213 yr

Author

Версия скина последняя, но баг все равно присутствует. Но дело не в этом, я нашел где ошибка, но пока что не в силах ее решить. Значит заключается она в том что страница создания темы состоит из главного блока (div#container) и двух второстепенных: блок с названием и содержимым темы(div#content) и блок отвечающий за опрос(div#right). Поле ввода название темы съезжало вниз из-за блока с опросом(div#right), который прятался за (div#content). Я поменял местами эти блоки и поле ввода стало отображаться нормально, но теперь блок с опросом вместо того чтоб находится справа от div#content, он находится под ним. Ошибка скорее всего в CSS.

Верстка:

<if test="open_close_perm:|:$formData['modOptionsData']['canSetOpenTime'] == 1 || $formData['modOptionsData']['canSetCloseTime'] == 1">
{parse addtohead="{$this->settings['public_dir']}style_css/{$this->registry->output->skin['_csscacheid']}/calendar_select.css" type="css"}
<script type='text/javascript' src='{$this->settings['public_dir']}js/3rd_party/calendar_date_select/calendar_date_select.js'></script>
</if>
{parse js_module="post"}
{parse striping="post_stripe" classes="row1,row2"}
<h1 class='ipsType_pagetitle'>{$formData['title']}</h1>
<br />
<!--FORUM RULES-->
<form id='postingform' action='{$this->settings['base_url']}' method='post' enctype='multipart/form-data'>
<div class='ipsBox ipsForm_vertical ipsLayout ipsLayout_withright ipsPostForm clearfix'>
<span class="boczki r"></span>
<span class="boczki l"></span>
<span class="topka b"></span>
<span class="topka t"></span>
<span class="rogi tl"></span>
<span class="rogi tr"></span>
<span class="rogi br"></span>
<span class="rogi bl"></span>
<!--Центральная панель-->
	<div class='ipsBox_container ipsLayout_content'>
		<ul class='ipsForm ipsForm_vertical ipsPad'>
			<if test="logged_in_check:|:!$this->memberData['member_id']">
				<li class='ipsField'>
					<label for='username' class='ipsField_title'>{$this->lang->words['guest_name']}</label>
					<p class='ipsField_content'>
						<input type='text' name='UserName' id='username' size='50' value='{$this->request['UserName']}' maxlength="{$this->settings['max_user_name_length']}" class='input_text' tabindex='0' />
					</p>
				</li>
				<if test="guestCaptcha:|:$formData['captchaHTML']">
					{$formData['captchaHTML']}
				</if>
			</if>
			<if test="edit_title_check:|:$formData['formType'] == 'new' OR ( $formData['formType'] == 'edit' AND $formData['canEditTitle'] )">
				<li class='ipsField ipsField_primary'>
					<label for='topic_title' class='ipsField_title'>{$this->lang->words['topic_title']}</label>
					<p class='ipsField_content'>
						<input id='topic_title' class='input_text' type="text" size="60" maxlength="{$this->settings['topic_title_max_len']}" name="TopicTitle" value="{$formData['topicTitle']}" tabindex="0" />
					</p>
				</li>
			</if>
			<if test="edit_tags_check:|:$formData['formType'] == 'new' OR ( $formData['formType'] == 'edit')">
				<if test="hazTag:|:$formData['tagBox']">
					<li class='ipsField tag_field'>
						<label for='ipbTags' class='ipsField_title'>{$this->lang->words['topic_tags']}</label>
						<p class='ipsField_content'>{$formData['tagBox']}</p>
					</li>
				</if>
			</if>

			<li class='ipsField ipsField_editor'>
				<if test="statusMsgs:|:is_array($formData['statusMsg']) AND count($formData['statusMsg']) AND strlen($formData['statusMsg'][0])">
					<div class='message'>{parse expression="implode( '<br />', $formData['statusMsg'])"}</div>
				</if>
				{$formData['editor']}
			</li>				
		</ul>
		<if test="upload_form_check:|:$formData['uploadForm']">
			<fieldset class='attachments'>
				{$formData['uploadForm']}
			</fieldset>
		</if>

	</div>
<!--Центральная панель-->
<!--Правая панель-->
    <div class='ipsBox_container ipsLayout_right ipsPostForm_sidebar'>
		<if test="pollboxHtml:|:$formData['pollBoxHTML']">
			<h3 class='bar'>{$this->lang->words['post_poll']}</h3>
			<fieldset id='poll_fieldset' class='ipsPad' style='display: none'>
				{$formData['pollBoxHTML']}
			</fieldset>
			<script type='text/javascript'>
				$('poll_fieldset').show();
			</script>
		</if>
		<div class='ipsPostForm_sidebar_block'>
			<h3 class='bar'>{$this->lang->words['post_options']}</h3>
			<ul class='ipsPad ipsForm ipsForm_vertical ipsType_small'>
			<if test="htmlstatus:|:$formData['checkBoxes']['html'] !== null">
				<li class='ipsField ipsField_checkbox'>
					<input type="checkbox" name="post_htmlstatus" class="input_check" value="1" id='post_htmlstatus' {$formData['checkBoxes']['html']} />
					<p class='ipsField_content'>
						<label for='post_htmlstatus' data-tooltip='{$this->lang->words['pp_html_tooltip']}'>{$this->lang->words['pp_html']}</label>
					</p>
				</li>
			</if>
				<li class='ipsField ipsField_checkbox'>
					<input type="checkbox" name="enableemo" class="input_check" value="yes" id='enable_emo' {$formData['checkBoxes']['emo']} />
					<p class='ipsField_content'>
						<label for='enable_emo'>{$this->lang->words['enable_emo']}</label>
					</p>
				</li>
			<if test="enablesig:|:$this->memberData['member_id']">
				<li class='ipsField ipsField_checkbox'>
					<input type="checkbox" name="enablesig" class="input_check" value="yes" id='enable_sig' {$formData['checkBoxes']['sig']} />
					<p class='ipsField_content'>
						<label for='enable_sig'>{$this->lang->words['enable_sig']}</label>
					</p>
				</li>
				<li class='ipsField ipsField_checkbox'>
					<input type="checkbox" name="enabletrack" class="input_check" id='enable_track' value="1" {$formData['checkBoxes']['tra']} <if test="tracking:|:$formData['checkBoxes']['tra'] == '-tracking-'">checked='checked'</if> />
					<p class='ipsField_content'>
						<label for='enable_track'>{$this->lang->words['enable_track']}</label>
					</p>
				</li>
			</if>
			</ul>
		</div>
		<if test="showModOptions:|:$formData['modOptionsData']['dropDownOptions'] || $formData['modOptionsData']['canSetOpenTime'] || $formData['modOptionsData']['canSetCloseTime']">
			<div class='ipsPostForm_sidebar_block'>
				<h3 class='bar'>{$this->lang->words['moderator_options']}</h3>
				<ul class='ipsPad ipsForm ipsForm_vertical'>
					<if test="mod_options_check:|:$formData['modOptionsData']['dropDownOptions'] != """>
						<li class='ipsField'>
							<label for='forminput'><strong>{$this->lang->words['after_posting_pf']}</strong></label>
							<p class='ipsField_content'>
								{$formData['modOptionsData']['dropDownOptions']}</select>
							</p>
						</li>
					</if>
					<if test="open_time_check:|:$formData['modOptionsData']['canSetOpenTime'] == 1 ">
						<li class='ipsField'>
							<label for='mod_open_date'><strong>{$this->lang->words['mod_open_time']}</strong></label>
							<p class='ipsField_content'>
								<input type='text' size='7' name='open_time_time' id='mod_open_time' class='date input_text' value='{$formData['modOptionsData']['myTimes']['open_time']}' /> 
								<input type='text' size='16' name='open_time_date' id='mod_open_date' class='input_text date' value='{$formData['modOptionsData']['myTimes']['open_date']}' />
								<img src='{$this->settings['img_url']}/date.png' alt='{$this->lang->words['generic_date']}' id='mod_open_date_icon' class='clickable' />
							</p>
						</li>
					</if>
					<if test="close_time_check:|:$formData['modOptionsData']['canSetCloseTime'] == 1">
						<li class='ipsField'>
							<label for='mod_close_date'><strong>{$this->lang->words['mod_close_time']}</strong></label>
							<p class='ipsField_content'>
								<input type='text' size='7' name='close_time_time' id='mod_close_time' class='date input_text' value='{$formData['modOptionsData']['myTimes']['close_time']}' /> 
								<input type='text' size='16' name='close_time_date' id='mod_close_date' class='date input_text' value='{$formData['modOptionsData']['myTimes']['close_date']}' />
								<img src='{$this->settings['img_url']}/date.png' alt='{$this->lang->words['generic_date']}' id='mod_close_date_icon' class='clickable' />
						</li>
					</if>
				</ul>
				<script type='text/javascript'>
					document.observe("dom:loaded", function(){
						if( $('mod_open_time') ){ $('mod_open_time').defaultize( "{$this->lang->words['mod_time_format']}" ); }
						if( $('mod_open_date') ){ $('mod_open_date').defaultize( "{$this->lang->words['mod_date_format']}" ); }
						if( $('mod_close_time') ){ $('mod_close_time').defaultize( "{$this->lang->words['mod_time_format']}" ); }
						if( $('mod_close_date') ){ $('mod_close_date').defaultize( "{$this->lang->words['mod_date_format']}" ); }
					});
				</script>
			</div>
		</if>
		<if test="edit_options_check:|:$formData['extraData']['showEditOptions']">
			<div class='ipsPostForm_sidebar_block'>
				<h3 class='bar'>{$this->lang->words['edit_options']}</h3>
				<ul class='ipsPad ipsForm ipsForm_vertical'>
					<li class='ipsField ipsField_checkbox'>
						<input type="checkbox" name="add_edit" value="1" id='append_edit' <if test="checkShowEdit:|:$formData['extraData']['checked']">checked="checked"</if> class="input_check" />
						<p class='ipsField_content'>
							<label for='append_edit'>{$this->lang->words['append_edit']}</label>
						</p>
					</li>
					<if test="showeditreason:|:$formData['extraData']['showReason']">
						<li class='ipsField'>
							<label for='post_edit_reason'><strong>{$this->lang->words['preason_for_edit']}</strong></label>
							<p class='ipsField_content'>
								<input type="text" name="post_edit_reason" id='post_edit_reason' value="{$formData['extraData']['reasonForEdit']}" size='30' maxlength='250' class='input_text' />
							</p>
						</li>
					</if>
				</ul>
			</div>
		</if>
	</div>

<!--Конец Правая панель-->

	<if test="shareEnabled:|: ! $formData['socialShareOff']">
		{parse template="socialSharePostStrip" group="global_other"}
	</if>
</div>	

<fieldset class='submit clear'>
	<input type='hidden' name='st' value='{$this->request['st']}' />
	<input type='hidden' name='app' value='forums' />
	<input type='hidden' name='module' value='post' />
	<input type='hidden' name='section' value='post' />
	<input type='hidden' name='do' value='{$form['doCode']}' />
	<input type='hidden' name='s' value='{$this->member->session_id}' />
	<input type='hidden' name='p' value='{$form['p']}' />
	<input type='hidden' name='t' value='{$form['t']}' />
	<input type='hidden' name='f' value='{$form['f']}' />
	<input type='hidden' name='parent_id' value='{$form['parent']}' />
	<input type='hidden' name='attach_post_key' value='{$form['attach_post_key']}' />
	<input type='hidden' name='auth_key' value='{$this->member->form_hash}' />
	<input type='hidden' name='removeattachid' value='0' />
	<input type='hidden' name='return' value='{$this->request['return']}' />
	<input type='hidden' name='_from' value='{$this->request['_from']}' />
	<input type="submit" name="dosubmit" value="{$formData['buttonText']}" tabindex="3" class="input_submit" accesskey="s"  /> 
	<input type="submit" name="preview" value="{$this->lang->words['button_preview']}" tabindex="0" class="input_submit alt" />
	{$this->lang->words['or']}
	<if test="$this->request['return'] == 'modcp:unapproved'">
		<a href='{parse url="app=core&module=modcp&fromapp=forums&tab=unapprovedposts" base="public"}' title='{$this->lang->words['cancel']}' class='cancel' tabindex='0'>{$this->lang->words['cancel']}</a>
	<else />
		<if test="cancelposting:|:$form['t']">
			<a href='{parse url="showtopic={$form['t']}" template="showtopic" seotitle="{$formData['seoTopic']}" base="public"}' title='{$this->lang->words['cancel']}' class='cancel' tabindex='0'>{$this->lang->words['cancel']}</a>
		<else />
			<a href='{parse url="showforum={$form['f']}" template="showforum" seotitle="{$formData['seoForum']}" base="public"}' title='{$this->lang->words['cancel']}' class='cancel' tabindex='0'>{$this->lang->words['cancel']}</a>
		</if>
	</if>
</fieldset>
</form>
{$formData['topicSummary'][0]['html']}

CSS:

/* POSTING FORM STYLES */
/* Additional form styles for posting forms */

.ipsPostForm { }

.ipsPostForm.ipsLayout_withright {
	padding-right: 260px !important;
}

.ipsPostForm .ipsLayout_content {
	z-index: 900;
	-webkit-box-shadow: 2px 0px 4px rgba(0,0,0,0.1);
	-moz-box-shadow: 2px 0px 4px rgba(0,0,0,0.1);
	box-shadow: 2px 0px 4px rgba(0,0,0,0.1);
	float: none;
}

.ipsPostForm .ipsLayout_right {
	width: 250px;
	margin-right: -251px;
	border-left: 0;
	z-index: 800;
}

.ipsPostForm_sidebar .ipsPostForm_sidebar_block.closed h3 {
	background-image: url({style_images_url}/folder_closed.png );
	background-repeat: no-repeat;
	background-position: 10px 9px;
	padding-left: 26px;
	margin-bottom: 2px;
}

В идеале должно быть так:

но это я в фотошопе из кусков сделал)

Очень надеюсь на вашу помощь.

Edited October 20, 201213 yr by reddd

2 weeks later...

October 31, 201213 yr

Это проблему решило

.ipsPostForm .ipsLayout_right {

width: 250px;

border-left: 0;

z-index: 5000;

position: absolute;

top: 7px;

right: 9px;

}

Create an account or sign in to comment

Followers

Go to topic listing

No registered users viewing this page.

Sign In

[Шаблон] Создание темы

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)