Phone layout not displaying search icon? Responsive HTML RH11

[Alexandra Duffy]

Hello,

I'm creating Responsive HTML5 output in RH11. I've done considerable editing of the default theme, changing colors and removing the index page and the links to it (we don't include an index). At some point, the phone layout stopped displaying the "magnifying glass" icon next to the TOC/Glossary icons. If you hover over the spot, the hovering icon does appear. I have tried everything I can think about to fix this problem, but can't figure it out. The regular icon is definitely present in the folder, along with the hover version. The css correctly names the icon. I have looked at the MasterThemeSchema.xml and when I fooled around with that, I got two magnifying glass icons to appear, but not one. I have created another Theme1 layout, where the search icon displays correctly, and compared the main.css and MasterThemeSchema.xml line by line. I've compared the language for the TOC and Glossary icons, which appear correctly, to the search icon, and everything looks fine. I've even started all over and modified the Theme-1 layout from scratch. Can anyone give me other ideas to check to get the icon to appear correctly in the phone layout?

Thanks,

Alexandra

[Willam van Weelden]

Did you change the filename of the image? The icon in the phone bar (In

the static banner at the bottom of the page) is set in the CSS.

For changing the layout, did you use the HTL5 editor or did you do it

manually?

The selector div.bar_search for mobile has the following setting:

background-image: url(search_buttonbar_small.png);

Is this image available? Is this line available in the CSS? What are the

dimensions of the image?

Kind regards,

Willam

[Alexandra Duffy]

Hi Willam,

I did not change the name of the image, or its size (30x29). The css selector is exactly as you show, above. For changing the layout, I didn't use the RH editor because I found that it stripped out comments from the css file and made other undesirable changes. So, I have been editing the css in Notepad ++ and the layout pages in the HTML view.

According to everything I see, the search icon should display, yet it does not.

Alexandra

[Willam van Weelden]

Did you add a background to the search field or change anything about

the dimensions of the search?

Do you perhaps have a link to an example output made with the layout? I

could then take a look and see what is going on. That's easier than

trying to come up with sensible ideas. Perhaps you can generate an

example project with the layout (you can export/import them).

Normally, I use the developer tools in browsers to sniff out what

is going on in an example output. That's by far the easiest way to find

out why browsers are not responding the way you expect.

Kind regards,

Willam

[Alexandra Duffy]

I have figured out the problem, and the problem was - me. I'm embarrassed to explain the cause, but just in case it helps anyone else, here goes. I had changed the colors of the icons because the default icons had a pinkish tinge I didn't like. By accident, I changed the color of that particular seach icon to exactly match the background color of the buttonbar. So the icon was there, but it wasn't visible. (Smacking my head!)

Sorry to have wasted anyone's valuable time and I appreciate your efforts to help, Willam. I had been trying to fix this for weeks.

Alexandra

[Willam van Weelden]

No sweat. I'm glad it's solved.

Kind regards,

Willam