Страница 1 из 1
Помогите с кнопками
Добавлено: 04 мар 2018, 08:35
Gaus
Всем привет ребят! Помогите пожалуйста с кнопками.
Идея такая что хочу сделать красивые застеклённые кнопки в место этого на скриншоте.
Куда копать в файлах и какой код в CSS.
Помогите с кнопками
Добавлено: 04 мар 2018, 09:03
CabinetAdmin
Это место находится в файле navbar_header:
Код: Выделить всё
<li class="breadcrumbs">
<!-- IF U_SITE_HOME -->
<span class="crumb" {$MICRODATA}><a href="{U_SITE_HOME}" itemprop="url" data-navbar-reference="home"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span itemprop="title">{L_SITE_HOME}</span></a></span>
<!-- ENDIF -->
<!-- EVENT overall_header_breadcrumb_prepend -->
<span class="crumb" {$MICRODATA}><a href="{U_INDEX}" itemprop="url" accesskey="h" data-navbar-reference="index"><!-- IF not U_SITE_HOME --><i class="icon fa-home fa-fw"></i><!-- ENDIF --><span itemprop="title">{L_INDEX}</span></a></span>
<!-- BEGIN navlinks -->
<!-- EVENT overall_header_navlink_prepend -->
<span class="crumb" {$MICRODATA}<!-- IF navlinks.MICRODATA --> {navlinks.MICRODATA}<!-- ENDIF -->><a href="{navlinks.U_VIEW_FORUM}" itemprop="url"><span itemprop="title">{navlinks.FORUM_NAME}</span></a></span>
<!-- EVENT overall_header_navlink_append -->
<!-- END navlinks -->
<!-- EVENT overall_header_breadcrumb_append -->
</li>
первая иконка -
<i class="icon fa-home fa-fw" aria-hidden="true"></i>
, можно удалить, если не нужна, либо заменить на картинку:
<img src="./images/image.png" alt="" />
.
Остальные пункты формируются кодом между:
<!-- BEGIN navlinks --> ... <!-- END navlinks -->
.
Единственный способ добавить к последним двум пунктам меню картинки, это добавить перед или заменить
<span itemprop="title">{navlinks.FORUM_NAME}</span>
на:
Код: Выделить всё
<img src="./images/image_forum{navlinks.FORUM_ID}.png" alt="" />
после чего закачать на сервер картинки с именами image_forum1.png, image_forum2.png и тд., где цифра соответствует id форума.
Помогите с кнопками
Добавлено: 10 мар 2018, 17:59
Gaus
+CabinetAdmin
CabinetAdmin писал(а):Это место находится в файле navbar_header:
Код: Выделить всё
<li class="breadcrumbs">
<!-- IF U_SITE_HOME -->
<span class="crumb" {$MICRODATA}><a href="{U_SITE_HOME}" itemprop="url" data-navbar-reference="home"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span itemprop="title">{L_SITE_HOME}</span></a></span>
<!-- ENDIF -->
<!-- EVENT overall_header_breadcrumb_prepend -->
<span class="crumb" {$MICRODATA}><a href="{U_INDEX}" itemprop="url" accesskey="h" data-navbar-reference="index"><!-- IF not U_SITE_HOME --><i class="icon fa-home fa-fw"></i><!-- ENDIF --><span itemprop="title">{L_INDEX}</span></a></span>
<!-- BEGIN navlinks -->
<!-- EVENT overall_header_navlink_prepend -->
<span class="crumb" {$MICRODATA}<!-- IF navlinks.MICRODATA --> {navlinks.MICRODATA}<!-- ENDIF -->><a href="{navlinks.U_VIEW_FORUM}" itemprop="url"><span itemprop="title">{navlinks.FORUM_NAME}</span></a></span>
<!-- EVENT overall_header_navlink_append -->
<!-- END navlinks -->
<!-- EVENT overall_header_breadcrumb_append -->
</li>
первая иконка -
<i class="icon fa-home fa-fw" aria-hidden="true"></i>
, можно удалить, если не нужна, либо заменить на картинку:
<img src="./images/image.png" alt="" />
.
Остальные пункты формируются кодом между:
<!-- BEGIN navlinks --> ... <!-- END navlinks -->
.
Единственный способ добавить к последним двум пунктам меню картинки, это добавить перед или заменить
<span itemprop="title">{navlinks.FORUM_NAME}</span>
на:
Код: Выделить всё
<img src="./images/image_forum{navlinks.FORUM_ID}.png" alt="" />
после чего закачать на сервер картинки с именами image_forum1.png, image_forum2.png и тд., где цифра соответствует id форума.
[ Свернуть ]
Чуточку сделал по другому взяв расширение тут из одних топиков в теме, меню получилось вот так.
Меню стиля просто спрятал через код в стиле. Почистив кеш.
Получилось вот такое стеклянное как и задумывал.