Аватара пользователя CabinetAdmin 25 окт 2014, 14:19

Стиль CA_Forum

Стиль CA_Forum для форумов на phpBB3.
Изображение
Как обычно, стиль созданный на базе prosilver, на HTML5. Стиль является адаптивным для всех современных браузеров.
Стиль представляет собой двухколоночный макет. Боковая колонка имеет фиксированную ширину, центральная колонка резиновая. При достижении установленной минимальной ширины экрана, боковая колонка меняет свою ширину на меньшую, и отображается в виде иконок.

Есть предустановленные моды, такие как функции из быстрого ответа. При нажатии кнопки "Комментировать" в форму ответа будет вставлено имя автора поста. Так же в форме быстрого ответа будут кнопки для вставки смайлов и небольшое количество ббкодов. Так же в стиле присутствует подсветка синтаксиса программного кода.
+Скриншоты
Небольшие дополнения.
При установке стиля на форум в нашей системе требуется небольшая допилка. Чтобы форма ответа отображалась правильно, нужно заменить содержимое шаблона posting_editor.html на сервере на содержимое этого же шаблона из архива.
Дополнение ббкодов в форме быстрого ответа делается вручную в шаблоне quickreply_editor.html, по образцу уже установленных ббкодов. Либо автоматизируется путём добавления перед закрывающим дивом:

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

<!-- BEGIN custom_tags -->
<a class="bbcode_button bbcode_{custom_tags.BBCODE_HELPLINE}" name="addbbcode{custom_tags.BBCODE_ID}" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{custom_tags.BBCODE_HELPLINE}">{custom_tags.BBCODE_TAG}</a>
<!-- END custom_tags -->
Где имя этого ббкода является частью класса, для добавление к нему иконки - bbcode_{custom_tags.BBCODE_HELPLINE}.
Сами иконки добавляются в файле forms.css перед:

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

/* Input field styles
---------------------------------------- */
По образцу уже установленных иконок.

Посмотреть стиль можно пока на нашем форуме. Ссылка имеется в разделе Работа форума.

Стиль не похож на обычные стили на phpbb. И для редактирования стиля нужно обладать хотя бы базовыми знаниями html и css. Это так же относится и к дополнению в стиле дополнительных блоков и тп. Так как по инструкциям они имеют стандартную структуру шаблонов чистого (в нашем случае) prosilver.
Комментарии: 328

eska 09 янв 2015, 18:44 Сообщение

Вроде пока ошибок не вижу, спасибо вам огромное за проделанную работу!
как добавить в сайдбар (вверхнее меню) иконку (кнопку) "блог форума" ?
  • 0

eska 09 янв 2015, 19:02 Сообщение

Я так понимаю, что нужно использовать воэ эти строки?

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

<!-- IF U_BLOG -->
					<li><a href="{U_BLOG}"><span style="color: #0000CD;"><img align="left" style="padding-right:2px" src="{T_THEME_PATH}/images/icon_mini_members.gif" width="12" height="13" alt="*" /> {L_BLOGS}</span></a></li>
				<!-- ENDIF -->
				<!-- IF U_MY_BLOG -->
					<li><a href="{U_MY_BLOG}"><span style="color: #0000CD;"><img align="left" style="padding-right:2px" src="{T_THEME_PATH}/images/icon_mini_message.gif" width="12" height="13" alt="*" /> {L_MY_BLOG}</span></a></li>
				<!-- ENDIF -->
Но тут много лишнего, не поможете убрать?
  • 0

CabinetAdmin 09 янв 2015, 21:29 Сообщение

Я не понял, что за верхний сайдбар?!...
Если в тот, что слева, то там была ссылка, вроде "заглушки":

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

		<nav>
			<a class="nav_home" href="/">{L_HOME}</a>
			<a class="nav_forum" href="{U_INDEX}">{L_INDEX}</a>
			<a class="nav_gallery" href="#">Gallery</a>
			<a class="nav_blog" href="#">Blogs</a>
последняя ссылка.
Если идти по инструкции, которую надо выполнять при установки мода, при смене стиля ту часть, где изменения производятся в шаблонах стиля. Так вот, инструкция говорит:
Open: styles/prosilver/template/overall_header.html
Comments
Do this for all prosilver based styles.
Find

Tip: This may be a partial find and not the whole line. Add before

Tip: Add these lines on a new blank line before the preceding line(s) to find.

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

				<!-- BEGIN blog_links -->
					<li class="{blog_links.CLASS}"><a href="{blog_links.URL}">{blog_links.TEXT}</a></li>
				<!-- END blog_links -->
В нашем случае можно заменить ту "заглушку", ссылкой такого вида:

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

			<!-- BEGIN blog_links -->
				<a class="nav_blog" href="{blog_links.URL}">{blog_links.TEXT}</a>
			<!-- END blog_links -->
Плюс я вижу, что отсутствуют картинки в правом верхнем блоке "Ссылки блога". Просто я вырезал те картинки из кода и стиля из-за невостребованности, а в этом моде они используются, оказывается...
Добавить в colours.css:

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

/* Icon images
---------------------------------------- */
.icon-members					{ background-image: url("{T_THEME_PATH}/images/blog/icon_members.gif"); }
.icon-ucp						{ background-image: url("{T_THEME_PATH}/images/blog/icon_ucp.gif"); }
.icon-register					{ background-image: url("{T_THEME_PATH}/images/blog/icon_register.gif"); }
.icon-bookmark					{ background-image: url("{T_THEME_PATH}/images/blog/icon_bookmark.gif"); }
.icon-bump						{ background-image: url("{T_THEME_PATH}/images/blog/icon_bump.gif"); }
Вроде только эти изображения... :scratch:
images.rar
1.34 КБ 337 скачиваний
распаковать архив в images/blog.

Можно любые другие картинки, главное назвать их такими же именами и чтобы были тех же размеров.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 10 янв 2015, 09:39 Сообщение

У меня есть вот такое меню:
Стиль CA_Forum - меню.jpg
Стиль CA_Forum - меню.jpg (52.18 КБ) 1684 просмотра
Я бы хотел каждому присвоить иконку, иконки я скачал, но не знаю как правильно прописать, вот мой код всего чуда:

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

<nav>
			<a class="nav_forum" href="{U_INDEX}">{L_INDEX}</a>
			<a class="nav_search" href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a>
			<a class="nav_gallery" href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}">{L_GALLERY}</a>
			<!-- BEGIN blog_links -->
				<a class="nav_blog" href="{blog_links.URL}">{blog_links.TEXT}</a>
			<!-- END blog_links -->
			<!-- IF S_USER_LOGGED_IN and not S_IS_BOT -->
				<a class="nav_message" href="{U_PRIVATEMSGS}">{L_PRIVATE_MESSAGES}<!-- IF S_USER_NEW_PRIVMSG --><span>+{S_USER_UNREAD_PRIVMSG}</span><!-- ENDIF --></a>
				<!-- IF PRIVATE_MESSAGE_INFO_UNREAD --><a class="message_unread nav_message" href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO_UNREAD}</a><!-- ENDIF -->
			<!-- ENDIF -->
			<!-- IF S_DISPLAY_TOPLIST --><a class="icon-thanks_toplist" href="{U_REPUT_TOPLIST}" title="{L_REPUT_TOPLIST}">{L_REPUT_TOPLIST}</a><!-- ENDIF -->
         <!-- IF S_DISPLAY_THANKSLIST --><a class="icon-thanks" href="{U_THANKSLIST}" title="{L_THANKS_USER}">{L_GRATITUDES}</a><!-- ENDIF -->
		</nav>
		

		<!-- IF S_DISPLAY_SEARCH -->
		<div class="search_topics">
			<ul>
				<!-- IF S_USER_LOGGED_IN --><li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li><!-- ENDIF -->
				<li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
				<li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
				<!-- IF S_LOAD_UNREADS --><li><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a></li><!-- ENDIF -->
				<!-- IF S_USER_LOGGED_IN --><li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li><!-- ENDIF -->
				<!-- IF not S_IS_BOT and U_MARK_TOPICS --><li><a href="{U_MARK_TOPICS}" accesskey="m">{L_MARK_TOPICS_READ}</a></li><!-- ELSEIF not S_IS_BOT and U_MARK_FORUMS --><li><a href="{U_MARK_FORUMS}" accesskey="m">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
			</ul>
		</div>
		<!-- ENDIF -->
Я попробовал вот так:

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

<img src="путь к файлу">
перед каждой строчкой, но ничего не вышло((
  • 0

CabinetAdmin 10 янв 2015, 10:11 Сообщение

Там уже есть иконки, у каждой ссылки свой класс и своя иконка, просто они отображаются при уменьшении экрана, когда форум достигает определённой ширины. Можно переставить это место...
Куда нибудь, можно в тот же colours.css:

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

.sidebar nav > a {
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding-left: 28px;
	margin: 0;
}

.nav_home		{background-image: url("{T_THEME_PATH}/images/icon_nav_home.png");}
.nav_forum		{background-image: url("{T_THEME_PATH}/images/icon_nav_forum.gif");}
.nav_gallery	{background-image: url("{T_THEME_PATH}/images/icon_nav_gallery.png");}
.nav_blog		{background-image: url("{T_THEME_PATH}/images/icon_nav_blog.png");}
.nav_doc		{background-image: url("{T_THEME_PATH}/images/icon_nav_doc.png");}
.nav_search		{background-image: url("{T_THEME_PATH}/images/icon_nav_search.png");}
.nav_message	{background-image: url("{T_THEME_PATH}/images/icon_nav_message.png");}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 10 янв 2015, 18:17 Сообщение

А как можно заменить окантовку иконок и подчёркивание тем при новых сообщений из красного в цвет шапки? (синий)
  • 0

CabinetAdmin 10 янв 2015, 19:10 Сообщение

Ты вроде уже задавал этот вопрос? Не? Вроде не попёрло тогда... или это про что-то другое было :unknown

Окантовку, если только заново нарисовать, потому что это иконка.
Подчёркивание, в links.css:

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

.unread h3 a {
	text-decoration: none;
	-moz-box-shadow: inset 0 -2px 0 #cc0000;
	box-shadow: inset 0 -2px 0 #cc0000;
}
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 10 янв 2015, 19:16 Сообщение

А, точно, спрашивал, неохота было рисовать и я забросил эту затею)
  • 0

eska 11 янв 2015, 09:01 Сообщение

Спасибо, изменил:)
  • 0

eska 11 янв 2015, 09:32 Сообщение

Каждый день всё новые и новые проблемы
Создал тестовый аккаунт, когда с него захожу, вместо логотипа показывает:

Хотя с моего (администраторского) всё показывает отлично
И
сегодня отредактировал иконку к подфоруму:
Стиль CA_Forum - subforum_unread.png
Стиль CA_Forum - subforum_unread.png (101 байт) 1669 просмотров
Вставляю сюда:

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

/gaz-autoclub.ru/public_html/styles/ca_forum/imageset
но она не меняется, хотя вот эта в эту же папку встала идеально
Стиль CA_Forum - forum-unread-2.png
Стиль CA_Forum - forum-unread-2.png (966 байт) 1669 просмотров
  • 0
Последний раз редактировалось eska 11 янв 2015, 10:04, всего редактировалось 2 раза.

eska 11 янв 2015, 09:37 Сообщение

Имя иконок не менял
  • 0

CabinetAdmin 11 янв 2015, 10:44 Сообщение

eska писал(а): Создал тестовый аккаунт, когда с него захожу, вместо логотипа показывает:
Ага, я тебе уже говорил как-то, пару дней назад. Потому что твоя иконка, это вложение. А это уже права доступа для вложений.
eska писал(а): но она не меняется
Стили - Наборы рисунков - стиль - Легенда подфорума
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 11 янв 2015, 10:48 Сообщение

CabinetAdmin писал(а): Потому что твоя иконка, это вложение.
Подправил, вставил в корень и изменил ссылку
CabinetAdmin писал(а): Стили - Наборы рисунков - стиль - Легенда подфорума
Я же говорил, что наборы рисункор у меня не работают, после перехода выдаёт ошибку:
[phpBB Debug] PHP Notice: in file [ROOT]/includes/acp/acp_styles.php on line 1518: Undefined index: IMG_ICON_MENTION
[phpBB Debug] PHP Notice: in file [ROOT]/includes/acp/acp_styles.php on line 1518: Undefined index: IMG_ICON_MENTION
  • 0

CabinetAdmin 11 янв 2015, 10:52 Сообщение

Ну тогда в imageset.cfg поменять

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

img_subforum_read = subforum_read.gif*9*11
img_subforum_unread = subforum_unread.gif*9*11
И потом обновить наборы рисунков, может ещё кэш очистить...

Или подожди, ты новые закинул с заменой, с тем же именем? Тогда просто обнови наборы рисунков.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 11 янв 2015, 11:04 Сообщение

Поменял на это

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

img_subforum_read = subforum_read.gif*9*11
img_subforum_unread = subforum_unread.png*9*11
вот на это поменял:) заработало:)))
  • 0

Похожие темы