Post by hhkkbb » Sun Mar 24, 2019 5:20 pm

https://imgur.com/a/osYIwOQ

Is it possible to increase the width of the searchbar?? (to match with my logo)

OC 3.0.3.3 - https://spearthemes.com/oc-light/


New member

Posts

Joined
Fri Oct 12, 2018 11:20 pm

Post by IP_CAM » Mon Mar 25, 2019 1:19 am

It's in the THEME header.twig file, and the WIDTH of the individual
Sections is defined by the Values ( sm-4 /sm-5 / sm-3 ) totalling '12' in a full row.
Samples, depending on the OC3 Version used:

Code: Select all

<div class="row">
      <div class="col-sm-4">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
      </div>
      <div class="col-sm-5">{{ search }}</div>
      <div class="col-sm-3">{{ cart }}</div>
    </div> 

Code: Select all

 <div class="row">
      <div class="col-md-3 col-lg-4">
        <div id="logo">
          {% if logo %}
            <a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-fluid"/></a>
          {% else %}
            <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}
        </div>
      </div>
      <div class="col-md-5">{{ search }}</div>
      <div class="col-md-4 col-lg-3">{{ cart }}</div>
    </div> 
But I assume, that you want to change the HEIGHT, according your
Image, not the WIDTH, as it looks, and such would have to be set in
the STYLESHEET.CSS File, by changing margin and padding
Values accordingly:

Code: Select all

/* search */
#search {
	margin-bottom: 10px;
}
#search .input-lg {
	height: 40px;
	line-height: 20px;
	padding: 0 10px;
}
#search .btn-lg {
	font-size: 15px;
	line-height: 18px;
	padding: 10px 35px;
	text-shadow: 0 1px 0 #FFF;
} 
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by cyclops12 » Mon Mar 25, 2019 1:24 am

you could try looking in your stylesheet.css file, normally in catalog/view/theme/YOUR_THEME/stylesheet/styleheet.css
And find

Code: Select all

#search .input-lg {
	height: 40px;
Change the height to suit your needs, you will also add the height to

Code: Select all

#search .btn-lg {
as well
Then you may also need to add the height to the cart button

Code: Select all

#cart.open > .btn {
to match

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am
Who is online

Users browsing this forum: Amazon [Bot] and 42 guests