Change Search Button Color in Widget

  • lowndeb


    I did some searching online for the code needed to create a search button.

    <button ONCLICK="window.location.href=''" style="background-color:#ffffff"> <img src="" alt="search catalog" />
    Catalog Search

    The button looks right when I test it but when I put it into the Widget for my front page the button color comes out blue. I have tried changing the colors in the Block Buttons area in Graphene options but it doesn’t seem to change the blue background. Where else do I need to go to change the colors for this button? Here is my site – the button is on the home page, left side:

    Thank you for your help.


    <button ONCLICK="window.location.href=''" style="background-color:#ffffff">
    Catalog Search



    Sorry about that, trying to figure out how to post my code here for you to see without it running the code . . . I think I figured it out.

    <button ONCLICK="window.location.href=''" style="background-color:#ffffff"> <IMG align="center" src="" alt="search catalog">
    Catalog Search

    Kenneth John Odle

    I think I figured it out.

    You got it. I fixed it for you in your first post to avoid problems.

    You merely want to use the image (“ActonLibraryLogo_2014_books_trans.jpg”) as a clickable link, right?

    If so, you can do it this way, which avoids unnecessarily mixing HTML, CSS, and JavaScript:

    <a href="">
    <img src="" alt="Search Catalog" />

    If you want the button instead of the graphic, use this method:

    <form method="link" action="">
    <input type="submit" value="Catalog Search" />

    Or, even easier:

    <a class="block-button" href="">
    Catalog Search

    To change the color, use this in custom CSS or child theme stylesheet:

    .block-button, .block-button:visited { style-options}



    Thank you so much! Your help has been wonderful.

Viewing 5 posts - 1 through 5 (of 5 total)

  • You must be logged in to reply to this topic.