Lunar Theme - Using Extra Content Area 2 for search box

Elixir’s 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 images of the relevant code and the hidden/visible conditions.

You would have a better chance of getting help if you post this on the Elixir help forum.

Good luck.

No matter what forum you use it’s probably best practice to post a URL to at least a test page when asking for help with CSS.

There are plenty of folks on this forum that can help with CSS, but most may not have the theme you are using or don’t want to recreate what you have.

1 Like

Sorry, I should have posted a link.

This is a single page site that I use to test things. Note that the search box doesn’t actually do anything. It’s just there to show how it would look.

https://www.kilburnlad.net/dev/

I’ve opened a topic on the Elixir Support forum and the Developer has replied. It’s probably best that I pursue things there. Thank you to those of you who have replied to me here.

1 Like

If you duplicate the theme and rename it, you should be able to go into the index file and change that icon and use that modified theme. (In your theme drawer, right click and you duplicate as well as show where the files are stored. You’d just need to locate the index.html file)
21%20PM
That way if the main theme gets updated, you’ll still have your modified backup. It doesn’t look like that theme gets updated a ton (it looks like it’s been over a year since the last one) and if this is the only change you need, it wouldn’t be a big deal to go in and manually change that icon after each update.

I posted some CSS for him on Elixir’s forum.

2 Likes

Don H
Just to repeat my thank you that I’ve posted on the Elixir forum.