Lunar Theme - Using Extra Content Area 2 to display search box

I have been advised to refer a recent question I posted on the RW4ALL Forum to this forum.

The Lunar Theme has a toggled Extra Content area (2) that displays at the top of the screen over the navigation area. I would like to use it for a search input box. The toggle symbol is a plus sign that twists to become a cross when the content area is visible but I would like to replace this with the usual search symbol. My attempts at modifying the symbol using CSS have been unsuccessful as I think it’s beyond my limited skills in this area. It may, of course, not be possible.

If anybody has any suggestions I would be grateful.
I’m attaching an image of what I’m trying to achieve but with the existing toggle symbol.

Link to a single page test site:
https://www.kilburnlad.net/dev/

Visible

Hi there @Kilburnlad

Changing that icon would take making changes to both the existing HTML. It would also take writing some new javascript as well to make the search icon change into the closing X icon. Currently the closing X icon is just the Plus sign icon rotated at an angle. So essentially with the search icon you’d just end up with a strangely angled magnifying glass.

Thank you for the prompt reply. I had noticed from the code that it was a rotated plus icon and that the magnifying glass would not offer a conventional close symbol. However, I was prepared to accept that compromise, since the most important consideration for me is to direct visitors to the search facility. If a search is actually initiated it will redirect to a separate results page (not here as it’s purely a mock-up), thus the close symbol would not come into play. I admit that if a search is not initiated then I would need to rely on the visitor realising the need to toggle the now rotated mag glass icon.

I’ve mocked up the mag glass by editing the code in a local export and it actually ends up horizontal (the mag glass handle pointing to the search box), which although somewhat unconventional isn’t too bad an outcome. Does limiting the requirement to simply changing the icon, without adding a new closing X, make life any simpler?

Hi again @Kilburnlad – I admit upfront that you’re not going to like my answer, so I apologize now… The theme itself still needs to be customized internally within the theme’s main index HTML file. If you’ve already cracked open the theme itself and dug around in the index file you’ve probably found the icon location, which uses FontAwesome icon naming conventions. If so you can easily make the change there if you’re comfortable doing so.

For my side of things though I don’t do customizations for themes. I’m happy to offer support for the themes themselves, but if I give out custom code I have to then also support that custom code and any ill interactions it has with other parts of theme, other addons for RapidWeaver etc. I would also need to then take into account those customizations for future updates and how they might be affected. Additionally I’d also feel obliged to offer the same service for all other users too, and as one person that isn’t possible.

Themes are a stock thing that are meant to work a specific way out of the box. You’re more than welcome to dig around and modify them for yourself if you want to, but customizations just aren’t a thing I offer as a part of support.

One word of warning about customizing themes internally – these changes will disappear if a theme gets an update. RapidWeaver simply overwrites the current existing theme with the new update, which will get rid of any internal changes unfortunately.

1 Like

I would not modify the template directly. Too easy for it to get overwritten in an update.

You could use this CSS to override it:

 /* Replace + and X icons in Extra Content Area */
#hidden-extra-content-area-toggle .icon-wrap i:before {
    content: "\f002";
}
#hidden-extra-content-area-toggle .spin-toggle-icon {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
2 Likes

Thank you again for your prompt reply. I fully understand your position on customising themes so wasn’t surprised or disappointed by your answer. I was hoping that the change could be implemented using CSS in the Inspector panel rather than modifying the theme. Fortunately Don H subsequently provided code to do just this, for which I am very grateful.

2 Likes

Thank you so much for this solution, which I have implemented successfully. While I am able to dabble with CSS my limited skills don’t stretch to something like this. I wish that I had asked this question a lot earlier as it would have saved me a lot of failed attempts.

1 Like

Hi Don H

Sorry to bother you again but I have encountered a strange problem. Your code worked fine on the test page, but when I applied it to the site where I wanted to implement it (French at 60), it didn’t work. Further investigation revealed that the associated theme code for the icon is different (and seemingly far more complex) to that on the test page. The ‘i’ tag has been replaced by an ‘svg’ tag with the ‘i’ tag commented out below the code.

This is weird as each is using the same Lunar theme selected from my RW Theme library. I’m totally baffled.

I’ve added an extra content area to the home page of the French at 60 site so that the code can be inspected.

Odd, not sure why they’d be different.

Try this:

/* Replace + and X icons in Extra Content Area */
#hidden-extra-content-area-toggle .icon-wrap svg {
  display: none;
}
#hidden-extra-content-area-toggle .icon-wrap:before{
  content: "\f002"; 
  font-family: FontAwesome;
}
#hidden-extra-content-area-toggle .spin-toggle-icon {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
1 Like

Thank you, that fixed it.

I’m puzzled over the difference. Because of an email address change I can’t actually access the updates for my themes etc. (the information gets sent to a now dead address), so I can’t confirm if my Lunar version is the latest. However, prior to updating Catalina I had Waterfall installed in the RW project file (not compatible with Catalina) and I don’t know if it’s possible that the project version of the theme was updated under Waterfall without updating the library copy. Seems very unlikely but I can’t think of anything else.

Thanks again for your help, most appreciated.

None of my themes use Waterfall whatsoever. Lunar has the standard RW update system built-in. If you email me we can get your address updated for your purchase. adam at elixirgraphics dot com