Milk v2.0.6 - чистый и современный отзывчивый стиль для phpBB 3.2.

CabinetAdmin 17 фев 2024, 16:52 Сообщение

southklad писал(а): ↑16 фев 2024, 21:51звание

В responsive.css надо найти:

	.postprofile dt, .postprofile dd.profile-rank, .search .postprofile dd {
		display: block;
		margin: 0;
	}

и удалить отсюда .postprofile dd.profile-rank,

southklad писал(а): ↑16 фев 2024, 21:54 убрать вот это?

А это в posting_editor.html, но в стиле его нет, поэтому сначала его надо из просильвера скопировать и уже в нём удалять:

Код: Выделить всё

		<!-- IF BBCODE_STATUS -->
		<div class="bbcode-status">
			<!-- IF .smiley --><hr /><!-- ENDIF -->
			{BBCODE_STATUS}<br />
			<!-- IF S_BBCODE_ALLOWED -->
				{IMG_STATUS}<br />
				{FLASH_STATUS}<br />
				{URL_STATUS}<br />
			<!-- ENDIF -->
			{SMILIES_STATUS}
		</div>
		<!-- ENDIF -->

а кнопка Обзор темы сразу ниже:

Код: Выделить всё

		<!-- IF S_EDIT_DRAFT || S_DISPLAY_REVIEW -->
			<!-- IF S_DISPLAY_REVIEW --><hr /><!-- ENDIF -->
			<!-- IF S_EDIT_DRAFT --><strong><a href="{S_UCP_ACTION}">{L_BACK_TO_DRAFTS}</a></strong><!-- ENDIF -->
			<!-- IF S_DISPLAY_REVIEW --><strong><a href="#review">{L_TOPIC_REVIEW}</a></strong><!-- ENDIF -->
		<!-- ENDIF -->

southklad 17 фев 2024, 18:54 Сообщение

СПАСИБО

CabinetAdmin 06 мар 2024, 17:32 Сообщение

Сообщения по стилю ca_forum.3.2 перенесены в тему стиля - viewtopic.php?t=4870

southklad 01 янв 2025, 21:56 Сообщение

Приветсвую, подскажите, как перенести логотип в меню слева?

CabinetAdmin 02 янв 2025, 11:31 Сообщение

Честно говоря я не понял. Иконки у вот этих вот пунктов меню? Так они вроде как и так слева?...

Или вы про лого сайта? Если да, то это надо удалить text-align: center; в merlin.css:

Код: Выделить всё

.particles_container  {
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-size: 0; /* Fix white space */
  text-align: center;
}

ну и наверно надо будет с отступами ещё поиграться, если потребуется.

southklad 02 янв 2025, 13:45 Сообщение

Нее, мне нужно перенести вообще лого сайта вот сюда

CabinetAdmin 02 янв 2025, 15:22 Сообщение

Опишу два варианта.
Первый, это когда при уменьшении экрана лого остаётся выше навигации и второй когда под ней.

Первый. Как обычно файл overall_header.html:

Код: Выделить всё

<!-- INCLUDE navbar_header.html -->

меняем на:

Код: Выделить всё

<div class="header-flex">
	<div class="header-flex-logo">
		<!-- IF FORUM_LOGO -->
			<a href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">{FORUM_LOGO}</a>
		<!-- ELSE -->
			<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
		<!-- ENDIF -->
	</div>
	<!-- INCLUDE navbar_header.html -->
</div>

Стили:

Код: Выделить всё

.header-flex {
	display: flex;
	min-width: 0;
	margin-bottom: 50px;
}

.header-flex-logo {
	margin-right: 20px;
	padding: 5px 10px;
}

.header-flex .navbar {
	flex: 1;
}

@media (max-width: 700px) {
	.header-flex {
		display: block
	}

	.header-flex-logo {
		margin-right: 0;
	}

	.header-flex-logo .site_logo {
		margin: 15px 0;
	}
}

Второй вариант, тоже самое, но меняем на:

Код: Выделить всё

<div class="header-flex">
	<!-- INCLUDE navbar_header.html -->
	<div class="header-flex-logo">
		<!-- IF FORUM_LOGO -->
			<a href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">{FORUM_LOGO}</a>
		<!-- ELSE -->
			<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
		<!-- ENDIF -->
	</div>
</div>

Стили:

Код: Выделить всё

.header-flex {
	display: flex;
	min-width: 0;
	margin-bottom: 50px;
	flex-direction: row-reverse;
}

.header-flex-logo {
	margin-right: 20px;
	padding: 5px 10px;
}

.header-flex .navbar {
	flex: 1;
}

@media (max-width: 700px) {
	.header-flex {
		flex-direction: column;
	}

	.header-flex-logo {
		margin-right: 0;
	}

	.header-flex-logo .site_logo {
		margin: 15px 0;
	}
}

Сейчас для обоих вариантов, если нужно чтобы лого было посередине, то нужно добавить text-align: center; к:

Код: Выделить всё

	.header-flex-logo {
		margin-right: 0;
	}

Далее. По сути стандартное место для лого не нужно, поэтому всё что начинается с <div class="headerbar и заканчивается </div> можно удалить.
Либо, если, допустим, оставить этот блок, но без лого, а только с названием и описанием, тогда вот это:

Код: Выделить всё

                        <div id="site-description" class="site-description<!-- IF STYLE_SETTINGS_CONFIG_LOGO_POSITION == 'Left' --> logo_left<!-- ELSEIF STYLE_SETTINGS_CONFIG_LOGO_POSITION == 'Right' --> logo_right<!-- ENDIF -->">
                            <!-- IF STYLE_SETTINGS_CONFIG_HEADER_FORMAT == 'Logo Only' -->
                                <!-- IF FORUM_LOGO -->
                                	<a href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">{FORUM_LOGO}</a>
                                <!-- ELSE -->
                                	<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
								<!-- ENDIF -->
                            <!-- ELSEIF STYLE_SETTINGS_CONFIG_HEADER_FORMAT == 'Sitename and Description Only' -->
                                <h1>{SITENAME}</h1>
                                <p>{SITE_DESCRIPTION}</p>
                            <!-- ELSE -->
                                <!-- IF FORUM_LOGO -->
                                	<a href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">{FORUM_LOGO}</a>
                                <!-- ELSE -->
                                	<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
								<!-- ENDIF -->
                                <h1>{SITENAME}</h1>
                                <p>{SITE_DESCRIPTION}</p>
                            <!-- ENDIF -->                            
                        </div>

можно убавить до:

Код: Выделить всё

					<div id="site-description" class="site-description">
						<h1>{SITENAME}</h1>
						<p>{SITE_DESCRIPTION}</p>                           
					</div>

Если принято решение оставлять, то margin-bottom: 50px; у .header-flex { можно удалить (лишний отступ получается).

southklad 04 янв 2025, 12:30 Сообщение

Спасибо, получилось, то что нужно

southklad 04 янв 2025, 18:47 Сообщение

Еще такой вопрос, а как для версии для ПК тут сделать поиск в виде поля, а не кнопки?

CabinetAdmin 05 янв 2025, 19:07 Сообщение

Надо скопировать из просильвера форму поиска и вставить в блок меню (navbar_header.html), но поменяв div на li, вот так:

Код: Выделить всё

			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<li id="search-box" class="search-box search-header" role="search" data-last-responsive="true">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</li>
			<!-- ENDIF -->

По сути всё, надо будет только подправить стили (forms.css в самом конце), в первую очередь margin-top, плюс скорее всего надо будет добавить:

Код: Выделить всё

.search-header .button-search-end {
	padding-top: 1px;
	padding-bottom: 1px;
}

Возможно не 1px, а 2 или 0, тут надо по месту смотреть. Это для шестерёнки. Если её удалить:

Код: Выделить всё

					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>

то и код не нужен тогда будет.

Не проверял.

southklad 06 янв 2025, 22:10 Сообщение

Спасибо, то что нужно, а как сделать, чтобы эта форма не появлялась в скрытом меню, а появлялась просто надпись с иконкой?

: Milk v2.0.6 - чистый и современный отзывчивый стиль для phpBB 3.2. - screenshot_282.jpg (37.78 КБ) 631 просмотр

Так же для гостей убрал все с поля ссылки там FAQ и прочее, просто удалив из шаблона, но при загрузке на секунду появляется меню пустое

: Milk v2.0.6 - чистый и современный отзывчивый стиль для phpBB 3.2. - screenshot_283.jpg (2.24 КБ) 630 просмотров

Как бы это все убрать появление?

CabinetAdmin 08 янв 2025, 17:02 Сообщение

Из вариантов только в "Ссылки" добавить/вернуть пункт поиска:

Код: Выделить всё

					<!-- IF S_DISPLAY_SEARCH -->
						<li>
							<a href="{U_SEARCH}" role="menuitem">
								<i class="icon fa-search fa-fw" aria-hidden="true"></i><span>{L_SEARCH}</span>
							</a>
						</li>
					<!-- ENDIF -->

А для формы добавить костыль, чтобы при сворачивании он не отображался:

Код: Выделить всё

.dropdown .search-header {
	display: none !important;
}

southklad писал(а): ↑06 янв 2025, 22:10 Как бы это все убрать появление?

Я честно говоря не понял, вы удалили все ссылки во всплывашке "Ссылки"? И надо чтобы пункт меню "Ссылки" не появлялся?

southklad 09 янв 2025, 13:20 Сообщение

CabinetAdmin писал(а): ↑08 янв 2025, 17:02 Я честно говоря не понял, вы удалили все ссылки во всплывашке "Ссылки"? И надо чтобы пункт меню "Ссылки" не появлялся?

Да удалил за ненадобностью, но на доли секунды при загрузке страницы появляется надпись Ссылки и потом исчезает

CabinetAdmin 09 янв 2025, 16:56 Сообщение

Можно попробовать добавить класс hidden к <li id="quick-links" class="quick-links, или вернее не добавить, он там уже есть, а удалить условия для его вывода, оставив только класс и, если в блоке нет не одного пункта, ссылка не появится.

Отсюда переносимся к предыдущему вопросу по пункту поиска, раз у вас все пункты меню удалены. На phpbb скрипты устроены так, что пункты меню просто копируются в quick-links в том виде в каком они есть, поэтому во всплывашку будет добавляться именно форма, а не просто ссылка. Тут тогда нужен другой подход, вместо просто формы ставим:

Код: Выделить всё

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<li id="search-box" class="search-box search-header" role="search">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</li>
			<li class="search-box-menuitem">
				<a href="{U_SEARCH}" role="menuitem">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span>{L_SEARCH}</span>
				</a>
			</li>
		<!-- ENDIF -->

И стили:

Код: Выделить всё

.search-header .button-search-end {
	padding-top: 1px;
	padding-bottom: 1px;
}

.nav-main > .search-box-menuitem,
.dropdown .search-header {
	display: none !important;
}

Опять же повторюсь - 1px это для шестерёнки, может быть понадобится, может нет, если нет - удалить.

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

southklad 11 янв 2025, 14:05 Сообщение

Спасибо в очередной раз!!!

Еще вопрос, вывожу количество просмотров тут

Когда есть навигация по страницам, все норм, а вот когда нет все съезжает

Код ниже, уже как только не пробовал через css сделать, не найду золотую средину

Код: Выделить всё

<!-- IF TOPIC_VIEWS --><p style="margin-right: 5px;margin-top: 7px;" class="pagination"><strong style="color: #0a7d00;">{TOPIC_VIEWS}</strong> просмотров</p><!-- ENDIF -->

Milk v2.0.6 - чистый и современный отзывчивый стиль для phpBB 3.2.

Gaus

Похожие темы