Merhaba Arkadaşlar,
Bununla ilgili bir kaynak bulamadım buradan da bir paylaşım olmadığı için konusunu açmak istedim.
Bu şekilde bir arama alanı nasıl yapabilirsiniz;
Öncelikle PAGE_CONTAINER şablonumuzu açıyoruz.
Daha sonra aşağıdaki satırı buluyoruz;
Bunun Sonuna aşağıdaki kodu ekliyoruz.
Bu aynı zamanda açık arama alanı mobilde de pasif olacak yani gözükmeyecek. PAGE_CONTAINER sayfası ile işimiz bitti.
Şimdi. core_menu.less şablonunu açıyoruz ve aşağıdaki css kodlarını satır sonuna ekliyoruz ve biraz görüntü katmış oluyoruz.
BUNLARI DENERKEN MUTLAKA YEDEK ALIN.
Takıldığınız bir şey olursa yazın cevaplarım elimden geldiğince.
Bununla ilgili bir kaynak bulamadım buradan da bir paylaşım olmadığı için konusunu açmak istedim.
Bu şekilde bir arama alanı nasıl yapabilirsiniz;
Öncelikle PAGE_CONTAINER şablonumuzu açıyoruz.
Daha sonra aşağıdaki satırı buluyoruz;
PHP:
<div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected">
<div class="hScroller-scroll">
<ul class="p-nav-list js-offCanvasNavSource">
<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
<li>
<xf:macro name="nav_entry"
arg-navId="{$navSection}"
arg-nav="{$navEntry}"
arg-selected="{{ $navSection == $pageSection }}"
arg-shortcut="{$i}" />
</li>
</xf:foreach>
</ul>
</div>
</div>Bunun Sonuna aşağıdaki kodu ekliyoruz.
HTML:
<!-- arama -->
<xf:if is="$xf.visitor.canSearch()">
<div class="nomobile">
<div class="" data-menu="menu" aria-hidden="true">
<form action="{{ link('search/search') }}" method="post"
class="menu-content-ana"
data-xf-init="quick-search">
<div class="menu-row-ana">
<xf:if is="$searchConstraints">
<div class="inputGroup inputGroup--joined">
<xf:textbox name="keywords"
placeholder="{{ phrase('search...') }}"
aria-label="{{ phrase('search') }}"
data-menu-autofocus="true" />
</div>
<xf:else />
<xf:textbox name="keywords"
placeholder="{{ phrase('search...') }}"
aria-label="{{ phrase('search') }}"
data-menu-autofocus="true" />
</xf:if>
</div>
<xf:csrf />
</form>
</div>
</div>
</xf:if>
<!-- arama -->Bu aynı zamanda açık arama alanı mobilde de pasif olacak yani gözükmeyecek. PAGE_CONTAINER sayfası ile işimiz bitti.
Şimdi. core_menu.less şablonunu açıyoruz ve aşağıdaki css kodlarını satır sonuna ekliyoruz ve biraz görüntü katmış oluyoruz.
BUNLARI DENERKEN MUTLAKA YEDEK ALIN.
Takıldığınız bir şey olursa yazın cevaplarım elimden geldiğince.
CSS:
.menu-row-ana
{
.m-clearFix();
&.menu-row--alt
{
.xf-contentAltBase();
}
&.menu-row--highlighted
{
.xf-contentHighlightBase();
}
&.menu-row--close
{
padding-left: @_menu-closePaddingH;
padding-right: @_menu-closePaddingH;
}
&.menu-row--separated
{
+ .menu-row
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
}
&.menu-row--clickable:hover
{
background: @xf-contentHighlightBg;
}
&:empty
{
padding: 0;
}
}
.anaarama {
font-size: 15px;
color: #141414;
background: #3f4257;
border: 1px solid #d8d8d8;
border-top-color: var(--input-border-heavy);
border-right-color: var(--input-border-light);
border-bottom-color: var(--input-border-light);
border-left-color: var(--input-border-heavy);
border-radius: 4px;
padding: 11px;
display: block;
width: 100%;
line-height: 1.4;
text-align: left;
word-wrap: break-word;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.menu-content-ana {
margin-bottom: 8px;
}
@media screen and (max-width: 600px) {
.nomobile {
visibility: hidden;
clear: both;
float: right;
margin: 5px auto;
width: 22%;
height: auto;
display: none; // Önemli olan nokta burası burayı kaldırırsanız sadece mobile için görüntülenir.
}
}
