Simple Styling for Search Results Page

[ahemilee]

Hello all,

Can anyone help me style a search results page for our website?  I just created it so it uses all the default styles, but I'm not that experienced with CSS to make it look better. I would like to keep it simple with a search box in the center of the page and a light gray background, something like this.  Our current search box is 100% width and when I try to reduce it to 50% and float to the center, it stays on the left side.  It currently looks like this.  Can anyone help me with the design? 

Thank you!

Celina

[miljkovicmisa · Accepted solution]

Hello @ahemilee ! 
For a block element to be in the middle of its container it needs it left and right margins to be set to auto, so it automatically centers.
In your case you would need the below rules:

.hs-search-field{
    width: 50%;
    margin: 5rem auto 0 auto;
}

As for the background you will need to address the input field, something like the code below:

.hs-search-field__bar form input {
  background-color: #ffffff;
}

If you need any further help, don't hesitate to ask!

If my answer helped you with your issue please mark it as a solution.

[Chris-M · Accepted solution]

Hey @ahemilee, 
If u also want the grey background you have to locate the container or row of the module. You could give it CSS inline styling with for example:

<div class="row-fluid" style="background: #e3e3e3"> </div>

Or the cleaner methode: just add a class to the <div></div>... lets call the class "lightGreyBG"

For example:
HTML:

<div class="row-fluid lightGreyBG">...</div>​

CSS:

.lightGreyBG {
  background:#e3e3e3;
}

 
Here u can see a preview how your page could look with @miljkovicmisa (hope you don't mind) CSS and the background color:
I also added the black font color. And adjusted the margin for the grey background.


Full CSS

.hs-search-field{
  width: 50%;
  margin: 2.5rem auto 2rem auto;
}
.hs-search-field__bar form input {
  background-color: #ffffff;
  color: #000;
}
.lightGreyBG {
    background:#e3e3e3;
}

 
- Chris

[miljkovicmisa · Accepted solution]

Hello @ahemilee , I'm glad we could help, this one is an interesting question actually, the only way that comes to my mind right now would be to check if the current template is a search results page, because it is a system page this would be consistent and safe to use.

So without further ado, here is what I would put in the <title></title> tag.

<title>
  {% if template_meta.templateType.name eq 'search_results' %}
    Search results for: {{ request.query_dict.term|escape }}
  {% else %}
    {{ page_meta.html_title }}
  {% endif %}
</title>

 This of course means you should modify the template file for your base, usually a base.html file inside the templates > layouts folder, depending on the theme you should be able to locate the head of the document anyway. 

[ahemilee]

Thank you @miljkovicmisa! That worked wonderfully, you are awesome!

[Chris-M · Accepted solution]

Hey @ahemilee, 
If u also want the grey background you have to locate the container or row of the module. You could give it CSS inline styling with for example:

<div class="row-fluid" style="background: #e3e3e3"> </div>

Or the cleaner methode: just add a class to the <div></div>... lets call the class "lightGreyBG"

For example:
HTML:

<div class="row-fluid lightGreyBG">...</div>​

CSS:

.lightGreyBG {
  background:#e3e3e3;
}

 
Here u can see a preview how your page could look with @miljkovicmisa (hope you don't mind) CSS and the background color:
I also added the black font color. And adjusted the margin for the grey background.


Full CSS

.hs-search-field{
  width: 50%;
  margin: 2.5rem auto 2rem auto;
}
.hs-search-field__bar form input {
  background-color: #ffffff;
  color: #000;
}
.lightGreyBG {
    background:#e3e3e3;
}

 
- Chris

[ahemilee]

Thank you @Chris-M  for adding on to @miljkovicmisa 's advice. I was able to make it work with your CSS.

I have another question, hopefully you can answer. How do I change the title of this page? This page is coming from a template that I created and is set as the template for the Search Results page under System Pages. I see an option to change the URL, but I don't know how to change the title. Right now my browser is using the URL as the title in the tab. Any ideas?

[miljkovicmisa · Accepted solution]

Hello @ahemilee ! 
For a block element to be in the middle of its container it needs it left and right margins to be set to auto, so it automatically centers.
In your case you would need the below rules:

.hs-search-field{
    width: 50%;
    margin: 5rem auto 0 auto;
}

As for the background you will need to address the input field, something like the code below:

.hs-search-field__bar form input {
  background-color: #ffffff;
}

If you need any further help, don't hesitate to ask!

If my answer helped you with your issue please mark it as a solution.

[NLacaria]

quick question- what is best way to get the lettering in the box to not have a box around it, so when i change the bg color, it looks like the subscribe box above it?https://www.boardroominsiders.com/blog 

this is current styling

background: whitesmoke; padding: 10px; width: 280px; height: 50px; display: flex; justify-content: center;.center margin: auto; margin-bottom; margin-bottom: 50px; background-color: #FF6C02;

[ahemilee]

Thank you so much! That did the trick!