Search module RTL

Hey Adam,

This might get you most of the way there...

First, create a default search module, and set its placeholder in the module settings to "Search".

Then set the following design settings in the search module settings:



Also set a blue background color in the section / row containing the search box and add any required padding around the search box, to get::



Now add the following CSS Code to your site. It targets the "search-box-facebook-style" class added in the module settings above:

Code:

Log In or Sign Up to view this code.

Here's the result:



I hope that helps. If you need any help customizing it further, just let me know.

 

Hey Adam,

Are you able to share a link to make it easier to check / discuss?

For the blue background - you can set it to whatever you like in the row / section background settings. You can change the input field background in the search module settings, and the button background color by modifying the color in this part of the CSS:

Code:

Log In or Sign Up to view this code.

For the icon, you might be able to get it showing by adjusting these values:

background-position-y: 14px; /* Adjust icon vertical position */
background-position-x: 14px; /* Adjust icon horizontal position */

They move the icon up/down and left/right, so if it is outside of the bounds of your button adjusting these may bring it back into view.

 

Side note: I've written up a post which breaks down some of the techniques used above to style the Divi search module:

https://divibooster.com/styling-the-divi-search-module/

 

Hey Adam,

Just to be clear, I'm not asking for payment

I can't currently commit to specific projects (paid or unpaid), but I'm always happy to try to help out where I can. Also, note that where I asked you to share a link to check / discuss - I just meant so that I can more easily understand what needs modified and inspect the CSS, etc, currently on the page.

From the look of that screenshot, I think the issue with the icon is the color. The icon color is set within the definition of the svg icon's <path> tag:

Code:

Log In or Sign Up to view this code.

The "fill" parameter is a hex color code "#2f8fff" (i.e. blue). Note that the # is URL encoded to "%23". So to make the icon visible, try changing it to, for example, white by setting the fill parameter like so:

Code:

Log In or Sign Up to view this code.

Hope that helps, and give me a shout if there's anything else you would like some help styling.

Thanks!
Dan

 

Ah, okay. It's stripping out the <svg> tag. You can get around that by URL encoding the icon svg like so:

Code:

Log In or Sign Up to view this code.

Note that I've changed the property from background to background-image to avoid it overriding your existing blue background color. Also, I've set the icon color to white for you, rather the previous blue, so hopefully you won't need to change it. Obviously the URL encoding make seeing where to change the color a bit more difficult - if you do need to change it, just look for this part "fill%3D%22%23ffffff%22" - the color code is the bit shown in bold.

Yeah, I don't think there is a DM feature in the Divi.Help forum (though I may be wrong...). It's probably best to share stuff directly in the forum if you can so that others can jump in and help. But if you do want to message me directly at any point, I can be reached at https://divibooster.com/contact/

I hope that helps sort out the search bar and best of luck with the rest of the site

 

Ha ha, yeah, I get it. Next time you get stuck just try for 2 mins and then post here - we'll be done in 4

(Also, while I can't currently take up your kind offer, if you do want someone to handle it all I'm sure there are plenty of devs with Divi experience who can).

Good luck!

 

Hey Adam, sorry, I think my last reply came off sounding sarcastic. That entirely wasn't my intention. I was going for (and no doubt failing at) light-hearted humor. I genuinely think it's a good idea to ask here sooner rather than later - we may be able to get you unstuck with little effort on our part and save you some time in the process. I'm sure anyone who feels like it's a waste of their time will just avoid answering. Personally, I'm in the business of answering Divi questions, so if I can answer I will

As I've spoken to you about elsewhere, the icon should now be fixed. I'll try to take a look at the padding as soon as I can.