Skip to main content
A
Alexandra Duffy
Inspiring
March 5, 2014
Question

Phone layout not displaying search icon? Responsive HTML RH11

  • March 5, 2014
  • 1 reply
  • 695 views

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

This topic has been closed for replies.

1 reply

Willam van Weelden
Willam van Weelden
Inspiring
March 6, 2014

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

A
Alexandra DuffyAuthor
Inspiring
March 6, 2014

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
Willam van Weelden
Inspiring
March 7, 2014

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices