Jump to content

Edit History

Prestafan33

Prestafan33

Si quieres que sólo aparezca desplegado en el index se puede conseguir así: 

#index #mobile-header #search-widget-mobile {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: scale(1)!important;
}

Ahora bien, si lo que quieres es que se pueda luego replegar, la solución sólo con CSS no es posible. Habría que eliminar el CSS anterior, y entonces hay dos posibilidades:

1: Con Javascript:

Bastaría poner esto al final del archivo /theme/nombre-de-tu-tema/assets/js/custom.js 

$(document).ready(function() {
  if ($("#index").length > 0) {
    $("#mobile-btn-search .m-nav-btn").click();
  }
});

Esto hace que al finalizar la carga del documento se "haga click" automáticamente sobre el botón de la lupa (sólo en la página del index).

2: Modificando el código del módulo de búsqueda:

El módulo que se encarga de crear ese botón y ese buscador es el ps_searchbar. Por lo tanto, abre el archivo /themes/nombre-de-tu-tema/modules/ps_searchbar/ps_searchbar.tpl, y busca dentro del archivo este código: 

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="false">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget">

... y modifícalo así: 

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search {if $page.page_name=='index'}show{/if}">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="{if $page.page_name=='index'}true{else}false{/if}">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget {if $page.page_name=='index'}show{/if}">

Ojo, porque es posible que el código dentro del TPL no sea exactamente el que yo he puesto arriba, sino que puede tener ifs y otras modificaciones. Lo importante es dejarlo como esté originalmente y añadir únicamente los tres {ifs} que te indico, que añaden las dos clases "show" al primer y último div, y que asigna el valor "true" al "aria-expanded" del elemento <a>  de enmedio.

Ésta última solución es la mejor de todas, aunque también la que lleva un poquito más de trabajo implementar.

Prestafan33

Prestafan33

Si quieres que sólo aparezca desplegado en el index se puede conseguir así: 

#index #mobile-header #search-widget-mobile {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: scale(1)!important;
}

Ahora bien, si lo que quieres es que se pueda luego replegar, la solución sólo con CSS no es posible. Habría que eliminar el CSS anterior, y entonces hay dos posibilidades:

1: Con Javascript: 

$(document).ready(function() {
  if ($("#index").length > 0) {
    $("#mobile-btn-search .m-nav-btn").click();
  }
});

Esto hace que al finalizar la carga del documento se "haga click" automáticamente sobre el botón de la lupa (sólo en la página del index).

2: Modificando el código del módulo de búsqueda:

El módulo que se encarga de crear ese botón y ese buscador es el ps_searchbar. Por lo tanto, abre el archivo /themes/nombre-de-tu-tema/modules/ps_searchbar/ps_searchbar.tpl, y busca dentro del archivo este código: 

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="false">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget">

... y modifícalo así: 

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search {if $page.page_name=='index'}show{/if}">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="{if $page.page_name=='index'}true{else}false{/if}">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget {if $page.page_name=='index'}show{/if}">

Ojo, porque es posible que el código dentro del TPL no sea exactamente el que yo he puesto arriba, sino que puede tener ifs y otras modificaciones. Lo importante es dejarlo como esté originalmente y añadir únicamente los tres {ifs} que te indico, que añaden las dos clases "show" al primer y último div, y que asigna el valor "true" al "aria-expanded" del elemento <a>  de enmedio.

Ésta última solución es la mejor de todas, aunque también la que lleva un poquito más de trabajo implementar.

Prestafan33

Prestafan33

Si quieres que sólo aparezca desplegado en el index se puede conseguir así: 

#index #mobile-header #search-widget-mobile {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: scale(1)!important;
}

Ahora bien, si lo que quieres es que se pueda luego replegar, la solución sólo con CSS no es posible. Habría que eliminar el CSS anterior, y entonces hay dos posibilidades:

1: Con Javascript: 

$(document).ready(function() {
  if ($("#index").length > 0) {
    $("#mobile-btn-search .m-nav-btn").click();
  }
});

Esto hace que al finalizar la carga del documento se "haga click" automáticamente sobre el botón de la lupa (sólo en la página del index).

2: Modificando el código del módulo de búsqueda:

El módulo que se encarga de crear ese botón y ese buscador es el ps_searchbar. Por lo tanto, abre el archivo /themes/nombre-de-tu-tema/modules/ps_searchbar/ps_searchbar.tpl, y busca dentro del archivo este código: 

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="false">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget">

... y modifícalo así: 

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search {if $page.page_name=='index'}show{/if}">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="{if $page.page_name=='index'}true{else}false{/if}">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget {if $page.page_name=='index'}show{/if}">

Ojo, porque es posible que el código dentro del TPL no sea exactamente el que yo he puesto arriba, sino que puede tener ifs y otras modificaciones. Lo importante es dejarlo como está y añadir únicamente los tres {ifs} que te indico, que añaden las dos clases "show" al primer y último div, y que asigna el valor "true" al "aria-expanded" del elemento <a>  de enmedio.

Ésta última solución es la mejor de todas, aunque también la que lleva un poquito más de trabajo implementar.

Prestafan33

Prestafan33

Si quieres que sólo aparezca desplegado en el index se puede conseguir así: 

#index #mobile-header #search-widget-mobile {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: scale(1)!important;
}

Ahora bien, si lo que quieres es que se pueda luego replegar, la solución sólo con CSS no es posible. Habría que eliminar el CSS anterior, y entonces hay dos posibilidades:

1: Con Javascript: 

$(document).ready(function() {
  if ($("#index").length > 0) {
    $("#mobile-btn-search .m-nav-btn").click();
  }
});

Esto hace que al finalizar la carga del documento se "haga click" automáticamente sobre el botón de la lupa (sólo en la página del index).

2: Modificando el código del módulo de búsqueda:

El módulo que se encarga de crear ese botón y ese buscador es el ps_searchbar. Por lo tanto, abre el archivo /themes/nombre-de-tu-tema/modules/ps_searchbar/ps_searchbar.tpl, y busca dentro del archivo este código: 

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="false">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget">

... y modifícalo así: 

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search {if page.page_name=='index'}show{/if}">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="{if page.page_name=='index'}true{else}false{/if}">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget {if page.page_name=='index'}show{/if}">

Ojo, porque es posible que el código dentro del TPL no sea exactamente el que yo he puesto arriba, sino que puede tener ifs y otras modificaciones. Lo importante es dejarlo como está y añadir únicamente los tres {ifs} que te indico, que añaden las dos clases "show" al primer y último div, y que asigna el valor "true" al "aria-expanded" del elemento <a>  de enmedio.

Ésta última solución es la mejor de todas, aunque también la que lleva un poquito más de trabajo implementar.

Prestafan33

Prestafan33

Si quieres que sólo aparezca desplegado en el index se puede conseguir así: 

#index #mobile-header #search-widget-mobile {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: scale(1)!important;
}

Ahora bien, si lo que quieres es que se pueda luego replegar, la solución sólo con CSS no es posible. Habría que eliminar el CSS anterior, y entonces hay dos posibilidades:

1: Con Javascript: 

$(document).ready(function() {
  if ($("#index").length > 0) {
    $("#mobile-btn-search .m-nav-btn").click();
  }
});

Esto hace que al finalizar la carga del documento se "haga click" automáticamente sobre el botón de la lupa (sólo en la página del index).

2: Modificando el código del módulo de búsqueda:

El módulo que se encarga de crear ese botón y ese buscador es el ps_searchbar. Por lo tanto, abre el archivo /themes/nombre-de-tu-tema/modules/ps_searchbar.tpl, y busca dentro del archivo este código: 

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="false">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget">

... y modifícalo así: 

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search {if page.page_name=='index'}show{/if}">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="{if page.page_name=='index'}true{else}false{/if}">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget {if page.page_name=='index'}show{/if}">

Ojo, porque es posible que el código dentro del TPL no sea exactamente el que yo he puesto arriba, sino que puede tener ifs y otras modificaciones. Lo importante es dejarlo como está y añadir únicamente los tres {ifs} que te indico, que añaden las dos clases "show" al primer y último div, y que asigna el valor "true" al "aria-expanded" del elemento <a>  de enmedio.

Ésta última solución es la mejor de todas, aunque también la que lleva un poquito más de trabajo implementar.

×
×
  • Create New...