Support » Theme: Scribbles » How to add code to the white space under search bar

  • Hello,

    We would like to utilize the white space under the search bar on our website (and extending to the logo) by moving the two seals currently in the sidebar at the top (and possibly adding a PayPal Donate button) to that area. We have the HTML code for all 3 items. How do we go about doing this please?

    Thank you in advance for your assistance.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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.wordpress.org/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

    Thread Starter shihtzurescue

    (@shihtzurescue)

    @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:

    https://i.imgur.com/IzJvfdz.png

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

    https://i.imgur.com/30al6tE.png

    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

    Thread Starter shihtzurescue

    (@shihtzurescue)

    @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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to add code to the white space under search bar’ is closed to new replies.