How to add code to the white space under search bar

Hi @shihtzurescue, I hope you like the Scribbles theme,

The customization you want to perform would require basic development skills, but it is doable.

You would need to create a child theme so you could override the search.php file located in scribbles/templates/parts directory

Then you want to put the HTML code to the bottom, below the code that adds the search box.

You may need to adjust the styles to get the desired appearance, but this should work out for you.

Depending on your needs and development skills you may also register a widget area in which you may add whatever you like as seen below:

https://codex.www.ads-software.com/Widgetizing_Themes

If you opt to do this, make sure to create a backup just in case.

I hope this helps, have a nice day,
Andrija

@gdandrija thank you so much for your help. I was able to add the seals and donate button. Can I trouble you and request CSS to place the donate button under the search bar, directly to the right of the seals?

I tried using .button-give-btn.give-btn-modal {Float: right }. Unfortunately other instances of the button in the sidebar and navigation menu also shifted right. The aim is is to have the donate button in the header so we can delete it from the primary menu.

Thanks again for your assistance.

Hi @shihtzurescue,

Thank you for the update, I’m glad to hear you were able to set up the code.

Now regarding the button, the best way you can achieve this would be changing the position of the code loaded

The code used for the Paypal button should be moved below the code for adding badges as seen below:

View post on imgur.com

Once this is done, your button will be directly below the badges without extra styles as seen below:

View post on imgur.com

To prevent styles from affecting all of the buttons, you should use an absolute selector, which will target only the button that is below the search:

div.site-search-wrapper > #give-form-747-wrap > button.give-btn.give-btn-modal {
    float: right;
}

Finally, you may use this code to position the button to the right of icons:

div.site-search-wrapper > div#give-form-747-wrap {
    display: inline;
    position: relative;
    top: -35px;
}

Feel free to adjust the styles per your needs.

Have a nice day,
Andrija

@gdandrija thank you so much! I made a few minor modifications and acheived what we wanted.

Your help is much appreciated.

Hi @shihtzurescue,

You are welcome, I’m glad to hear you were able to get the desired results.

It was my pleasure to assist you, I wish you all the best.

Have a wonderful day,
Andrija