I am trying to make my site look the same as your quickstart but have a small problem in that I use Smart Search for my site and the quickstart was done with the regular Joomla search.

The difference is that the Smart Search pushes the magnifying glass icon down to another row. I would like to achieve a couple things:

1) Change the string of text from Search ... to Something Else ...
2) put the Search ... string and the Search Icon both on the same line in the center of the box.
3) Adjust the bottom height of the box to be 44 pixels from the top. This way my social icons, the logo artwork I will develop and the height of the search box will all line up at the top and the bottom.

Would you be able to guide me with a css tweak to do this.

Here is the site where I am starting to work on this:
drcarney.cloudaccess.host/

Also, I have always done these type of CSS changes in the custom.css file but if there is a better way to do that I am all ears since I am just getting started on this redesign.

Thank you, Sean Carney

Hi Sean,

Try adding

#search button {min-width:auto;}

customisation wise it depends really on the changes you plan to make, your understanding of Less files and the amount of changes

I'd suggest for now keeping using the custom css file

Cheers

Thank you so much! I will keep using the custom.css file since I try to not make too many tweaks.

However, today I 'stumbled' upon what I think is much better solution for the search field for me.

What I was 'trying' to do was to replicate the logo row at the bottom of the page onto the bottom of the page as well.

You were already almost doing that in that you had the Social and Logo positions there at the bottom already in the footer row. I moved them into the bottom row and then tried to figure a way to add the Search position to that row. But, it was not possible, as far as I could tell.

Then, I decided to replicate my Search module and place the new search module in another position in that bottom row. I decided on the Bottom6 position. To my delight I loved the way it looked (except that I would like the box lines to be a bit darker)

So, now I am wondering if there is a way to also assign the Bottom6 position styling to the same location where I currently have the Search position now in the Logo row at the top of the page? I would like these to be identical. My idea is to have the three key components at the top and the bottom of the page, hopefully making their use easier.

So, any instructions on how to replicate the styling of Bottom6 to Search would be greatly appreciated.

I had hoped to be able to edit the position name and replace it with bottom6.

Hi Sean,

To summerise you want the top search position to look exactly the same as the bottom?

Cheers

Yes, that would be great. The main appeal is the nice large blue search icon button.

I would love to make the box surrounding the search field a bit darker. Is that a setting within the template itself? I have yet to flush out all the colors in the template.

I like the dark solid blue that wraps the search field when you click into the field. I would like something that prominent for that search box all the time in both locations.

Thanks, Sean

Paul,

I just had a problem with the template that caused me to lose the settings. So, I recreated it and found that the main menu is no longer responsive when the width of the browser window narrows. I am going to try to figure out how to fix this.

But, another thing that happened, which I like is that the Social icons, logo and search at the top lined up above each other on small devices just perfectly.

This almost happens at the bottom of the page for these same elements except that the search field at the bottom of the page does not line up evenly and center aligned. So, now I am more pleased with the way it works at the top of the page. Although, I would love to have some color on the search button. Anyhow, I am eager to hear your thoughts on the best way to make sure that they top and the bottom instances both line up on top of each other and the search looks good.

Sean

Hi Sean,

Does this work for the bottom form?

#bottom6 form {text-align: center;}

That pretty much worked. It is a tiny bit off with the search field aligned a small amount more to the left than it should be. But it is MUCH better. I would like to do this same look in the top Search field if possible so that the Social-Logo-Search line will look the same at the top and bottom of the page.

So we are trying for the button colour and width of the search input?

Yes, I am hoping to basically have the Social-Logo-Search row to be essentially identical in both places. And, I like the big blue search button because it adds color. so, I want to copy that formatting from bottom6 below into the search module above.

The top row is the Logo row in the template

The bottom row is the Bottom row in the template.

Hi Sean,

This is quite complicated to do with the search box so this may not be 100%

#search input {
width: initial;
}
#search form {text-align:center;}
#search .form-search {width: 100%;border: 0;}
#search .form-search input {border: 1px solid #e6e6e6;}
#search button {float:none;}

#search button {
color: #ffffff;
background-color: #0082f3;
border-color: #0067c0;
padding: 10px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

#search button span {color: #ffffff;}


#search #mod-finder-searchword {
text-indent: 0px;
}

Wow. That was a lot. I have commented out everything else from the custom.css and put this in. I do not think it is working but will try to clear my caches soon just in case,

I think I have to eat my words!

I just now restarted my browser after clearing the history and lo and behold the search field at the top is beautifully formatted. I am very grateful. Nice!

Sean

You're welcome

took a while

Cheers
Paul

Paul,

I could still use a tiny bit more help. I placed a search icon for smart search in #top1 position. I am trying to get it to match with white font and blue background.

I have tried: (just guessing unfortunately)

#top1 button {
color: #ffffff;
background-color: #0082f3;
border-color: #0067c0;
padding: 10px;
}

This did not work but I suspect it might be close.

Also, if I make the browser window narrow I realize that the code to center the search in #bottom6 is not actually centering it but it is still staying apparently left aligned.

What we tried there was:

#bottom6 form {text-align: center;}

Hi Sean,

The icon after the menu has collapsed?

As this isn't a button so the styling needs to be a little different

Cheers
Paul

Ah,. that makes sense. Yes it is the little zen-icon that I want to turn blue background with white icon.

I should have realized.

Sean

Try adding

#top1 .zen-icon.zen-icon-search {
color: #ffffff;
background-color: #0082f3;
border-color: #0067c0;
padding:9px 7px 9px 8px
}

and

#top1 a.zen-icon-search:before {
line-height: 15px;
}