Adding a message beneath the Search bar (but within the header) in Guide
RespondidaI want to add a message to our Guide front page with an announcement of some changes. I am a novice with CSS and have a basic grasp of HTML. Anyway, I managed to get the message where I want it and displaying as I want by making small adjustments to the header_page.hbs and style.css.
The problem is that the magnifier no longer aligns to the search box and I wonder how to correct that. It now shows just beneath the box as shown.
-
Hey Martin Cubitt,
Adjust the CSS: Copy-paste the code.
.hero-inner .search-icon {
top: 11%;
transform: translateY(-11%);
}
Note: You can increase or decrease the number 11% as per yours.
Thanks
Team
-
Thank you so much, worked a charm! (20% for me, but that was the section I didn't see)
-
how did you add the message below the search box please? Martin Cubitt
-
Edit home_page.hbs
replace
{{search submit=false instant=settings.instant_search class='search search-full'}}
</div>with
{{search submit=false instant=settings.instant_search class='search search-full'}}
<p></p>
<table style="width: 100%; border-collapse: collapse; background-color: #800080; height: 36px;" border="0">
<tbody>
<tr style="height: 36px;">
<td style="width: 100%; text-align: center; height: 36px;"><span style="color: #eeeeee;"><strong>What's New?</strong> The Knowledge Base has been refreshed with new and updated content which incorporates the Enhanced Navigation Experience changes. Check it out!</span></td>
</tr>
</tbody>
</table></div>
and edit style.css
.search-icon {
position: relative;
top: 50%;
transform: translateY(-50%);to
top: 55%;.hero-inner {
position: relative;
top: 50%;
transform: translateY(-50%);
max-width: 610px;
margin: 0 auto;to
top: 50% (we ended up leaving it as was)
.hero {
background-image: url($homepage_background_image);
background-position: center;
background-size: cover;
height: 300px;to
height: 200px;
Hope that helps!
Por favor, entrar para comentar.
4 Comentários