Inserting a search proxy inside an image

[Cardinal Richelieu]

Hi guys,

I've trawled on this forum and Google for the answer to this (it's probably very simple but then again so am I).

I would like the home page of my help system (generated using Topnav HTML5) to have a nice image with a search proxy inserted into it. I've seen this in lots of sites, and I've read this thread where Dave Lee shows exactly what I want: viewtopic.php?f=13&t=14980 ... (edit: I don't want this to be part of the header in the top nav.. that is just going to have my logo and menu items).

I know how to edit the search proxy - but it doesn't let you add an image for the search box to appear in. Similarly, I can add an image to a page, but I can't add the search proxy into the centre.

Please help .. thanks

[jsandora]

The Home Page for that HTML5 Top Nav output has that set up for you already I believe - an image behind the search box in the page. I believe that's done by using a Div that contains the image AND the Search Bar proxy.

Here's the portion of code from the Home Page:

Code: Select all

<div class="topichero">
            <div class="title-text">
                <div class="small-12 small-centered columns centered-text">
                    <h1 class="whiteheader">Welcome to the <MadCap:variable name="Variables.ProductName" /> Help Center</h1>
                    <h3 class="whiteheader">What would you like to know?</h3>
                </div>
                <MadCap:searchBarProxy data-mc-skin="/Project/Skins/SG_homeSearchBar.flskn" />
            </div>
        </div>

[Cardinal Richelieu]

Never thought of looking there. I'll give it a shot thanks!

[Cardinal Richelieu]

Sorry, I don't think my response fully conveys my gratitude. It works perfectly! Sadly, I've not got much knowledge of HTML so I'd never have thought in a million years of doing that.

Thanks again