Center SearchBarProxy Over Hero Image

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
flareuser1
Propeller Head
Posts: 15
Joined: Mon Jul 09, 2012 2:42 pm

Center SearchBarProxy Over Hero Image

Post by flareuser1 »

I'm trying to figure out how to place the SearchBarProxy in the center of my hero image on the homepage. I have it in the image, but I can't get it to move from the bottom of the image to the middle. I also don't want the search bar that's in the header to be impacted by the search bar on the homepage.

Does anyone know the CSS for placing the SearchBarProxy into the center of a hero image? Also, any idea how to make the box so that it's not stretched across the entire image? I'd like it to be a small box in the center.

Much appreciated!
Chicago_HPT
Sr. Propeller Head
Posts: 133
Joined: Sun Feb 03, 2013 6:01 pm

Re: Center SearchBarProxy Over Hero Image

Post by Chicago_HPT »

CAVEAT: I use fixed values to place the search bar on my home page, so I haven't tried this myself. My suggestions here are based solely on other centering experiences. Also, I am not a CSS expert; I just know enoough to be dangerous.

I have a separate stylesheet for the home page and for topics. The hero image is in a div. I think I'm using the default, div.topic-hero). The search bar and text on the hero image are in a div nested inside that. Again, I think I'm using the default, div.home-body:

Code: Select all

div.topic-hero
{
	padding-top: 20px;
	height: auto;
	padding-bottom: 80px;
	background: url('../Images/Assets/home-hero-image.png');
	background-size: cover;
}

div.home-body
{
	max-width: 62.5em;
	padding: 0 16px;
	margin-left: auto;
	margin-right: auto;
	position: relative; /* I don't actually use the position: relative value but it may be necessary if you're going to center something vertically in the div */
}
If it helps, the CSS selectors that I use to format my home page search bar (no values listed here, to keep it clean) are:

Code: Select all

MadCap|searchBarProxy { }

.search,
.search-bar { }

.search-bar._Skins_HomeSearchBar.mc-component { }

.search-bar._Skins_HomeSearchBar.mc-component .search-field { }

.search-bar._Skins_OtherSearchBar.mc-component .search-field { }

.search-bar._Skins_HomeSearchBar.mc-component .search-filter-content { }
Horizontal settings:
To center the search bar horizontally, set the margin-left and margin-right values to auto. To make the search field a certain width, set the width value.

Code: Select all

MadCap|searchBarProxy
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 67%; /* Or whatever width you'd like. If using % values, remember it's the % of the parent container width, in my case, the width of div.home-body */
}
Vertical settings:
First, remember that I added position: relative; for the div.home-body container (see above). I think this might be necessary to center content vertically, but I don't know for sure. As I understand the weird CSS required to center a block vertically (notwithstanding things like Flexbox or other frameworks), the CSS would be something like:

Code: Select all

.search-bar._Skins_HomeSearchBar.mc-component {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
On an educated guess, I used the .search-bar._Skins_HomeSearchBar.mc-component selector for this but it might need to be styled on a different selector.

I hope that helps,
-jeff
flareuser1
Propeller Head
Posts: 15
Joined: Mon Jul 09, 2012 2:42 pm

Re: Center SearchBarProxy Over Hero Image

Post by flareuser1 »

Wow, Jeff! Thank you so much for such a detailed reply. I will try your suggestions for centering, as well as for width. The bar needs to be shorter than the width of the welcome text above it, but the only way I've been able to get it to appear smaller so far is by adding a margin to either side of the search box. But, that isn't working correctly, so hopefully the margin auto plus setting the width percentage will work.

Thank you!!
Post Reply