Search form

smalir

Hi!

Initially, this template does not have a search box. I can add a regular search at the top of the page, but it looks awful. How to make stretchable search box, as in the template JA Flix? I want to try two options (page for example: https://tocrete.com/friends):

Add search box at top position (to the right of the social icons). How can I do it?
Try to add a search box in "header" to the right of the menu. How I can do it?

Thank you.

saguaros

Hi smalir

The idea is that you can edit the header block on your site: https://prnt.sc/sk68cd

By loading the position you wish like 'head-search' for example and assign the search module to this position.

Then, you must customize style for this module.

Regards

smalir

saguaros, thank you! I successfully integrated the search module into the header block. But I didn't publish it yet, because I can’t create the style for the stretch search form. I tried to learn JA Flix template, but can't understand, how does it works 🙁

UPD. I found class .head-search in JA Flix. Could I use this class for JA Eventcamp? Shall I add all this code to my custom.css or just some part?:

.head-search .search,
.head-search .form-search {
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
  height: 96px;
  width: 96px; }
  @media (max-width: 767.98px) {
    .head-search .search,
    .head-search .form-search {
      height: 64px;
      width: 64px; } }
  .head-search .search label,
  .head-search .search .btn,
  .head-search .form-search label,
  .head-search .form-search .btn {
    display: none !important; }
  .head-search .search .form-control, .head-search .search .inputbox,
  .head-search .search .search-query,
  .head-search .form-search .form-control,
  .head-search .form-search .inputbox,
  .head-search .form-search .search-query {
    background-image: url("../images/search.png");
    background-position: 40px center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    color: #343a40;
    position: absolute;
    padding: 0 0 0 96px;
    right: 0;
    top: 0;
    height: 96px;
    max-width: none;
    z-index: 10;
    width: 96px;
    -webkit-transition: 500ms all;
    -o-transition: 500ms all;
    transition: 500ms all; }
    @media (max-width: 767.98px) {
      .head-search .search .form-control, .head-search .search .inputbox,
      .head-search .search .search-query,
      .head-search .form-search .form-control,
      .head-search .form-search .inputbox,
      .head-search .form-search .search-query {
        background-position: 25px center;
        padding: 0 0 0 64px;
        height: 64px;
        width: 64px; } }
    .head-search .search .form-control:focus, .head-search .search .inputbox:focus,
    .head-search .search .search-query:focus,
    .head-search .form-search .form-control:focus,
    .head-search .form-search .inputbox:focus,
    .head-search .form-search .search-query:focus {
      background-color: #080808;
      color: #fff;
      width: 384px;
      padding-right: 1.6rem; }
      @media (max-width: 767.98px) {
        .head-search .search .form-control:focus, .head-search .search .inputbox:focus,
        .head-search .search .search-query:focus,
        .head-search .form-search .form-control:focus,
        .head-search .form-search .inputbox:focus,
        .head-search .form-search .search-query:focus {
          width: 192px; } }

And I can't understand how to use icons fa-search instead of picture ../images/search.png for collapsed search form? Could you tell me the best solution (css class for search form) for this template?

saguaros

Hi smalir

That style is applied for JA Flix special, if you want to bring style from one template to another, you will have to customize it much.

smalir

saguaros, Yes, I get it 🙂 Yesterday I experimented a lot with this class and understood that everything is not so simple. So strange that most of the latest templates are released without special class for a search forms 🙁

Is there any tutorial about customize search form for JA templates?

saguaros

smalir

Unfortunately, there is not that special documentation for customizing search form. You can check how it's customize in other template and apply the same for this template. If you're not familiar with coding, I suggest you to hire a developer to get it done for you.

Regards