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!
Center SearchBarProxy Over Hero Image
-
- Propeller Head
- Posts: 15
- Joined: Mon Jul 09, 2012 2:42 pm
-
- Sr. Propeller Head
- Posts: 133
- Joined: Sun Feb 03, 2013 6:01 pm
Re: Center SearchBarProxy Over Hero Image
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:
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:
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.
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:
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
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 */
}
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 { }
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 */
}
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%);
}
I hope that helps,
-jeff
-
- Propeller Head
- Posts: 15
- Joined: Mon Jul 09, 2012 2:42 pm
Re: Center SearchBarProxy Over Hero Image
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!!
Thank you!!