Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

SimpleSearch SearchBox size change

Started by Gregor Hekro 9 years ago · 3 replies · 695 views
9 years ago

Hello,
when i add the search box
{% include 'partials/simplesearch_searchbox.html.twig' %}
in the Top of my Page the Box size is very long.
Where i can change the size to 300px width and 12px height?

thx

9 years ago

If you use the provided stylesheet and searchbox template it should be enough to override / extend the corresponding selector :
.search-wrapper .search-input .

9 years ago

@interface:
{% include 'partials/simplesearch_searchbox.html.twig' %}

Thank you, i found it in the simplesearch.css

But now when i put it in the navigation.html.twig

TWIG
{% include 'partials/simplesearch_searchbox.html.twig' %}

{% macro loop(page) %}
{% for p in page.children.visible %}
{% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
{% if p.children.visible.count > 0 %}
<li class="has-children {{ current_page }}">
<a href="{{ p.url }}">
{% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
{{ p.menu }}
<span></span>
</a>
<ul>
{{ _self.loop(p) }}
</ul>
</li>
{% else %}
<li class="{{ current_page }}">
<a href="{{ p.url }}">
{% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
{{ p.menu }}
</a>
</li>
{% endif %}
{% endfor %}
{% endmacro %}
<ul class="navigation">
{% if theme_config.dropdown.enabled %}
{{ _self.loop(pages) }}
{% else %}
{% for page in pages.children.visible %}
{% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
<li class="{{ current_page }}">
<a href="{{ page.url }}">
{% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}

TWIG
                {{ page.menu }}
            </a>
        </li>
    {% endfor %}
{% endif %}
{% for mitem in site.menu %}
    <li>
        <a href="{{ mitem.url }}">
            {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
            {{ mitem.text }}
        </a>
    </li>
{% endfor %}
{% if config.plugins.login.enabled and grav.user.username %}
    <li><i class="fa fa-lock"></i> {% include 'partials/login-status.html.twig' %}</li>
{% endif %}

</ul>

The Menue jump in the next line.
Also it scrolls down.

cu

Suggested topics

Topic Participants Replies Views Activity
Support · by Thomas, 1 week ago
2 51 8 hours ago
Support · by Anna, 2 days ago
2 58 10 hours ago
Support · by Justin Young, 11 hours ago
1 30 11 hours ago
Support · by Duc , 1 week ago
2 63 5 days ago
Support · by Colin Hume, 1 week ago
2 55 5 days ago